Form with Script
This is an example of a form that uses script to customise a feature. It make use of the last three properties of the root
component.
In this example, the script fields are used to customise the colour of some components in the form, as well as a counter function.
Create Form
First, create a form with the following content.
Ensure the following properties are set up in the respective input fields.
Component | Property | Setting |
---|---|---|
html2 | HTML | Updates: <span id="updates"></span> |
text-input1 | Input Type | “Number” |
html1 | HTML | Reminder is: <span id="reminder"></span> |
button-bar1 | Buttons | [Reset]reset , [Submit]submit |
Add Scripts
Next is to add the scripts into the three script fields. In the root
properties, click on the “Edit (X lines)” button below the field. X represents the number of lines of script in the field. If no script has been added, X is 0. Upon clicking on the button, a dialog box will appear. In the dialog box, key in the script and click on the “Save” button. The number of lines entered will be shown on the button of the respective script fields.
Test Scripts
To test the scripts, click on the “More Actions” icon at the top row and select “Run Form” from the drop-down list.
The “Run Form” dialog box will appear. Select “No Workflow” option, since scripts are used.
Click on the “OK” button to run the form. Another tab will appear with the form. The settings in the form is according to the script in the “Before Build Script” field.
The checkbox “Second” in red. Any selection done on the form and the number next to the “Reminder is” field will reduce. These are according to the script in the “After Build Script” field. Make more than five changes in the form and click on the “Submit” button. The results will be submitted with messages according to the script in the “On Action Script” field.