In this tutorial, you will learn how to create a mashup using both the Lotus Forms Form iWidget and the Lotus Forms Feed iWidget.
You will create a survey in Lotus Forms Turbo and then display the results in a Form iWidget in Mashups. You will do this by using the Feed iWidget and the Form iWidget together. The Feed iWidget will gather the results from Turbo, and Form iWidget will display them.
The survey will consist of a single question and can be used in a meeting or conference call to get immediate feedback from the participants. Each person will click their agreement or disagreement, and you will see the results in your Mashup. The survey form that your users see in their browsers will look similar to this:
The responses that you see in Mashups will look like this:
What you will learn:
You will learn how to use Turbo, Lotus Forms iWidgets, and Lotus Forms Designer together to create a basic data collection and aggregation system. After completing the tutorial you should be able to extend the process to include more complex surveys and more detailed reporting.
The tutorial should take about one to two hours to complete depending on your familiarity and experience with Forms and Mashups. It consists of ten major steps which are atomic; ie, after each one is complete, you should be able to save your work, come back to it later, and start from where you left off.
What you need:
- Lotus Forms Turbo 3.5.1
- Lotus Forms Designer 3.5.1
- Lotus Mashup Center 1.1
Overview of the process:
- Create the survey form in Turbo
- Circulate the form.
- Capture sample of Turbo Feed data
- add the form to Mashups
- add and configure a custom event
- submit a sample response using the form
- add a feed to Mashups and wire it to the form
- download the submitted form to your workstation
- Modify the form in Designer to create a survey consensus form
- Upload the consensus form to Turbo
- Circulate the consensus form
- Reconfigure the iWidget to use the consensus form
Step 1: Create the survey form in Turbo
- Open Turbo and click Create Form. The Composer opens.
- From the Items list, click Survey. The Survey Properties window opens.
- Add the Survey label, Survey items, and Rating scale information as shown in the screen shot then click OK.
- Add a submit button to the form. Your completed form should be similar to this screen shot:
- Save the form with the name survey.
- Return to the Library and circulate the form. When the Circulate for Submission window opens, copy the Form URL and save it for later. This is the URL that you will send to your participants.
- Click Apply.
Step 2: Add the survey form to a new Mashup page
- Open Mashups in your Browser and create a new page with the name Survey.
- Drag a Lotus Forms iWidget onto the page. The iWidgets are in the category that you selected when installing them into Mashups.
- From the iWidget options menu, click Edit Settings. The Lotus Forms iWidget Edit window opens.
- Make sure that the Webform and Turbo server URLs are correct. Expand Advanced. If the Webform Server URL is http://WebformServer or if the Turbo Server URL is http://TurboServer then you must enter valid locations. For example, Webform Server URL should be similar to http://example.com:8085/translator and the Turbo Server URL should be similar to: http://example.com:9080/turbo.
- Click Browse. The Browse Forms window opens and populates a tree view.
- Click survey.xfdl then click Save. When you are prompted to reload the public data events, click OK. The iWidget validates the URL and expands the Events section. Next, you will add a custom event.
Step 3: Add a custom event
Why add a custom event?
You will need the custom event later when you wire the Feed iWidget to the Form iWidget. After the two iWidgets are wired together, the Feed iWidget will collect the data from Turbo, send it to the Form iWidget, and the responses event will cause that data to overwrite the entire existing data set in the form.
- Click Add event. A new row is added to the list of event definitions.
- In the Name column, type responses.
- In the Xpath column, click as Tree. The Configure Xpath window opens.
- Select the instance(“DataInstance”) check box then click Save.
- Click Save.
- Expand the Form iWidget to show the entire form.
- Save your Mashup page.
Step 4: Create a sample response
Why create a sample response?
You need to know the format that Turbo uses for the feed and the format of the data that is in the feed. You need this information so that you can build a form that displays the results of the survey. The simplest way to obtain that information is to get it from a sample form submission. To do that, you submit the form to Turbo then create a Feed iWidget that collects that submission and sends it to a form in your Mashup. You can send it to any form, but for convenience, you capture that data with the form that you just created. Because the form is not designed to display a feed, it will become blank, but do not worry. You will fix that in a later step.
To create a sample response: With the form open in Mashups, select the Agree
option, then click Submit
Step 5: Add the Turbo Feed iWidget to the Mashup
- Drag a Lotus Forms Feed iWidget onto the page.
- From the iWidget options menu, click Edit Settings. The Turbo Feed Edit window opens.
- Expand Advanced. Make sure that the Turbo Server URL is correct. If the Turbo Server URL is http://TurboServer then you must enter a valid location. The Turbo Server URL should be similar to: http://example.com:9080/turbo.
- Click Browse. The Browse window opens and populates a tree view.
- Click survey.xfdl then click Save.
- Set the Data Type to Feed-Row then click Save.
- Save your Mashup page.
Step 6: Capture a sample of the Feed data by wiring the two widgets together
- On the Turbo Feed iWidget, click the wiring button. The Wiring window opens.
- On the Send tab, click SendFeedXML as XML.
- Click Lotus Forms iWidget.
- Select set-responses-value as XML then click Done. Your form should become blank.
Why did the form become blank?
The form is blank because the existing data set was overwritten with a new data set. The new data set is organized differently and does not suit the presentation layer of the original form. Because the form does not know how to present the new data set, it displays a blank page. This is expected. You want a sample of the data so that you can create a new form based on it. What you will do next is save the form to your computer hard drive, open it in Lotus Forms Designer, and modify the presentation layer to properly display the data. After that, you will rename the form then upload it back into Turbo for display in your mashup.
Step 7: Save the form to your hard drive and open it in Designer
- In the iWidget with the form open, click the Save Form icon. The browser's file save window opens.
- Save the form to a convenient location on your hard drive.
- Open the form in Designer.
- Save the form with a new name, for example consensus.xfdl.
Step 8: Create a new form using the survey form that you created
- If you have not already, start Designer and open the form that you downloaded in the previous step.
- In Designer, click anywhere on the design canvas area and use the Ctrl+A key combination to select all items, then press Delete. You should now have an empty page. Although the presentation items are gone, the data remains. Next, you will create a table that displays this data.
- Create a table to display the data
- In the Palette view, click Table, then click on the design canvas. The Table Editor window opens.
- Select Use existing data model and click Next. The Select Instance Data window opens.
- In the Instance pane, click DataInstance. The Instance Data pane displays a tree view of the content.
- In the Instance Data pane, click entry then click Next. The Configure Columns window opens.
- In the Display Columns pane, click Title then click <. The Title is removed from the Display Column. Repeat this step to remove all of the items except for Author and Content.
- Click Next. The Table Settings window opens.
- In the Row Editing section, clear the Button to insert new row and the Button to remove selected row check boxes then click Finish. Designer creates the table and places it on the design canvas.
- Assign data elements to cells in the table
- In the Instance View expand Instance: DataInstance->feed->entry->author to display the name field.
- Drag name onto the Author cell of the table.
- Further expand content->row to display the item field.
- Drag item onto the Content cell of the table.
- Move the table to the top left of the design canvas.
- In the Outline View, expand page1 and click PANE_TABLE1. The Properties View changes to show properties for the table.
- In the Properties view, expand General and change the x and y values of itemlocation to 0.
- Save the form.
Step 9: Upload and circulate the form
- Open Turbo and click the down arrow on the Create Form button.
- Click Upload Form. The Upload Form window opens.
- Enter the consensus.xfdl form that you created then click Upload.
- After the form uploads, circulate it for registered users.
Although you will not need to send this form to anyone, you must put it into circulation anyway because the Form iWidget will only display forms that are in circulation.
Step 10: Display the consensus form in Mashups
- Return to Mashups and go into Edit mode.
- In theForm iWidget, open the options menu and click Edit Settings. The Lotus Forms iWidget Edit window opens.
- Click Browse and in the window that opens, select consensus.xfdl then click Save. If you are prompted to reload the public data events, click OK.
- Add a responses event, exactly the same way that you did earlier.
- Click Save.
- Resize the Form iWidget. It should appear similar to this:
- Wire the two iWidgets together, exactly as you did earlier.
- Save the Mashup.
Now you are ready to conduct your survey. Send the URL of the Turbo form to your participants. As they respond to the survey, you should see the form being updated. The frequency of updates depends on the refresh interval that you set when you wired the two iWidgets together.