UI Action

An action is a process that is triggered by an event.
As a rule, every component has one event.
The events are as follows:

Component	Event	Event name
Button	clicked	onclick
Text field	input is finished and cursor is off	onchange
Canvas	screen loading completed	onload

An action is a process that is executed when an event occurs.
One action can be described per event. That is, one action can be set for a component.

Launching Editor

1. Select a component and right-click to open a context menu.
2. Select "Actions" from the context menu.
3. The Action Editor will be launched.

Processing description

Actions use the JavaScript language to describe the processing content. After the event occurs, the described contents are executed.

The following support is available for writing:

• $ui object to receive component values and properties.
• $ui object can be used to set values and properties on components.
• Built-in function and user function can be described in the statement.

Tips

Tips

When using $ui to receive the value of a UI component, the ID of the component must be specified directly as follows:

Example: $ui.componentID.value

Since transmission from the UI is limited to components received by the action, it is not possible to receive values by dynamically calculating IDs as follows:
Example: $ui.["img_" + i];

There are no restrictions on how to write value output to UI components.

Example with description

Write JavaScript on the action board in the action editor.

A simple example is shown below.
Place three numeric fields and one button on the canvas.

Component Type	Component ID
Number Field	number_field_1
Number Field	number_field_2
Number Field	number_field_answer
Button	button_1

This is an example of outputting the sum of the input values of number_field_1 and number_field_2 to number_field_answer when the button is clicked.

1. Open the Action Editor from the context menu of the button component.
2. Make the following statements on the action board:

const input1 = $ui.number_field_1.value;
const input2 = $ui.number_field_2.value;
const answer = input1 + input2;
$ui.number_field_answer.value = answer;

Explanation

In the first line, $ui is the object that represents the UI screen and we refer to the number_field_1 component object by writing $ui.number_field_1. Further followed by .value, it refers to the value property of the component. The second line is similar.

In the third line, the values of the variables obtained are added. In line 4, the value is set to the value property of the component as opposed to the acquisition.

With this description, when a numeric value is entered into the number fields (number_field_1, number_field_2) on the screen and the button (button_1) is clicked, the result of the addition is output to the number field (ID: number_field_answer).

All of the action descriptions we will be describing will follow this basic flow.