UI Page and UI Macro - fdlGitHub/ServiceNow GitHub Wiki

Loading UI Script(s)

UI Scripts could be loaded in the same time than the UI Page or the UI Macro.

Global Scope

<!--  5d290a25b95cf100021e08e2cf438edc is the sys_id of 'AddressSuggestions' UI Scripts -->
<!--  6d290a25b95cf100021e08e2cf438eed is the sys_id of 'AddressSuggestions' UI Scripts -->
<g:evaluate var="jvar_list_ui_scripts" object="true" expression="new Array('5d290a25b95cf100021e08e2cf438edc', '6d290a25b95cf100021e08e2cf438eed');"/>

<j:forEach items="${jvar_list_ui_scripts}" var="jvar_ui_script">
<!-- We call UI Scripts. It's an obligation to run execut client function -->
    <g:evaluate var="jvar_is_valid_ui_script">
        var UIscriptGR = new GlideRecord('sys_ui_script');
        UIscriptGR.get("${jvar_ui_script}");
    </g:evaluate>
    <j:if test="${jvar_is_valid_ui_script}">
    <!--  Creating command lines to load the UI Scripts.
          Nb: UI Scripts are loaded into the browser cache. We move the date of update files for that the browser always use the most recent version of the files. -->
        <script language="javascript" src="${UIscriptGR.name}.jsdbx?v=${UIscriptGR.sys_updated_on.getGlideObject().getNumericValue()}" />
    </j:if>
</j:forEach>

Application Scope

<!--  5d290a25b95cf100021e08e2cf438edc is the sys_id of 'AddressSuggestions' UI Scripts -->
<!--  6d290a25b95cf100021e08e2cf438eed is the sys_id of 'AddressSuggestions' UI Scripts -->
<g:evaluate var="jvar_list_ui_scripts" object="true" expression="new Array('5d290a25b95cf100021e08e2cf438edc', '6d290a25b95cf100021e08e2cf438eed');"/>

<j:forEach items="${jvar_list_ui_scripts}" var="jvar_ui_script">
    <!-- We call UI Scripts. It's an obligation to run execut client function -->
    <g:evaluate var="jvar_is_valid_ui_script">
        var UIscriptGR = new GlideRecord('sys_ui_script');
        UIscriptGR.get("${jvar_ui_script}");
    </g:evaluate>
    <j:if test="${jvar_is_valid_ui_script}">
        <!--  Creating command lines to load the UI Scripts.
              Nb: UI Scripts are loaded into the browser cache. We move the date of update files for that the browser always use the most recent version of the files. -->
        <script language="javascript" src="${UIscriptGR.name}.jsdbx?v=${(new GlideDateTime(UIscriptGR.sys_updated_on)).getNumericValue()}" />
    </j:if>
</j:forEach>

Loading Style Sheet(s)

Style Sheets could be loaded in the same time than the UI Page or the UI Macro.

Global Scope

<!--  8f925fb724a72200f127f3f7fdc87b7a is the sys_id of Style Sheet name "AddressSuggestions" -->
<!--  9g925fb724a72200f127f3f7fdc87b8b is the sys_id of Style Sheet name "AddressSuggestions" -->
<g:evaluate var="jvar_list_style_sheets" object="true" expression="new Array('8f925fb724a72200f127f3f7fdc87b7a', '9g925fb724a72200f127f3f7fdc87b8b');"/>

<j:forEach items="${jvar_list_style_sheets}" var="jvar_style_sheets">
    <!-- We call Style Sheets. It's an obligation for realize the design -->
    <g:evaluate var="jvar_is_valid_style_sheet">
        var StyleSheetGR = new GlideRecord('content_css');
        StyleSheetGR.get("${jvar_style_sheets}");
    </g:evaluate>
    <j:if test="${jvar_is_valid_style_sheet}">
        <!--  Creating command lines to load the CSS file.
              Nb: Style Sheets are loaded into the browser cache. We move the date of update files for that the browser always use the most recent version of the files. -->
        <link type="text/css" rel="stylesheet" href="${StyleSheetGR.getUniqueValue()}.cssdbx?v=${StyleSheetGR.sys_updated_on.getGlideObject().getNumericValue()}" />
    </j:if>
</j:forEach>

Application Scope

<!--  8f925fb724a72200f127f3f7fdc87b7a is the sys_id of Style Sheet name "AddressSuggestions" -->
<!--  9g925fb724a72200f127f3f7fdc87b8b is the sys_id of Style Sheet name "AddressSuggestions" -->
<g:evaluate var="jvar_list_style_sheets" object="true" expression="new Array('8f925fb724a72200f127f3f7fdc87b7a', '9g925fb724a72200f127f3f7fdc87b8b');"/>

<j:forEach items="${jvar_list_style_sheets}" var="jvar_style_sheets">
    <!-- We call Style Sheets. It's an obligation for realize the design -->
    <g:evaluate var="jvar_is_valid_style_sheet">
        var StyleSheetGR = new GlideRecord('content_css');
        StyleSheetGR.get("${jvar_style_sheets}");
    </g:evaluate>
    <j:if test="${jvar_is_valid_style_sheet}">
        <!--  Creating command lines to load the CSS file.
              Nb: Style Sheets are loaded into the browser cache. We move the date of update files for that the browser always use the most recent version of the files. -->
        <link type="text/css" rel="stylesheet" href="${StyleSheetGR.getUniqueValue()}.cssdbx?v=${(new GlideDateTime(StyleSheetGR.sys_updated_on)).getNumericValue()}" />
    </j:if>
</j:forEach>

Import AngularJS into a UI Page

Add the following line at the begining of the UI Page to import the ServiceNow AngularJS framework.

Jakarta / Kingston / London / Madrid / New-York / Orlando / Paris / Quebec / Rome

<!-- importing angular framework from the SN system -->
<g:requires name="scripts/angular_includes_1.5.11.js" includes="true" />

Helsinki / Istanbul

<!-- importing angular framework from the SN system -->
<g:requires name="scripts/angular_includes_1.4.js" includes="true" />

Formatter -> Get current record

<!-- Récupération des paramètres passé lors de l'appel de l'UI Page -->
<g:evaluate var="jvar_task_id" expression="RP.getWindowProperties().get('task_id')" />
⚠️ **GitHub.com Fallback** ⚠️