ShowTable of Contents
IBM® Forms automates forms-based business processes to help improve efficiency, customer service, and time to value, making you more responsive to customer and market needs. IBM Forms are used in different industry sectors like government, banking, insurance etc. and can be used in these modes:
- Online. Typically when you are connected to the Internet and make a transaction online, it is said that you're in online mode. For example, suppose you visit a shopping Web site. To register on this site, you are asked to enter personal details in a form-based page and, after doing this, you submit the information and are registered on the Web site.
- Offline. You use this mode when not connected to the Internet. The actual transaction takes place when you reconnect to the Internet and submits the details.
For example, say you log in to a government Web site, download the personal details form, and fill in this form at your leisure. After few days you wish to upload the completed form back to the government Web site, which you can do in two ways, either:
Connect to the government Web site and upload the form, or
if there's an option in the form, connect directly to the government Web site and submit the form details whenever an Internet connection is restored.
In this article, we focus primarily on the offline functionality of IBM Forms, including:
- Creating an offline application
- Updating an offline application
- Integrating IBM Forms with IBM WebSphere® Application Server and IBM DB2®
- Discussing the scenarios in which we can use the offline capability of IBM Forms
To understand the offline capability of IBM Forms, we use a real-life scenario and provide a detailed solution for it.
User John is a field worker for ABC-ATM Corp., a company that installs and maintains ATMs. The company receives a number of complaints from different customers about faulty ATM Machines, and it assigns these complaints or requests to field workers like John. In turn, John is responsible to rectify the faulty ATM machines and present a progress report to ABC-ATM.
John faces a real-time problem, however, in that he has intermittent access to the Internet while working on the faulty ATM machines, possibly due to his working in some remote locations where Internet connectivity is an issue.
To overcome the Internet connectivity issue, John and his company make use of the offline capability of IBM Forms. At the beginning of his ABC-ATM job tenure, John downloads the Complaint Response form from the company's Web site.
This Complaint Response form contains the details of the complaints that are assigned to John. This is the only time John logs into ABC-ATM Web site to download the form, updating the complaints assigned to him on the form and, when connected to the Internet, submitting the form.
Upon John’s submission, the data in his form is synchronized with the data on ABC-ATM's Web site. When he submits the form into the Internet there are two main events that occur; specifically, the complaints that are:
- in closed status are removed from John’s form
- newly assigned to John are listed in John’s form
Here are the components used for this article:
- IBM Forms Designer
- IBM Forms Viewer
- IBM Forms Server
- IBM WebSphere Application Server (WAS)
- IBM DB2
We have used the IBM Forms Designer to design the form template, which is used to populate the form based on user credentials. The user logs into the hosted application on the Internet and downloads his entitled form to his local desktop. The form contains the complaint numbers assigned to this user.
The user can now at his leisure update the forms and its corresponding complaint data. When he has access to the Internet, he clicks on the update button. On click of an Update button, the data from the form will be submitted to the servlet hosted on WAS. With the help of the Forms APIs, we will parse the data received from the form and in turn update the DB2 tables.
Figure 1. Architecture diagram
For the solution, we:
(1) Start by creating a form template using IBM Forms Designer.
(2) Create the DB2 tables to store and retrieve the complaints data.
(3) Configure WAS with DB2.
(4) Lastly, create the Servlets and integrate it with the Forms.
Creating and updating the sample form
To do this:
1. Click on Start Menu --- Programs ---IBM Forms Designer 4.0 --- IBM Forms Designer.
2. Select File --- New --- IBM Form, as shown in figure 2.
Figure 2. Creating a new form
3. In the Forms wizard, select “A blank form” and click Finish (see figure 3).
Figure 3. “A blank form” option
4. Select File --- Save as --- and enter the name as ibmofflineform.xfdl; click OK.
5. Switch to Advanced IBM Forms Designer view (see figure 4).
Figure 4. Switching to Advanced IBM Forms Designer
6. You will see the Palette view on the left-hand side that contains all the tools required for designing your form. Select “Advanced Library”, select Pane (Group), and drag and drop it on the Canvas as shown in figure 5, which shows a new entry, PANE1, created in the outline view.
Figure 5. Creating a Pane
7. Select Label (Output) and drop it on the Pane. A pop-up window displays (see figure 6). Enter “ATM Complaint Response Form” in the Text field, and change the font color/size according to your needs.
Figure 6. Creating form label
At this point the form should look that shown in figure 7.
Figure 7. Label output on the Canvas
1. Now, drag and drop the Pane (Group) on the canvas and resize it. In the Properties view, set label to “Complaint List” and sid to “PANE_TABLE1” (see figure 8).
Figure 8. Properties view for PANE_TABLE1
2. Drag and drop label (output) on the PANE_TABLE1 and set the text as Date and the sid as HEADER_LABEL1.
3. Repeat this step, setting the text as Complaint No, Complaint brief, Receive Dt, and Select, and the corresponding sid’s to HEADER_LABEL2, HEADER_LABEL3, HEADER_LABEL4, and HEADER_LABEL5.
After completing the above steps the canvas should look like that shown in figure 9.
Figure 9. PANE_TABLE1
Now we need to enclose the XML file in the format in which the data would need to be stored. The XML will look like that in listing 1.
Listing 1. XML file
<brief>ATM not working</brief>
<detail>Complaint pending due to some problem</detail>
<brief>ATM touch screen problem</brief>
<detail>Complaint pending due to some problem</detail>
1. Enclose the XML file to your ibmofflineform.xfdl by right-clicking Model:Default in the Enclosures view and selecting Enclose XML File (see figure 10).
Figure 10. Enclose XML File
2. Locate the file dataModel.xml and click OK. Once this is done, the Instance view should look like figure 11.
Figure 11. XML structure in Instance view
3. Drag “Table (Repeat) By Wizard” from under the Advanced Library and drop it on the canvas below the header labels. Expand it to take the entire width of the header labels and change the sid to Table_Table1.
4. Drag “Pane (Group)” from under the Advanced Library and drop it on the Table_Table1. Expand it to be of the same size as the Table_Table1 and change the sid of the pane to ROW_GROUP.
5. Drag four Input Text area fields from the Palette view and drop each one of them below the headers. Change the sid to DATE, NUMBER, BRIEF, and RECEIVED, and drag a select from the Palette and drop it below the selected column. Name this “SELECTED”.
The form should now should look like figure 12.
Figure 12. Completed Complaint List
Similar to the above steps, we now create a new pane and create a label:
- In the text properties, mention “Select the complaint for which the action response is to be updated “.
- Create another new pane and change the sid to PANE_TABLE2. Similar to PANE_TABLE1, we will create three header labels and name them Date, Status, and Detail.
- Again similar to TABLE_TABLE1, create a TABLE_TABLE2 and a Rowgroup. Dag a DatePicker field for the date, a pop-up for the status, and text input field for the details.
- Select a button from the Palette, name it “ADD”, and put it next to the Detail field.
The form should now look like figure 13.
Figure 13. Action Details table created
5. Drag and drop three buttons from the palette of type Print, Save, and Submit.
6. Change the label for the Submit button to Update and enter the following URL properties for the Update button:
The form should now look like figure 14.
Figure 14. Completed form
7. Now, click the Instance view and drag and drop each field to the corresponding field in the canvas. This creates a mapping between the data element and the field on the canvas (see figure 15).
Figure 15. Mapping created between Instance view data and canvas fields
8. Click on the field with SID SELECTED, expand XForms input, and create two setvalue actions, as shown in figure 16. By doing this, we are trying to populate the Action Details region of the form with the corresponding data selected by the complaint number.
Figure 16. Configuration of the SELECTED checkbox
9. For the Add button, create an insert action as shown in figure 17.
Figure 17. Add button properties view
Designing our form is complete with this step, and we can now see how the form behaves.
Using the form
1. Click the Viewer tab; the form looks like that shown in figure 18.
Figure 18. Form as seen in the Viewer tab
2. Select the checkbox for Complaint No 100; the corresponding Action details display (see figure 19).
Figure 19. Function of the Select field
3. Click the Add button; a new entry is created for entering the field data (see figure 20). Enter the details in the form, click Save, and the form is saved locally on your desktop.
Figure 20. Add button action
Using the DB2 sample database
For this example, we use the Employee table that comes as a part of the the DB2 Sample database. In addition, we have created two more DB2 tables, ACTIONRESPONSE and COMPLAINT, as shown in figures 21 and 22.
Figure 21. ACTIONRESPONSE table
Figure 22. COMPLAINT table
Configuring WAS with DB2
To configure WAS with DB2, we open the WAS Integrated Solutions Console and create a new JDBC provider:
1. Expand Resources, then JDBD, and select JDBC Providers (see figure 23).
Figure 23. Create a JDBC Provider
2. Click the New button; the window in figure 24 displays.
Figure 24. Create a new JDBC Provider window
3. Enter the DB2 JDBC driver location (see figure 25)
Figure 25. Specify DB2 Driver location
4. Click Next and then click Finish; the new DB2 JDBC Driver Provider for IBM Forms is created (see figure 26).
Figure 26. New DB2 JDBC Provider
5. Select Data sources and create a new data source (see figure 27).
Figure 27. Create a data source
6. Select the newly created JDBC provider (see figure 28).
Figure 28. “Select an existing JDBC provider” option
7. Enter the database information as shown in figure 29.
Figure 29. Enter database information
8. Enter the Authentication data and click Apply (see figure 30).
Figure 30. Enter authentication data
9. Select the authentication mechanism and click Next; click Finish (see figure 31).
Figure 31. Select authentication data
10. Test the connection to verify it's successful; you should see the message shown in figure 32.
Figure 32. Test connection successful message
Creating servlets to handle the forms data
When a form is updated, it calls a servlet to process the data and store it in the DB2 database. To be able to access the form data, IBM Forms uses its own set of APIs that help retrieve the data stored in a form.
Once we have retrieved the data, we can manipulate it and store it in our DB2 tables. For the purpose of this application example, we used two servlets and created a FormsOfflineApplication.war file, and both the servlets and the JavaServer Pages (JSPs) are part of this project. The .war file is attached to the article as a reference.
t. When a user logs in to the system and passes his employee ID, the system in turn will scan the database for all the complaints assigned to this user, which are displayed on the user's form.
To display the form to the user, we use the Form template that we created earlier. In our code, we initialize the template form with Forms-specific APIs, reading the form and sending it for processing.
We read the data related to the userid/empid from the database, populate the template with the data, and show it to the user, a code snippet of which is shown listing 2. For the complete listing, refer to the attachment.
Listing 2. Code showing the populateformservlet
. When you submit an offline form, you call the FormSubmitServlet that is running on WAS. The servlet, in turn, is responsible for retrieving the contents of the form, uploading the data to the database, and then populating the form with new complaints assigned to the user.
This servlet receives the data in XML format. We parse the XML data using DOM/SAX parser and update the data in the DB2 tables. On completion of the update we call the PopulateFormServlet to populate the data again on a form and show it to the user. The complete code listing is in the attached file.
To demonstrate our example:
1. Log in to WAS using the URL, http://localhost:9081/OfflineForms/jsp/jspget.jsp
, enter the employee ID as 000050, and click the Submit button (see figure 34).
Figure 34. User Login page
2. The IBM Form opens in the browser window showing the the user-specific complaint requests assigned to you (see figure 35).
Figure 35. Complaints assigned to the User
3. Click the Save button, to save the form to your local system, and then open the form from your local system, as shown in figure 36. You have the option to select any of the complaint numbers and add corresponding data for each of them.
Figure 36. Form opened from local system
4. Add some data to Complaint Number 1 (see figure 37).
Figure 37. Add data for Complaint Number 1
5. Add data for Complaint Number 2 and change the status to CLOSED (see figure 38).
Figure 38. Add data for Complaint Number 2
6. Assign a new Complaint number for employee ID 000050 from the backend DB2 and then click Update. You will see that the Complaint Number that is in CLOSED status is not shown in the form; instead, the new Complaint 3 assigned to the user is populated in the users form (see figure 39).
Figure 39. New complaint assigned
You no longer must log in to the WAS page to download the form. You can keep updating the form and, upon connecting to the Internet, can click the Update button and have your form synchronized with the actual application running in WAS/Portal, etc.
You should now be familiar with how to create and update offline applications with IBM Forms. You can use the sample attached files to recreate this example on your personal system, examine the code, and customize it according to your own needs.
Tell us what you think
Please visit this link to take a one-question survey about this article:
developerWorks IBM Forms product page:
IBM Forms documentation page:
About the author
is an IT Specialist with IBM Software Labs India. His areas of specialization are WebSphere Portal, IBM Web Content Manager, and IBM Forms. You can reach him at email@example.com