Low-Code Designer > Setting up interfaces / Scripts

Scripts

You can make page widgets more interactive by using scripts. A script is a code that describes the widget behavior under certain conditions. In most cases, the code uses the Yes/No switch variables because most widget actions (hide, show, etc.) bind to their values.

You can write Client-side scripts or Server-side scripts. Client-side means that the action takes place in the user’s browser. Server-side means that the action takes place on the ELMA365 server.

Usually, the widget scripts do not require powerful hardware to operate, so we recommend Client-side writing.

Scripts are written in the TypeScript programming language in the Scripts tab of the convenient low-code designer .

S1

Scripts use cases

 

Widgets are a convenient tool for displaying the information under various conditions. For example, you can create a tip or additional fields that appear after some specific actions.

Let’s see how to use scripts with widgets using the example of a test with several questions.

Example 1. Expand a panel

The questions are collapsed by default. As soon as the user clicks Begin test, the first question panel should expand.

S2

Add Panel with header widget and name it Question 1. Add the Expand q1 variable in the Expanded field in the panel settings. This variable should have a Yes/No switch type. The panel will remain collapsed until the value of the variable changes for true.

S3

When the user clicks Begin test, the value of the variable should change. In order for that to happen, configure the button.

S4

Add the script that is going to change the value of the Expand q1 variable for true. Go to the button settings and add the script in the On click handler field. Click Create, and then click Open. Write the script.  

S5

You can follow this instruction for the most widget activities. Let’s move on to the next example.

Example 2. Show information box

 

Configure the On mouse enter handler field for the Information box widget. This is the notification box that appears if the user selects more than one answer.

S6

Click Create > Open. Write the script in the Scripts tab.

S7

This box should appear under several conditions. Describe them in the script:
S8

Example 3. A pop-up window

 

You can configure the Modal window widget in the same way. This is a pop-up window with the test results. Add the Yes/No switch variable to the Show window field. It will indicate whether the user has completed the test correctly.

S9

The value of this variable is determined by the script below:

S10