There are several good examples on blogs and the ServiceNow wiki of creating a popup-style dialog box to show form or list data from another ServiceNow form. I wanted to use those examples to create yet another scenario: From a ServiceNow list, right-click on a record and have an external website pop up as a dialog box and accept information from the list record that was selected.

In this example, users can browse incidents in their ServiceNow instance. In the list view, they can right-click an incident and choose an option to view related search results in Mozilla’s Open Directory Project (DMOZ.org). The action will take the terms from the “Short Description” field on the selected incident and show search results on those terms from DMOZ.

In order to to this, we are going to only really need to create two thing:

  • A UI Page that iframe’s the dmoz website
  • A UI Action that launches the UI Page in a GlideDialogWindow

UI Page

Name: search_dmoz
HTML:

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
  <g:evaluate var="jvar_queryTerms"
   expression="RP.getWindowProperties().get('queryTerms')" />
  <iframe src='http://www.dmoz.org/search?q=${jvar_queryTerms}' width='700' height='300'>
    Please Enable iFrames</iframe>
</j:jelly>

This UI Page is going to expect a window property called “queryTerms”. This property will contain the short description of the incident. It will use those terms and stuff them into the DMOZ query URL in the iFrame src attribute. We are also setting the size of the iframe to be 700×300 pixels.

UI Action

Name: Show Related DMOZ Results
Table: incident
Active: True
Client: True
List Context Menu: True
Onclick: showDmoz()
Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function showDmoz() {
    //This code grabs the sys_id of the record that was right-clicked in the list
    var sysId = typeof rowSysId == 'undefined' ? gel('sys_uniqueValue').value : rowSysId;

    //We now will have to do a service query to get the short_description information
    var gr = new GlideRecord("incident");
    gr.get(sysId);

    //Set up the Dialog Window
    var w = new GlideDialogWindow('search_dmoz'); //pass in the name of the UI Page
    w.setTitle('Similar DMOZ Results');
    w.setPreference('queryTerms', gr.short_description); //pass in the query terms
    w.render();  //Show the dialog box
}

The End Result

A user will browse the incident list:
dmozBrowse

They will then right-click on an incident record:
maozRightClick

Then results will be shown in the dialog window:
dmozRes