Custom UI Page in a popup

Hi,

In this article, I will show you how you can create a custom UI page in ServiceNow and call that in a popup.

For this, first we need to create a UI Page.

System UI -> UI Pages -> New

UI Page Name: ui_page_demo

HTML Script

<?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:ui_form>
    <table>
        <tr>
        <td style="width:25%">
            <g:form_label>
            Name: 
            </g:form_label>
                 </td>
        <td style="width:60%"> 
                 <input type="text" aria-label="Print your name" name="my_name" id="my_name" maxlength="25"/>   
                </td>
        </tr>
        <tr>
                  <td style="width:25%">
            <g:form_label>
            Select User: 
                </g:form_label>     
                  </td>
          <td style="width:60%">
            <g:ui_reference name="user_ref" id="user_ref" query="user_nameSTARTSWITHa" table="sys_user"  />
                   </td>
                </tr>
        <tr>
                   <td style="width:25%">
            <g:form_label>
            Select Incident: 
            </g:form_label>
                   </td>
            <td style="width:60%">
                      <g:ui_choicelist name="my_category" id="my_category" table="incident" mandatory="true"   field="category" query="active=true"/>
                    </td>
                </tr>
        <tr>
                     <td>
                       <g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('Okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()"/>
                    </td>
               </tr>
    </table>
    </g:ui_form>
</j:jelly>

Client Script

function continueOK() {
    alert("OK clicked");
    var gdw = GlideDialogWindow.get();
    var name =gel('my_name').value;
    var user = gel('user_ref').value;
    var cat = gel('my_category').value;
        var sys_id = gdw.getPreference('sys_id'); //get the values passed in the client script 
    var selected_value = gdw.getPreference('value'); //get the values passed in the client script 
    alert(name+"---"+user+"---"+cat+"---"+sys_id+"---"+selected_value);
    GlideDialogWindow.get().destroy();
}
function continueCancel() {
    alert("Cancel clicked");
    GlideDialogWindow.get().destroy();
}

Processing Script

This will be useful if you are calling a UI page directly (instead of popup) and have a html form. Then all the submitted values of the form can be captured in the processing script like below. Do note that the processing scripts contains server side code and you can store the values in the table or do any other server actions from there.

var user = request.getParameter("user_ref"); //mention the name of the elment here
var my_name = request.getParameter("my_name"); //mention the name of the elment here
var category = request.getParameter("my_category"); //mention the name of the elment here
gs.info("Asif: testing "+user+"---"+my_name+"---"+category);
//you can do gliderecord and store or add any other server side code here

Once this is done, save this.

Now you can call this UI action in a popup from any client script. In our example, i am written this onChange client script of 1 field in incident form.

onChange Client Script

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }
    var dialog = new GlideDialogWindow('ui_page_demo'); //Mention your UI Page name here
    dialog.setTitle('UI Page Demo'); //Set the dialog title
    dialog.setSize(650, 600); //Set the dialog size
    dialog.setPreference('sys_id', g_form.getUniqueValue()); //pass current object id
    dialog.setPreference('value',newValue);//pass the selected value on the form    
    dialog.render(); //Open the dialog   
}