Event Handlers & Functions

Event Handlers

An event handler is a method that responds to user actions or system-generated events. It is automatically triggered when a specific event (e.g., button click, input change) occurs in the UI.

Event handlers enable developers to bind UI events to handlers within interfaces, master layouts, and components, facilitating user interactions and dynamic behavior.

Event handlers manage user interactions and trigger application logic, enabling seamless communication within components

Key Characteristics of an Event Handler:

• Triggered by UI events (e.g., onClick, onChange).
• Directly attached to UI elements to handle user interactions.
• Does not return values; typically executes logic based on the event.
• Receives an event object containing event-related data.

Add Event Handler

Follow the below steps to create a new event:

1. From the explorer menu, right-click Event Handlers and Functions in an interface (or) master layout (or) component and select Add Event.
2. In the properties panel, configure the properties as required and then click save.

Property	Description	Comments
Name*	Specifies the name of an event.	• Name must start with a character followed by alphanumeric or ''. • No spaces are allowed. • Except underscore (), no other special characters are allowed. • Name cannot start with a number.
Async Operation*	Select Yes or No. Specify whether the event should execute asynchronously (Yes) or synchronously (No) when user interacts with UI elements like buttons, inputs etc.	Asynchronous event handlers are commonly used to make API calls. This is typically done using HttpClient service, which returns Promises. These approaches ensure that API requests are handled efficiently without blocking the UI.
Description	Specify a brief description of the event.	Describe the purpose or functionality of the event.
Is Active	Specify whether the event is active for accessing or not. Either Yes or No. Event definition will not be generated if selects 'No'.	By default, it is set to Yes.

Note: An asterisk (*) denotes that the property is mandatory for creating an event.

3. The "Event Handler added successfully" message displays upon successful creation.
4. The event designer canvas shows the Start and Stop constructs by default. From the ribbon, add the required constructs and configure them as required inside the flow to create a logic. For more information on constructs, refer to Configure Constructs.
5. Click save.

The "Event Handler updated successfully" message displays upon successful update.

Structure of an Event

The created event contains the following:

• Input Params to add input parameters for the flow
• Variables

Event Handler Input Parameters: Event Handler has default input parameter '$event' which contains details about the triggered event.

The user can create input parameters within the event handler and send required data from current item when bind event to widget.

e.g: Assuming that user has a list of products, iterate through list and display product information as card UI.

User can use "Iterable Container" widget to iterate through list of products and design the Product card UI by drag and drop widgets.

Create Event handler name as "editProduct" and create input parameter as "currentProduct" of type as Data Source entity type.

Product card contains 'edit' icon, bind "editProduct" event handler to Click binding.

It shows Input Param Mapping table. User can associate relevant Value from current item alias.

Variables: A variable in an event handler is a named storage location used to store values or event data in an application. User can define variables within the event handler function and used for temporary calculations or logic execution.

Add Input Parameters and Variables

Users can add the parameters and variables to an event as applicable. To add, follow the below steps:

1. Right-click the Input Parameters (or) Variables and select Add. A pop-up window displays.
2. Configure the below properties as required and the click Save.

Property	Description	Comments
Name*	Specify the name of a parameter/variable.	• Name must start with a character followed by alphanumeric or ''. • No spaces are allowed. • Except underscore (), no other special characters are allowed. • Name cannot start with a number.
Is Array	Specify whether the parameter is an array.	By default, it is set to No.
Type*	Select the data type of the parameter from the drop-down.	User can choose Type from the following. • String • Integer • Long • Double • Boolean • DateTime • Any • Map and Entities defined in Entities module.
Default Value	Specify the default value if required.	-

Note: You can reset all customization options back to their default by clicking the Reset button.

The success message displays upon successfully adding a parameter or variable.

Functions

Functions are blocks of reusable code designed to perform specific tasks that is not necessarily tied to a UI event. Functions can be invoked from the component's view template, other event handlers and functions, enabling modular and efficient code execution.

Functions can be invoked in any event, function or subscription function using Call Function construct element by passing expected input parameters.

Key Characteristics of a Function

• Can be called from anywhere within the component.
• May return a value to be used elsewhere in the component.
• Used for computations, API calls, or reusable logic.
• Not directly tied to UI events, but can be invoked by event handlers.

Follow the below steps to create a new function:

1. From the explorer menu, right-click Event Handlers and Functions in an interface (or) master layout (or) component and select Add Function.
2. In the properties panel, configure the properties as required and then click save.

Property	Description	Comments
Name*	Specifies the name of a function.	• Name must start with a character followed by alphanumeric or ''. • No spaces are allowed. • Except underscore (), no other special characters are allowed. • Name cannot start with a number.
Async Operation*	Select Yes or No. Specify whether the function should execute asynchronously (Yes) or synchronously (No) when user calls function in event or function.	Asynchronous functions are commonly used to make API calls. This is typically done using HttpClient service, which returns Promises. These approaches ensure that API requests are handled efficiently without blocking the UI.
Description	Specify a brief description of the function.	Describe the purpose or functionality of the function.
Is Active	Indicate whether the function is active or not. Either Yes or No. Function definition will not be generated if selects 'No'	By default, it is set to Yes.

Note: An asterisk (*) denotes that the property is mandatory for creating a function.

The "function added successfully" message displays upon successful creation.

3. The designer canvas shows the Start and Stop constructs by default. From the ribbon, add the required constructs and configure them as required inside the flow to create a logic. For more information on constructs, refer to Configure Constructs.
4. Click Save.

The "function updated successfully" message displays upon successful update.

Structure of a Function

The created function contains the following:

• Variables
• Input Parameters
• Output Parameter

Variables: A variable is a named storage location in a program that holds a value, which can be changed during execution. It acts as a container for data, allowing developers to store, retrieve, and manipulate information.

Input Parameters: Input parameter that accepts a value when calling the function.

Output Param: Function output parameter is the value that a function returns after execution. This value can be used by the caller for further processing.

Add Input Parameters, Output Parameter, and Variables

Users can add the parameters and variables to a function as applicable. To add, follow the below steps:

1. Right-click the Input Parameters, Output Parameter (or) Variables and select Add. A pop-up window displays.
2. Configure the below properties as required and the click Save.

Property	Description	Comments
Name*	Specify the name of a parameter/variable.	• Name must start with a character followed by alphanumeric or ''. • No spaces are allowed. • Except underscore (), no other special characters are allowed. • Name cannot start with a number.
Is Array	Specify whether the parameter is an array.	By default, it is set to No.
Type*	Select the data type of the parameter from the drop-down.	User can choose Type from the following. • String • Integer • Long • Double • Boolean • DateTime • Any • Map and Entities defined in Entities module.
Default Value	Specify the default value if required.	-

Note: An asterisk (*) denotes that the property is mandatory for creating a function.

The success message displays upon successfully adding a parameter or variable.

Constructs

The following are the constructs available in an event and function:

If	Assignment	Foreach	Break
Continue	While	Return	Initialize
Switch	Run Validations	Confirm	Toast
Navigation	Call REST API	Call ClientFlow	TS Snippet
Form Dirty Check	Recurring Timer	Cancel Timer	Clear Dirty
Logout	Emitter	Subscribe	Download File
Run Liquid Transformation	Enable FormGroups	Disable FormGroups	Call JS Function
Create Anonymous Object	Json Parse	Json Search	Call Aggregate Function
WhenAll	Scroll To Element