How to create custom popup alert box?

This will show you how can you create custom popup with designer buttons by using Glide Modal in ServiceNow.

Use Case

An alert popup always shows default browser alert which is added by adding alert() method in the client script. Customer is looking to for a custom popup which has colour and designer buttons.

The use case is that when user changes the priority of the incident to Priority 1 on the form, then user should get alert which shows a message for P1. If user clicks OK, priority changes to Priority 1 on the client and if user clicks cancel then priority goes back to previous value.

Step 1- Create a UI Page for custom alert.

Name : saas_p1_alert (You can give name as per your choice)

HTML:

<?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>
 <div style="text-align:center;">
 <span class="glyphicon glyphicon-exclamation-sign" style="font-size:32px;color:red;"></span>
<div class="alert alert-danger" style="font-size:18px;">
<p style="margin-bottom:15px;"> You've set priority of this ticket to P1.</p>
<button class="btn btn-default btn-md" style="margin-right:5px;" id="ok_button" onclick="okSubmit()" type="button">Ok</button>
<button class="btn btn-default btn-md" id="cancel" onclick="processCancel()" type="button">Cancel</button> 
 </div>
 </div>
 </g:ui_form>
</j:jelly>

Client Script:

function processCancel(){
 GlideDialogWindow.get().destroy(); //Close the dialog window
 g_form.setValue('impact','');
 g_form.setValue('urgency','');
 g_form.setValue('priority','');
}
function okSubmit(){
 GlideDialogWindow.get().destroy(); //Close the dialog window
}

Step 2 - Create a Client Script.

Name: Show P1 Alert

Table: Incident

UI Type : All

Type: On Change

Field Name : Priority

Script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }


   //Type appropriate comment here, and begin script below
 var priority = g_form.getValue('priority');
   if (priority == '1');
 {
 var gm = new GlideModal("saas_p1_alert");
        //Sets the dialog title
        //gm.setTitle('Show title');     
        gm.setWidth(550);
        //Opens the dialog
        gm.render(); 
 }
 
}

Learning

We have used GlideModal in this solution which is calling the UI page. GlideModal is the replacement of GlideWindow which was introduced later.

There is an important point here is that browser alert box is not testable with ATF however if you will use GlideModal then you can test with ATF.

For More Info Click Here