UI scripts

UI scripts provide a way to package client-side JavaScript into a reusable form, similar to how script includes store server-side JavaScript. Administrators can create UI scripts and run them from client scripts and other client-side script objects and from HTML code.

UI scripts are not supported for mobile.

Global UI scripts

You can create a UI script and designate it as global, which makes the script available on any form in the system. You cannot create a global UI script in a scoped application.

You can mark a UI script as Global to make it available on any form in the system. For example, you can create a UI script that has a function helloWorld(), and has the Global field checked:

function helloWorld() {
  alert('Hi');
}

After you create this global UI script, you can call the helloWorld() function from any client script or UI policy you write.

Create a UI script

Create a UI script to define reusable client-side JavaScript code.

To create UI scripts, navigate to System UI > UI Scripts and create or edit a record (see table for field descriptions).
Table 1. UI scripts
Field Description
Script Name Name of the UI script. Ensure the name is unique on your system.
API Name The API name of the UI script, including the scope and script name (for example, x_custom_app.HelloWorld).
Application Application that contains the UI script.
Active Indicator of whether the UI script is active. Only active UI scripts can run.
Global

Indicator of whether the script loads on every page in the system.

Note: Use caution when creating global UI scripts because they can impact performance. You cannot create a global UI script in a scoped application.
Description Summary of the purpose of the script.
Script Client-side script to run when called from other scripts.

Run UI scripts

Follow these guidelines when running UI scripts.

To run a UI script on a form, create a formatter. In the associated UI macro, include a g:requires tag and specify the name= parameter as the name of the UI script followed by the .jsdbx extension. Add the formatter on the form view.

This code ensures that the definitions and results of the UI script are immediately available in the browser.

<?xml version="1.0" encoding="utf-8" ?>  
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">  
    <g2:evaluate var="jvar_stamp">  
        var gr = new GlideRecord('sys_ui_script');  
        gr.orderByDesc('sys_updated_on');  
        gr.query();  
        gr.next();  
        gr.getValue('sys_updated_on');  
    </g2:evaluate>  
    <g:requires name="<UI SCRIPT NAME>.jsdbx" params="cache=$[jvar_stamp]" />  
</j:jelly>

To run a UI script from HTML code, use the <script> tag and specify the src= argument as the name of the UI script followed by the .jsdbx extension. For example, include the UI script named CoolClock with this code:

<script language="javascript" src="CoolClock.jsdbx" />