UI Script

A UI Script is a process that runs on the client side, triggered by an event.
By using UI Scripts and Actions (server-side execution) appropriately, you can implement input checks and in-screen value linkage at high speed.

Type	Execution Location	Request Consumption
UI Script	Client-side	No
Action	Server-side	Yes

Caution

• If Application Settings - Security Policy is enabled, UI scripts will not be allowed to run with the default settings.
  You can enable execution by setting the value of script-src to 'unsafe-eval'.

Typical use cases for UI Scripts are as follows.

• Required field checks
• Input validation checks
• Input change checks
• Displaying pre-check messages
• Linked updates when a select component value changes

Launching Editor

1. Select a component and right-click to open the context menu.
2. Select [UI Script] from the context menu.
3. The UI Script Editor is launched.

Note

• This setting can only be applied to button components placed on the canvas.

Processing description

UI Scripts are written in JavaScript.
The appearance and operability are the same as the Action Editor.

The following support is available when writing UI Scripts.

• Use the $ui object to get and set component values and properties.
• Only Script user functions can be used (SQL/REST cannot be selected in UI Scripts).
• Use $fn.callAction() when you need to call Action.
• The following built-in functions are available in UI scripts:
  • $fn.message
  • $fn.openDialog
  • $fn.closeDialog
  • $fn.callAction

Note

• Even if a UI Script is written, an Action is executed if Action is selected for the click event.
• $fn.callAction() is an asynchronous function. Use await when calling it from a UI Script.
• Output written with console.log is not recorded in Config and Monitoring - Logs, and is output to the following destinations:
  • Debug console during debug deployment
  • Console in browser developer tools

Example with description

This example performs input validation for a text field on the client side, and calls a server-side action only when the condition is satisfied.

if (!$ui.textfield.value) {
  $ui.textfield.error = true;
  $ui.textfield.helperText = "Please enter a value.";
  return;
}

$ui.textfield.error = false;
$ui.textfield.helperText = "";
await $fn.callAction();

Explanation

Line 1 checks the input value. If it is empty, it sets the error display and ends processing.
If there is an input value, it clears the error display and finally executes the processing written in the Action by calling await $fn.callAction().

Global Functions

• Global functions for UI Scripts are managed separately from those for Actions.
• In the repository, global functions for UI Scripts are displayed with the label Global Functions UI.
• The global function screen is split into UI Script and Action tabs.

Loading display

Type	Loading display
UI Script	Never shown
Action	Controllable