ShowTable of Contents
HTML Extensions
HTML extensions is a new feature in IBM Forms. It allows to add new functionality via custom HTML pages that can be shown in-line or can be launched as a modal dialog. The IBM forms Javascript API can be used to commicate between the HTML page and the form. In this example we show a form with an expandable table where a user can fill in the monthly amounts for rent and utilities. An HTML pane inside the form references an HTML page hosted on the Webform Server. The page uses the YUI3 (Yahoo User Interface) charting component. The IBM Forms Javascript API is used to read an xforms instance from the form that contains the chart data. The chart data is then normalized and used to generate a chart.
Building the Form
The Form contains a simple table added via the wizard. The corresponding Xforms instance looks as follows:
<xforms:instance id="CHARTDATA" xmlns="">
<data>
<items>
<item>
<month>jan</month>
<rent>900</rent>
<utilities>650</utilities>
</item>
<item>
<month>feb</month>
<rent>700</rent>
<utilities>600</utilities>
</item>
<item>
<month>mar</month>
<rent>950</rent>
<utilities>525</utilities>
</item>
<item>
<month>apr</month>
<rent>800</rent>
<utilities>450</utilities>
</item>
</items>
</data>
There is also a field with ID TABLE_SUM which calculates the total of all the rental amounts and all the utilities amounts. This field would normally not be visible. The Xforms bind that calculates the total looks as follows:
<xforms:bind calculate="if(string(sum(instance('CHARTDATA')/items/item/*[local-name()!="month"][.!='']))='NaN','',sum(instance('CHARTDATA')/items/item/*[local-name()!="month"][.!='']))" nodeset="instance('ChartMeta')/page1/sum_table"></xforms:bind>
Underneath the table the new HTML pane widget was added and the relative URL pointing to the HTML page was specified.
The Form is saved in a new directory called ExtensionCharts under the DevelopmentSamples directory within the Webform Server samples framework that can be installed with Webform Server.
The path to this directory in a standard Webform Server installation would be:
C:\IBM\WebSphere\
\installedApps\forms4\WebformSampleApp.ear\Samples.war\SampleForms\DevelopmentSamples\ExtensionChart
Creating the HTML page
The HTML page should be created in the same directory where the form was stored. The complete code for the HTML page is inserted below in 3 parts:
Note the following:
- References to YUI3 framework and stylesheets. You must be online for these to be accessible. Alternatively, the framework can be downloaded and installed locally in which case the references should be adapted.
- References to IBM Forms Javascript libraries. These are installed by default with the Webform Server Sample framework
Note the following:
- XFDL.getCurrentForm().extractXFormsInstance returns a string. YUI provides DataType module that can parse the string into an XML object
- The YUI dataschema module can take different formats (JSON, XML, delimited text) and return a normalized format that can serve as input for the chart module
- In our case the input for the dataschema is XML so we specify a root node (item) and the ResultFields (month, rent, utilities)
Note the following:
- type: "combo" could be changed to e.g. line, area, column, bar
- interactionType: "planar" adds default tool tips to the chart
- There are many more options.....
Running the Sample
Once the XFDL form and HTML page are in place, make sure Webform Server Translater and Server1 are running. Point your browser to:
- http://<your server>:<portnumber>/ Samples
- Navigate to DevelopmentSamples -> ExtensionChart
- Open ChartYUI3.xfdl
- Try changing a value in the table, tab out of the field. The chart will update
- Put your cursor in the bottom row of the table and click the + button to add a new row for the month of May. The chart will update
Resources
Resources files (XFDL and HTML) are available under attachments: