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:
Way cool John!
Hi John very cool idea!
Just a small point, you’re speaking about UI Macros but think you meant UI actions.
@Ahmed…You are correct. Thanks for finding the typo. I have fixed it in the blog post. Thank you for bringing that to my attention.
HI John,
How do you handle the problem of “Refused to display ‘https://www.google.com/#newwindow=1&q=’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.” while opening the iframe in serviceNow??
@Pranav – I believe this is a browser enforced setting and has nothing to do with ServiceNow. Therefore, if a third party issues the SAMEORIGIN setting, then you are stuck. There are blogs out there that sometimes have workarounds on these issues, but some are more valid than others.
Hi John,
After I right click on my UI action, nothing happened, don’t get any popup window
Hi John,
Thanks for cool stuffs.
I got the pop up but page is not loading. I could see in developer tool, Servicenow is blocking http contain. Please help me here to sort this problem. My requirement is stuck here as my web site is hosted on http.
Thanks,
Rohit
https worked for me