<script custom-tag="" type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"UI scripts","image":"http://support.servicenow.com/29f1d2661baf6010cafa53d8624bcb43.iix","author":{"name":"ServiceNow Support","url":"http://support.servicenow.com/now"},"keywords":"ServiceNow, NowSupport public Knowledge Base articles, Product Documentation: Washington DC,KB1595627,","wordcount":"1790","publisher":"ServiceNow","url":"https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1595627","datePublished":"2025-04-15","dateCreated":"2024-01-31","dateModified":"2024-01-31","description":"<h2>UI scripts</h2><br/><div style=\"overflow-x:auto\">\n\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"><head><meta content=\"text/html; charset=UTF-8\" /><meta name=\"copyright\" co","articleBody":"<h2>UI scripts</h2><br/><div style=\"overflow-x:auto\">\n\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"><head><meta content=\"text/html; charset=UTF-8\" /><meta name=\"copyright\" content=\"(C) Copyright 2025\" /><meta name=\"DC.rights.owner\" content=\"(C) Copyright 2025\" /><meta name=\"generator\" content=\"DITA-OT\" /><meta name=\"DC.type\" content=\"concept\" /><meta name=\"DC.title\" content=\"UI scripts\" /><meta name=\"abstract\" content=\"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.\" /><meta name=\"description\" content=\"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.\" /><meta name=\"DC.subject\" content=\"client scripts, UI scripts, global UI scripts, create, run\" /><meta name=\"keywords\" content=\"client scripts, UI scripts, global UI scripts, create, run\" /><meta name=\"DC.relation\" scheme=\"URI\" content=\"../../../script/client-scripts/concept/client-side-scripting-overview.html\" /><meta name=\"DC.relation\" scheme=\"URI\" content=\"../../../build/custom-application/concept/build-applications.html\" /><meta name=\"DC.relation\" scheme=\"URI\" content=\"../../../build/custom-application/concept/developing-applications.html\" /><meta name=\"DC.relation\" scheme=\"URI\" content=\"../../../build/custom-application/reference/building-pro-code-applications.html\" /><meta name=\"DC.relation\" scheme=\"URI\" content=\"../../../script/topic/c_Script.html\" /><meta name=\"DC.creator\" content=\"ServiceNow\" /><meta name=\"DC.date.created\" content=\"2023-08-03\" /><meta name=\"DC.date.modified\" content=\"2024-02-01\" /><meta name=\"DC.format\" content=\"XHTML\" /><meta name=\"DC.identifier\" content=\"c_UIScripts\" /><link rel=\"stylesheet\" type=\"text/css\" href=\"../../../CSS/commonltr.css\" /><title>UI scripts</title></head><body>\n<div class=\"nested0\" id=\"c_UIScripts\">\n <h1 class=\"title topictitle1\" id=\"ariaid-title1\">UI scripts</h1>\n\n \n \n <div class=\"body conbody\"><p class=\"shortdesc\">UI scripts provide a way to package client-side JavaScript into a reusable form, similar\n to how script includes store server-side JavaScript. Administrators can create UI scripts and run\n them from client scripts and other client-side script objects and from HTML code.</p>\n\n <p class=\"p\">UI scripts are not supported for mobile.\n </p>\n\n </div>\n\n<div class=\"related-links\">\n<div class=\"familylinks\">\n<div class=\"parentlink\"><strong>Parent Topic:</strong> <a class=\"link\" href=\"../../../script/client-scripts/concept/client-side-scripting-overview.html\" title=\"Run JavaScript on the client (web browser) when client-based events occur, such as when a form loads, after form submission, or when a field changes value.\">Client-side scripting</a></div>\n</div>\n</div><div class=\"topic concept nested1\" id=\"c_GlobalUIScripts\">\n <h2 class=\"title topictitle2\" id=\"ariaid-title2\">Global UI scripts</h2>\n\n \n \n <div class=\"body conbody\"><p class=\"shortdesc\">You can create a UI script and designate it as global, which makes the script available\n on any form in the system. You cannot create a global UI script in a scoped\n application.</p>\n\n <p class=\"p\">You can mark a UI script as Global to make it available on any form in the system. For\n example, you can create a UI script that has a function <span class=\"keyword apiname\">helloWorld()</span>, and has\n the <span class=\"ph uicontrol\">Global</span> field checked:</p>\n\n <div class=\"p\"><pre class=\"pre codeblock\"><code>function helloWorld() {\n alert('Hi');\n}</code></pre></div>\n\n <p class=\"p\">After you create this global UI script, you can call the <span class=\"keyword apiname\">helloWorld()</span> function from any client script or UI policy you write.</p>\n\n </div>\n\n</div>\n<div class=\"topic task nested1\" id=\"t_CreateAUIScript\">\n <h2 class=\"title topictitle2\" id=\"ariaid-title3\">Create a UI script</h2>\n\n \n \n <div class=\"body taskbody\"><p class=\"shortdesc\">Create a UI script to define reusable client-side JavaScript code.</p>\n\n <div class=\"li step p\">\n <span class=\"ph cmd\">To create UI scripts, navigate to <span class=\"ph menucascade\"><span class=\"ph uicontrol\">System UI</span> > <span class=\"ph uicontrol\">UI Scripts</span></span> and create or edit a record (see table for field\n descriptions).</span>\n <div class=\"itemgroup info\">\n <div class=\"p\">\n<div class=\"tablenoborder\"><table cellpadding=\"4\" cellspacing=\"0\" summary=\"\" id=\"t_CreateAUIScript__table_zsc_z4z_sr\" class=\"table\" frame=\"border\" border=\"1\" rules=\"all\"><caption><span class=\"tablecap\"><span class=\"table--title-label\">Table 1. </span>UI scripts</span></caption><colgroup><col /><col /></colgroup><thead class=\"thead\" style=\"text-align:left;\"><tr class=\"row\"><th class=\"entry cellrowborder\" style=\"vertical-align:top;\" id=\"d502600e236\">Field</th><th class=\"entry cellrowborder\" style=\"vertical-align:top;\" id=\"d502600e239\">Description</th></tr></thead><tbody class=\"tbody\"><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">Script Name</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \">Name of the UI script. Ensure the name is unique on\n your system.</td></tr><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">API Name</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \">The API name of the UI script, including the scope\n and script name (for example,\n x_custom_app.HelloWorld).</td></tr><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">Application</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \">Application that contains the UI script.</td></tr><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">Active</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \">Indicator of whether the UI script is active. Only\n active UI scripts can run.</td></tr><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">Global</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \"><p class=\"p\">Indicator of whether the script loads on every page\n in the system.</p>\n\n <div class=\"p\"><div class=\"note\"><span class=\"notetitle\">Note:</span> Use caution when creating global\n UI scripts because they can impact performance.\n You cannot create a global UI script in a scoped\n application.</div>\n</div>\n</td></tr><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">Description</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \">Summary of the purpose of the script.</td></tr><tr class=\"row\"><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e236 \">Script</td><td class=\"entry cellrowborder\" style=\"vertical-align:top;\" headers=\"d502600e239 \">Client-side script to run when called from other\n scripts.</td></tr></tbody></table>\n</div>\n</div>\n\n </div>\n </div>\n\n </div>\n\n</div>\n<div class=\"topic reference nested1\" id=\"r_RunUIScripts\">\n <h2 class=\"title topictitle2\" id=\"ariaid-title4\">Run UI scripts</h2>\n\n \n \n <div class=\"body refbody\"><p class=\"shortdesc\">Follow these guidelines when running UI scripts.</p>\n\n <div class=\"section\"><h3 class=\"title sectiontitle\">Run a UI script from a form</h3>\n \n <p class=\"p\">To run a UI script on a form, <a class=\"xref\" href=\"../administer/form-administration/task/t_CreateAFormatter.dita/t_CreateAFormatter.html\" target=\"_blank\" rel=\"noopener noreferrer\">Create a formatter and add it to a form</a>. In the associated <a class=\"xref\" href=\"../../server-scripting/concept/c_UIMacros.html\" title=\"UI macros are discrete scripted components administrators can add to the user interface.\">UI macro</a>, include a\n <code class=\"ph codeph\">g:requires</code> tag and specify the <span class=\"keyword parmname\">name=</span> parameter as\n the name of the UI script followed by the .jsdbx extension. Add the formatter on the form\n view.</p>\n\n <p class=\"p\">This code ensures that the definitions and results of the UI script are immediately\n available in the browser.</p>\n\n <div class=\"p\"><pre class=\"pre codeblock\"><code><?xml version="1.0" encoding="utf-8" ?> \n<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> \n <g2:evaluate var="jvar_stamp"> \n var now_GR = new GlideRecord('sys_ui_script'); \n gr.orderByDesc('sys_updated_on'); \n gr.query(); \n gr.next(); \n gr.getValue('sys_updated_on'); \n </g2:evaluate> \n <g:requires name="<UI SCRIPT NAME>.jsdbx" params="cache=$[jvar_stamp]" /> \n</j:jelly></code></pre></div>\n\n </div>\n\n <div class=\"section\" id=\"r_RunUIScripts__section_o5w_npl_d2b\"><h3 class=\"title sectiontitle\">Call a UI script in HTML</h3>\n \n <p class=\"p\">To run a UI script from HTML code, use the <code class=\"ph codeph\"><script></code> tag and specify the\n <code class=\"ph codeph\">src=</code> argument as the API name of the UI script followed by the .jsdbx\n extension. For example, include the UI script named <span class=\"keyword option\">CoolClock</span> with this\n code:</p>\n\n <div class=\"p\"><pre class=\"pre codeblock\"><code><script language="javascript" src="CoolClock.jsdbx" /></code></pre></div>\n\n </div>\n\n <div class=\"section\" id=\"r_RunUIScripts__section_bs1_rpl_d2b\"><h3 class=\"title sectiontitle\">Call a UI script from client-side code</h3>\n \n <p class=\"p\">Access UI scripts from within client-side code using the <span class=\"keyword apiname\">g_ui_scripts</span>\n global object. For more information, see <a class=\"xref\" href=\"../app-store/dev_portal/API_reference/GlideUIScripts/concept/GUIScriptsAPI.dita/GUIScriptsAPI.html\" target=\"_blank\" rel=\"noopener noreferrer\">GlideUIScripts </a>.</p>\n\n <div class=\"p\"><div class=\"note\"><span class=\"notetitle\">Note:</span> This class does not support UI scripts with the <span class=\"ph uicontrol\">Global</span> field\n set to true.</div>\n</div>\n\n </div>\n\n </div>\n\n</div>\n</div>\n</body></html></div>"}</script>