Video: Creating and deploying a form using IBM Forms Experience Builder

This video shows you how to build and publish a time sheet using IBM Forms Experience Builder.

Watch the video in full screen.
Download the .mp4 file to watch on a mobile device.
Click the arrow to start the video. This video contains audio. Length: 7 minutes 33 seconds.

Creating and deploying a form using IBM Forms Experience Builder

Table 1. Introduction to the interface
Step	Caption	On-screen Action
1.1	Welcome to "Creating and deploying a form using IBM Forms Experience Builder." With Forms Experience Builder, you can author an interactive, easy-to-use application to collect data or gather user feedback. Forms Experience Builder provides the framework to build the form, capture the data and process the data using process-centric records - entirely on the web. Forms Experience Builder consolidates features previously found separately in IBM Forms solutions. In this video, learn how you can create a complete Forms Experience Builder application, from creating a simple time sheet form to deploying it online.	Welcome Screen: Creating and deploying a form using IBM Forms Experience Builder. - In this video, learn how you can build and publish a timesheet using IBM Forms Experience Builder. © Copyright IBM Corporation 2012.
1.2	Log in to IBM Forms Experience Builder.	Log in screen
1.3	After logging in, the Use screen lists all of your available forms, if you have any. We will create a timesheet form in a few simple steps.	Use screen

Table 2. Adding widgets to the canvas
Step	Caption	On-screen Action
2.1	To create a new application, click Manage and then click the New Application button. For this demonstration, we’ll edit a time sheet form we’ve already started. Open "Timesheet App."	Manage screen
2.2	Drag and drop a section onto the canvas. Then, drag the handles so the section spans both columns.	Canvas
2.3	Edit the section’s properties by clicking the Properties button in the top right hand corner of the section. Change the title to "Time Details" and check the Display title bar? box to display it on the finished form.	Edit Section Properties window
2.4	Drop the Date widget on the left grid of the section.	Canvas
2.5	Drop a Drop Down widget beside it and edit the properties. Change the title to "Code" and enter some values. For our timesheet app, we want the employee to state whether the hours are regular work, overtime, training or vacation time.	Canvas
2.6	Drop a Number field by using the drop target to the right of the drop down widget. The target glows green and a third column is created automatically. You can directly edit the fields on the canvas. Rename it "Hours." In the Properties menu, make the width extra short by clicking the X-Short radio button. Then, in the Advanced tab, set the maximum value to 24 to prevent the user from submitting forms with errors in them.	Canvas
2.7	Drag the column width handles to adjust the spacing of the widgets.	Canvas
2.8	Delete the extra row by clicking the right side of the drop target bar. Select Delete Row.	Canvas
2.9	Drop a Number field by using the drop target to the right of the drop down widget. The target glows green and a third column is created automatically. You can directly edit the fields on the canvas. Rename it "Hours." In the Properties menu, make the width extra short by clicking the X-Short radio button. Then, in the Advanced tab, set the maximum value to 24 to prevent the user from submitting forms with errors in them.	Canvas

Table 3. Configuring complex widgets
Step	Caption	On-screen Action
3.1	Now we’ll create a new section for reporting Workplace Safety violations. Drop a new section below the Time Details section. Then drag the handles so the section spans both columns.	Canvas
3.2	Edit the section properties by clicking the Properties button in the top right hand corner of the section. Add "Workplace Safety" as the title and check the Display title bar? box to display it on the finished form.	Edit Selection Properties window
3.3	Drop a Select One widget in the section. Edit the properties. Title the widget "Did you see any safety concerns today?"	Edit Select One Properties window
3.4	To modify the radio buttons text, change Specify Value to "Yes." Click the green plus button and change the next line to "No."	Edit Select One Properties window
3.5	Click the Advanced tab and change the direction to Horizontal so that the radio buttons are oriented horizontally.	Edit Select One Properties window
3.6	Drag the column handle to fit the text.	Canvas
3.7	Drop a Multi-Line field and drag it to span both columns. You can drag and drop a widget or select a grid space and click the widget you want.	Canvas
3.8	In the Properties menu, rename the field "Details of concern." This field is where the user can type in any information regarding the safety concern.	Canvas
3.9	Use the radio button to change the width to Fit to Column.	Canvas
3.10	Set a rule that hides the "Details of concern" widget unless someone has a safety concern. Click the Rule tab. Select hidden in the drop down menu and the are met radio button. Click Add Condition.	Edit Multi-Line Entry Properties window
3.11	Click the drop down under the "Where" column. Select Did you see any safety concerns today?. Set the operation to Does not Equal with the drop down, the value to constant and select Yes. The "Details of concern" widget is hidden in the finished form unless a user clicks the Yes radio button under "Did you see any safety concerns?".	Edit Multi-Line Entry Properties window

Table 6. Deploying and launching your form
Step	Caption	On-screen Action
4.1	Now, we’ll see our form as a user will see it. Save your changes and click Manage.	Access Tab
4.2	Click Deploy to publish your form to the server for use. Once you deploy, if you go back to edit your form, you must redeploy the form to see any changes on the server.	Manage Tab
4.3	From here, you can copy the link to your form. Forms Experience Builder solutions can be accessed through Portal, Facebook, and Twitter - anywhere a URL can be posted. Click Launch to see the form as it is deployed on the server.	Manage Tab
4.4	This is what users will see of the form we've created. Add values to the form and click Submit.	Timesheet form
4.5	Close the form. Click View Responses to see the responses to the form you've made. Here you can accept or reject the forms submitted by users if you've been given access. You can search for responses, print them, or export the data to a spreadsheet.	View Responses application

Table 7. Summary
Step	Caption	On-screen Action
5.1	In this video, you’ve seen how you can create a dynamic, interactive user-interface with Forms Experience Builder, to capture information from users with a web based form. You can distribute the form easily and automatically capture user-submitted data for analysis in a process-driven environment.	Welcome Screen: Creating and deploying a form using IBM Forms Experience Builder. - In this video, learn how you can build and publish a timesheet using IBM Forms Experience Builder. © Copyright IBM Corporation 2012.

Article information

Category:

Forms Experience Builder, Learning Center, Video Gallery, VideoFest,

Tags:

IBM Forms Experience Builder, getting started, new features

This Version:

Version 17

May 17, 2012

5:16:28 PM

by Steve Shewchuk IBMer

Attachments (0)

Versions (17)

Comments (5)

Submitted by Ben C Jeffery on Dec 9, 2011 2:41:55 PM