JavaScript functions can be run within a Form page in different ways, often connected to page-specific events or interactions.
You can include the JS functions in a Form Definition using the Page Functions feature.
On the Form Designer page, choose Page > Functions from the menu.
A pop-up window appears for configuration. Enter the function name and the JS in the text area as shown below.
Click the “Validate” button to verify the script. A confirmation message appears in the top-right corner. Then, click the Save button.
Use the drop-down list to view the page event functions available in the Form definition, as shown below. Select the page event function to view and modify the script when needed.
Let's associate the page event function. Select a form control and right-click to access the “Events” menu option.
A pop-up window appears for configuration, as shown below.
The Form field is already selected. You need to choose the control event from the drop-down list. The available event functions are “OnChange, OnClick, OnInit, OnKeyUp, OnKeyDown, OnMouseOver, and OnMouseOut.” Note: A tick mark indicates that the event has already been linked to the page function.
Select the page event function from the drop-down list to associate with the control event.
In the example below, the CopyThis() event function is chosen and included in the Script text area.
Click the “Validate” button to validate the JS; a confirmation message appears in the top-right corner, as shown below. Click the Save button.
Create a new Form instance as shown below.
As observed, selecting the Form field triggered a CopyThis() event, copying the user input from the source to the target form field.
Include the JS in the text area without creating a page event function, as shown below. Click the “Validate” button to check the script's correctness, and the Save button to confirm changes.
The form_Load() function.
In the context of form-based applications and JS mapping, the form_load() function (often referred to as an "OnLoad Event") acts as the initialization engine. It is a block of code that executes automatically the moment the form finishes rendering in the browser, but before the user interacts with it.
Its primary purpose is to ensure the form is in the correct "state" for the specific user or scenario at hand.
Note: The form_load() function cannot be bound to the form field control events such as “onchange, onclick, oninit”, etc.
Navigate to Forms - Definitions menu option. Create a form definition and open it in the designer mode. Drag and drop a text box and a submit button. Click the Page - Functions.
The page event configuration pop-up is displayed as shown below. Create a new function called “form_load()” and include any scripts to run when the form loads. Click the “Validate Script” button to ensure the data meets specific criteria before processing. Click the “Save” button. This script runs when the form page loads.
View all Control Events.
To get a quick overview of all the control events on the form definition, select “Page > Control Events” from the menu.
A pop-up displays the list of control, event, and script information as shown in this example below.
