Creating and deploying a form by using IBM Forms Experience Builder

Table 1. Introduction to the interface
Step Caption On-screen action
1.1 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. Creating and deploying a form by using IBM® Forms Experience Builder. © Copyright IBM Corporation 2013.
1.2 After logging in to Forms Experience Builder, the Use tab lists any available forms. The user logs in. The Use tab opens.
Table 2. Adding items to the canvas
Step Caption On-screen action
2.1 It only takes a few steps to create the timesheet form. You can create an application, or edit an existing one.
  1. Click the Manage tab.
  2. Point to the New Application button.
  3. Open Timesheet App
2.2 A form contains sections and items. First, drag and drop a Section onto the canvas. Then, drag the section so it spans both columns.
  1. Click a Section item and place it on the canvas.
  2. Then, stretch the Section over both columns.
2.3 In Edit Section Properties, you can change the title to “Time Details” and choose to display the title on the finished form.
  1. The click the Edit Section Properties button.
  2. Edit the title of the Section.
  3. Select “Display title bar?” to display the title bar on the form.
2.4 Next, drop the Date item into the section.
  1. Click OK.
  2. Drag the Date item to the canvas.
2.5 This section includes a Drop Down item for employees to indicate the type of hours they report. Edit the values to include regular work, overtime, training, or vacation time.
  1. Add a Drop Down item and click Edit Properties.
  2. Change the title to Code and click Options to edit the values that appear in the drop-down.
  3. Add a value by clicking the Add Option icon.
  4. Add Regular work, Overtime, Training, and Vacation values to the drop-down.
  5. Click OK twice to close both windows.
2.6 Next, drop a Number item into the section for the employee to enter the number of hours worked. A third column is created automatically. You can directly edit the fields on the canvas. Change the properties to 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.
  1. Drag the Number item to the drop target on the edge of the section.
  2. Edit the name of the item by clicking the Number field directly. Rename it Hours.
  3. Click Edit Number Properties.
  4. Click the Extra-Short radio button.
  5. Click the Advanced tab.
  6. In the maximum value field, add the number 24.
There are now 3 items across the section.
2.7 Drag the column width handles to adjust the spacing of the items.
  1. Adjust the width of each item with the slider in the section border.
2.8 Delete any extra rows before moving on to the next section.
  1. Clicking the border of the section labeled Click for Row actions.
  2. Select Delete Row.
The row is deleted.
Table 3. Configuring complex items
Step Caption On-screen action
3.1 Now, create a section for reporting Workplace Safety violations. Drop the new section after the Time Details section. Then, drag the section so it spans both columns.
  1. Select the Section item and place it on the canvas.
  2. Then, stretch the section over both columns.
3.2 Edit the section properties to add a title and display it on the finished form.
  1. Click the Edit Section Properties button in the section.
  2. Change the title to Workplace Safety.
  3. Select Display title bar? to display the title bar on the form
  4. Click OK.
3.3 The form needs a radio button field for the employee to indicate if they have seen any safety concerns today. Drop a Select One item in the section.
  1. Edit the Properties for the Select One item.
  2. Title the item Did you see any safety concerns today?
3.4 You can change the text of the radio buttons or add new values.
  1. Change the Displayed Value in the Options section to Yes.
  2. Click Add Option and change the next line to No.
3.5 You can display the radio buttons either horizontally or vertically.
  1. Click the Advanced tab.
  2. Click the Horizontal radio button so that the radio buttons are oriented horizontally.
3.6 Drag the column handle to fit the text.
  1. Adjust the width of each item with the slider in the section border.
3.7 If the employee needs to report a safety concern, the form will contain a field to enter any information about it. Drop a Multi-Line item for the details field and drag it to span both columns. You can drag and drop an item or select a grid space and click the item you want.
  1. Select the Multi-Line item and place it on the canvas.
  2. Stretch the Multi-Line item over both columns.
3.8 In the Properties window, you can rename the field and change the width. Use the radio button to change the width to Full width.
  1. Open the Properties window for the Multi-Line item.
  2. Change the title of the Multi-Line item to Details of Concern.
  3. Click the Full width radio button.
  4. Click OK.
3.9 You can set a rule that hides the “Details of concern” item unless someone has a safety concern. If the previous field is not marked Yes, you want to hide the details field.
  1. Click Edit Rules.
  2. Click Add Rule.
  3. In the When this is true section, select Did you see any safety concerns today?.
  4. Select Does not Equal.
  5. Select A fixed value and select Yes.
3.10 With this rule, the details field will be hidden in the finished form unless a user changes the previous field to Yes.
  1. In the Perform this action section, select Details of concern in the first drop-down and Hide in the second drop-down.
Table 4. Deploying and launching your form..
The video describes how to deploy your form after it is complete, and how to launch the form so users can access it.
Step Caption On-screen action
4.1 Now, you will see our form as the employee will see it. Save your changes and click Manage.
  1. Click Save
  2. Then, click the Manage tab.
4.2 Deploy the form to publish it to the server for use. If you edit your form after you deploy it, you must redeploy the form to see any changes on the server.
  1. Click Deploy.
  2. Then Start in the Deployment settings window.
4.3 From here, you can copy the link to your form. People can access your Forms Experience Builder application through IBM WebSphere® Portal, Facebook, and Twitter or anywhere a URL can be posted. Click Launch to see the form as it is deployed on the server.
  1. Click Show application details. The link to the sample application is exposed.
  2. Click Launch.
4.4 The employee will see the finished form, add their information, and submit the form.
  1. Add values to the form and click Submit.
4.5 After you close the form, you can read the responses to it. The information is summarized in charts. If you have access, you can accept or reject the submitted forms. You can search for responses, print them, or export the data to a spreadsheet.
  1. Click View Responses.
  2. Click Responses to examine the details of the responses.
  3. Find the Print button in the preview section.
  4. Click Export and select a format.
Table 5. Summary.
A brief summary of the steps that are taken and actions that are performed in the video.

Step Caption On-screen action
5.1 Get started today with Forms Experience Builder to create a web-based form with a dynamic, interactive user-interface for capturing, distributing, and analyzing information. Closing animation displays. © Copyright IBM Corporation 2013.