Create a widget that displays a ServiceNow UI page

You can create ServiceNow UI page that displays a web page, then make the UI page into a widget that can be added to dashboards and homepages.

Before you begin

Role required: admin

About this task

A UI page is a ServiceNow page that is not a list or a form. Certain UI pages, such as external site widgets or gadgets, do not display properly when placed in a dashboard.

Note: This functionality requires a knowledge of JavaScript.

Procedure

  1. Create or find a ServiceNow UI page that you want to display as a widget. Note the name of this UI page, to use in Step 4.

    For example, this HTML displays the ServiceNow landing page in an iframe.

    <iframe id="myframe" src="http://www.service-now.com" scrolling="yes" style="height:100%; width:100%"></iframe>
  2. Navigate to System UI > Widgets and click New.
    Widgets records are widget category records, not records for individual widgets. When adding a widget to the dashboard, first select the category and then the widget. The javascript you specify in step 4 contains the list of widgets to include in that category.
  3. Fill in the following fields.
    FieldDescription
    Name The name of this widget category. The user selects this category when adding its widgets to a dashboard.
    Renderer Type Select Javascript.
    Active Clear to make the widget unavailable to add to dashboards.
    Roles Select roles that can see this category when adding widgets to dashboards. If no roles are selected, all roles can see the category.
  4. Add the following javascript in the Script field, making replacements as specified. The return statement contains the widgets that are listed in this widget category.
    widget_name The name of the widget, which the user selects in the widget picker when adding the widget to a dashboard. This string also appears on the widget header.
    UI_page_name The name of the UI page from Step 1 to display in the widget.
    function sections() {
        return {
            'widget_name': { 'uiPageName' : 'UI_page_name'},
            'widget_name2': {'uiPageName': 'UI_page_name'}
        };
    }
    
    function render() {
        var uiPageName = renderer.getPreferences().get("uiPageName");
        return renderer.getRenderedPage(uiPageName);
    }
    
    function getEditLink() {
        return "sys_ui_page.do?sysparm_query=name=" + renderer.getPreferences().get("uiPageName");
    }
  5. Click Submit.
    To learn how to make a UI page without using a framework page template, see the Making a UI page without using the framework page template blog posting by a developer in the ServiceNow Community.