UI Pages

From ServiceNow Wiki
Home > Script > Server Scripting > UI Pages
Jump to: navigation, search
Note
Note: This article applies to Fuji and earlier releases. For more current information, see UI Pages at http://docs.servicenow.com

The ServiceNow Wiki is no longer being updated. Visit http://docs.servicenow.com for the latest product documentation.


1 Overview

UI pages can be used to create and display forms, dialogs, lists and other UI components. Use UI pages as widgets on homepages. To find the UI Pages, navigate to System UI > UI Pages.

This functionality requires a knowledge of HTML or Jelly.

2 UI Pages Form


UI_Pages_Form.png


The UI Pages form provides the following fields:

Field Input Value
Name This name is used to invoke the page via a URL and must not contain spaces. The UI page URL becomes https://instance.service-now.com/page_name.do.
HTML This is the main component of the page, and it defines what will be rendered when the page is shown. It can contain either static XHTML or dynamically generated content defined as Jelly, and it can call script includes and UI Macros.
Client Script This is a client-side JavaScript that runs in the browser (e.g. functions called by buttons, etc.). It is intended to handle any client-side processing needed, for example setting focus to a field, or other interactive DHTML features after a page is loaded. Ultimately, a UI page's Client Scripts are deployed to the browser within a <script/> tag, so it could be defined within the page's HTML field to achieve the same effect. Using the Client Script field instead to define these scripts makes things much more tidy and readable though, and it keeps the Jelly and HTML from becoming unmanageable.
Processing Script This script runs on the server when the page is submitted. This is mainly useful if your page has a form (defined with the <g:ui_form/> or <g:form/> tags).
Related lists on the form view:
Versions Shows all versions of the UI page. Use this list to compare versions or to revert to a previous version. See Versions.

3 Invoking a Page

Pages can be accessed from anywhere in the system by appending the name of the page and .do to your instance URL. For example, to display the page called glidewindow_example on the demo system, you would add a link to https://<instance name>.service-now.com/glidewindow_example.do

You can also add additional parameters to a URL that can be accessed within a page's HTML section as jelly variables. That is, appending arguments to the URL as follows: /my_test_page.do?sysparm_verbose=true creates jelly variables called verbose that can be accessed as follows:

<j2:if test="$[!empty(sysparm_verbose)]">
    <span>show extra stuff</span>
</j2:if>


A common practical example of this might be retrieving a database record for display. To build a list of a user's roles, pass in a parameter with the user's sys_id. Invoke the following UI page to display a list of roles for that user with Jelly code,

role_select.do?sysparm_user=5137153cc611227c000bbd1bd8cd2007
<j:set var="jvar_user_id" value="${sysparm_user}" />
  
 <g:evaluate jelly="true">
    var userRoles = new GlideRecord('sys_user_has_role');
    userRoles.addQuery('user', jelly.jvar_user_id);
    userRoles.query();     
 </g:evaluate>
 
 <select id='select_role'>
    <j:while test="${userRoles.next()}">
       <option value="${userRoles.sys_id}">${userRoles.role.name}</option>
    </j:while>
 </select>


An exception to be careful of, though, is the reserved variable name sys_id. This variable always contains the ID of the UI page itself, regardless of what is specified in the URL. A common substitute variable name is sysparm_id.

4 Using a Processing Script

If your UI Page contains a form (uses the <g:form> tag), you can submit the form and have the Process Script run. The Processing Script can naturally access fields on the form. For example, if your form contained the application_sys_id field:

<g:ui_form>
     <p>Click OK to run the processing script.</p>
    <g:dialog_buttons_ok_cancel ok="return true" />
    <input type="hidden" name="application_sys_id" value="499836460a0a0b1700003e7ad950b5da"/>
 </g:ui_form>


You could then access it using just application_sys_id:

Note
Note: This API call changed in the Calgary release:
  • GlideSession replaces Packages.com.glide.sys.GlideSession

The new script object calls apply to the Calgary release and beyond. For releases prior to Calgary, substitute the packages call as described above. Packages calls are not valid beginning with the Calgary release. For more information, see Scripting API Changes.

var application = new GlideRecord('hr_application');
 application.get(application_sys_id);
 application.status = "Rejected";
 application.update();
 var urlOnStack = GlideSession.get().getStack().bottom();
 response.sendRedirect(urlOnStack);


If you are using the UI Page for a dialog, you can also reference the most recent URL on the stack using the code above and then send the response to that location. This is useful if you want to have the dialog's Processing Script update something and then redisplay the screen that brought up the dialog.

5 Security

5.1 Setting up ACLs on a page

To secure a UI Page, an ACL can be created:

  • Type: ui_page
  • Operation: read
  • Name: the name of the UI Page to be protected

5.2 Making the UI Page Public

If you want to make a UI Page publicly available to anyone without needing authentication, see making a page public.

Was this article helpful?
Yes, I found what I needed
No, I need more assistance