Interactive Forms in a Report

Report Designer supports data entry and report customization through interactive forms. A form is a collection of interactive controls, such as Text fields, Radio Buttons, and Combo Boxes. Interactive forms are used primarily in two roles: Embedded in reports to allow report customization, and embedded in parameter sheets to allow parameter entry.

See the Parameterization section of the Report Designer for the basic methods of obtaining user input (without scripting). The following sections here expand on some of the more advanced features available for user interaction. There are two basic aspects:

• Creating a Form: Client-side presentation and event scripting
• Processing a Form: Server side scripting

Creating a Form

There are two steps in creating a form: Adding form controls, and adding client-side script.

Adding Form Controls

The first step in creating an interactive form is to add form controls to a report or parameter sheet. (These form elements are represented as basic HTML form elements when the report is rendered in the User Portal.) Form control elements all share two properties:

• 'Form Name'
• 'Field Name'

Controls with the same form name are grouped into a single form. To add form elements, follow the steps below:

1. In Report Designer, click the right-arrow button on the top of the element toolbar to expand the toolbar. (See Form Design in the Report Designer for toolbar information).
2. Drag a form element from the toolbar into the report.
3. Right-click the new report element and select 'Properties' from the context menu.
4. Enter a 'Form Name' for the element. Use the same form name for all elements belonging to the same form. The specified 'Field Name' is assigned as the name of the HTML control in the Portal, and is used by client-side and server-side script to access the control's value.
5. Enter a unique 'Field Name'.
6. For Radio Buttons, use the same Field Name for buttons in the same Radio Button group. The group is then treated as a single field, with the value of the group being the value of the selected Radio Button. 6. (Optional) Click the HTML tab to open the client-side JavaScript editor.
7. In the onSubmit and onClick tabs, enter JavaScript commands to be executed on the client side when an 'onSubmit' or 'onClick' event occurs in the browser. See Client-Side JavaScript below.
8. Repeat the above steps to add the desired controls, including at least one button or image button to use for submitting the form.

View live interactive examples in InetSoft's dashboard and visualization gallery.

Client-Side JavaScript

Script that you enter in the onSubmit and onClick tabs (see Adding Form Controls) is standard JavaScript that is executed by the client browser when the corresponding event occurs.

Within the context of these scripts, you can use the 'Form' variable to reference all elements on the form. For example, if the form contains a Choice element with field name 'Choice1' and a TextField element with field name 'TextField1', you can add an onSubmit script on the Choice1 element to set the value of TextField1:

Form.TextField1.value = Form.Choice1.value; 
return true; 

This script executes whenever a “submit” action occurs in the form (triggered by any form element). Although you can attach the 'onSubmit' script to any element, a given form should contain only a single 'onSubmit' script. To assign a submit action to a form element (other than a Button), enable the 'Submit on Change' option in the element's 'Properties' dialog box.

If the 'onSubmit' script returns “true,” the form data is sent on to the server; otherwise, it is not sent. This allows you to use client-side script to verify input values before the form is sent to the server. For example, the 'onSubmit' script below verifies the value entered in TextField1:

if (Form.TextField1.value < 10) {
  return true;   //send to server
}
else {
  alert('Maximum value exceeded.');
  return false;   //do not send to server
}