This article is the 3rd in a series of posts explaining the use of ‘GlideDialog’ in ServiceNow. If you want to see all of the articles I’ve written about GlideDialogWindow and popups in ServiceNow just use the tags at the bottom of this article.

In this article I’ll show you how you can use GlideDialogWindow to pop open a dialog containing any custom UI Page information you want. I’ll also show how you can pass information into those dialogs, and how you can return information from those dialogs back to the standard form that initiated the dialog. These dialogs can be initiated from any place where you can use client scripts…client scripts, UI Macros, UI Actions, etc.

The only warning I’ll give here is this: While it’s very easy to pop open a dialog window using this method, the real work happens in the UI Page contained in the dialog. The purpose of this post is not to explain the complexities of creating your own UI Pages in ServiceNow. Until I get a chance to write about those, the best recommendation I can give you would be to take a look at the UI Pages you’ll find out-of-box in your system.


The example I’ll use here is based off one that a ServiceNow developer wrote as an example. It’s not very fancy, but it’s simple enough to show how things work without adding a bunch of confusing elements. It simply opens a dialog with information populated from the form, and returns information from the dialog to the form.

The first piece of this solution is to set up some mechanism to trigger your GlideDialogWindow. For this example I’ve chosen to use a UI Action button. Here are the details of the button. The comments in the script explain how to initialize the dialog and pass parameters on to your UI Page to populate information there.

‘Comments Dialog’ UI Action
Name: Comments Dialog
Table: Incident
Action name: comments_dialog
Form Button: True
Client: True
Onclick: commentsDialog()
Script:

function commentsDialog() {
   //Get the values to pass into the dialog
   var comments_text = g_form.getValue("comments");
   var short_text = g_form.getValue("short_description");

   //Initialize and open the Dialog Window
   var dialog = new GlideDialogWindow("task_comments_dialog"); //Render the dialog containing the UI Page 'task_comments_dialog'
   dialog.setTitle("Add Task Comments"); //Set the dialog title
   dialog.setPreference("comments_text", comments_text); //Pass in comments for use in the dialog
   dialog.setPreference("short_text", short_text); //Pass in short description for use in the dialog
   dialog.render(); //Open the dialog
}

Once you have your UI Action set up to trigger the dialog, you need to make sure that you have the correctly-named UI Page to display in the dialog. In the script above, we used ‘var dialog = new GlideDialogWindow(“task_comments_dialog”);’ to initialize a GlideDialogWindow and point to the ‘task_comments_dialog’ UI Page. Here’s what that page looks like. The comments in the HTML below explain each piece of the UI Page. The client script portion of the UI Page is used to validate the input on submission of the dialog form. If validation passes, the value of the ‘Comments’ field on the dialog is passed to the ‘Comments’ field on the original form.

‘task_comments_dialog’ UI Page
HTML

<g:ui_form>
  <!-- Get values from dialog preferences passed in -->
  <g:evaluate var="jvar_short_text"
    expression="RP.getWindowProperties().get('short_text')" />
  <g:evaluate var="jvar_comments_text"
    expression="RP.getWindowProperties().get('comments_text')" />
   <!-- Set up form fields and labels -->
   <table width="100%">
     <tr id="description_row" valign="top">
        <td colspan="2">
           <!-- Short description value used as a label -->
           ${jvar_short_text}
        </td>
     </tr>
     <tr>
       <td>
         <!-- Comments text field (Contains comments from originating record as a default) -->
         <g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Additional comments" value="${jvar_comments_text}" mandatory="true" />
       </td>
     </tr>
     <tr>
       <td colspan="2">
       </td>
     </tr>
     <tr id="dialog_buttons">
        <td colspan="2" align="right">
           <!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.
          'ok' option will call the 'validateComments' Client script function from the UI Page-->
           <g:dialog_buttons_ok_cancel ok="return validateComments()"ok_type="button" cancel_type="button" />
        </td>
     </tr>
  </table>
</g:ui_form>

Client script

function validateComments() {
   //Gets called if the 'OK' dialog button is clicked
   //Make sure dialog comments are not empty
   var comments = gel("dial_comments").value;
   comments = trim(comments);
   if (comments == "") {
      //If comments are empty stop submission
      alert("Please provide comments to submit the dialog.");
      return false;
   }
   //If comments are not empty do this...
   GlideDialogWindow.get().destroy(); //Close the dialog window
   g_form.setValue("comments", comments); //Set the 'Comments' field with comments in the dialog
}
If you’re interested in learning more about how to use this method I highly recommend taking a look at a great example that you can find right in your ServiceNow instance. The ‘task_assignment_group_choose_by_person’ UI Macro can be added to the ‘assignment_group’ field on any task form by adding the ‘ref_contributions=task_assignment_group_choose_by_person’ attribute to the dictionary entry for that field. The UI Macro shows up as an icon that displays a GlideDialogWindow containing the contents of the ‘task_assignment_group_dialog’ UI Page when it is clicked. The UI Page lets the user search for and select an assignment group to populate on the form.