ServiceNow: popup confirmation message, part 1/2

"We need confirmation popup message when the record is updated to avoid unwanted update, similar style as for delete button."

This is how it started. Unfortunately, replicating delete button code was not possible, it is too complex on the first sight and I believed there is an easier way how to meet the requirement. Yes, I am soooo lazy. As usual in ServiceNow, it already exists. You just need to dive into dark ServiceNow waters, and there are monsters in the dark: UI pages with some jelly code. The result looks like this (plus invisible logic when you click OK):

I will describe two ways how to achieve popup windows:

First case
Using existing out-of-the-box glide confirmation modal windows. Pros: Easy to implement. Cons: Unable to use server functions, which might be limited for some cases. But client will love it, there is no need for customization, it is clean solution.

Second case
Create your own UI page with confirmation modal window and define all logic in the processing script. You can trigger subflow for example. This is like Lego: putting bricks in the right positions. Pros: Robust solution, you can pretty manage everything: the design of confirmation message and processing logic too. Cons: It is more complex (intermediate scripting), it might be difficult to maintain on upgrades. Second case here

First case

We will need only one UI action which utilize out-of-box popup modal message. Navigate to: System UI > UI pages and search for name starting with: glide_

You will find for example glide_confirm_standard, glide_ask_standard, glide_confirm_basicetc. It contains HTML//CSS/Jelly code, you can preview it and get the result. Important note: DO NOT EDIT existing UI pages, it will have impact on related functionalities. But the good thing is that you can use it in the UI action.

Take time to investigate the code, there are parameters which you can control displayed warn/info/error icon in the window, title text, body text, etc.

Use as it is, this part in code is important:

<tr class="dialog_buttons_row">
    <td class="dialog_buttons">
        <g:dialog_buttons_ok_cancel ok="invokePromptCallBack('ok');" ok_type="button" cancel="invokePromptCallBack('cancel')" cancel_type="button"/>
    </td>
</tr>

And next the client script defining properties initializing from your UI action; onPromptComplete, onPromptCancel will reference callback function in UI action (explained later):

function invokePromptCallBack(type) {
    var gdw = GlideDialogWindow.get();
    if (type == 'ok')
        var f = gdw.getPreference('onPromptComplete');
    else
        var f = gdw.getPreference('onPromptCancel');
    if (typeof(f) == 'function') {
        try {
            f.call(gdw, gdw.getPreference('oldValue'));
        } catch(e) {
        }
    }
    gdw.destroy();
    return false;
}

It tells what is triggered when OK or Cancel button is clicked. These parameters will be initialized by a callback function in UI action (explained later), so it will know what would happen when a button is clicked. In general, the logic is action driven: you have some button, button is linked with function and callback functions definitions run the logic. This is how most of modal windows in ServiceNow works.

It is promising, now you need to use it in UI action. Let's have a look:

And the script is:

/* 
* Show modal window, set title, content and properties
* Define callback functions
*/
function myAction() {
    // Definition of the callback function for OK button
    var myActionCallbackOK = function() {
        submitNow();
    };
    // Definition of the callback function for Cancel button
    var myActionCallbackCancel = function() {
        cancelNow();
    };
    // Dialog window setup
    var dlgBody  = 'Are you sure you want to continue?';
    var dlgClass = typeof GlideModal != 'undefined' ? GlideModal : GlideDialogWindow;
    // IMPORTANT define which UI page will be displayed, UI page name OOTB or custom
    var dlg = new dlgClass('glide_confirm_standard');
    dlg.setTitle('Proceed?');
    dlg.setPreference('warning', true);
    dlg.setPreference('title', dlgBody);
    // IMPORTANT define callback properties, properties names
    // are defined in UI page HTML code, use javascript bind() method
    dlg.setPreference('onPromptComplete', myActionCallbackOK.bind(this));
    dlg.setPreference('onPromptCancel', myActionCallbackCancel.bind(this));
    dlg.render();
}

/*
* Processing function for OK button (used in callback)
* IMPORTANT: only client side actions are allowed here, GlideAjax if needed any server side actions
* It updates the record
*/
function submitNow() {
    g_form.save();
}

/*
* Processing function for Cancel button (used in callback)
* IMPORTANT: only client side actions ares allowed here, GlideAjax if needed any server side actions
*/
function cancelNow() {
    // Closes the window by default, can be empty
}

In short: firstly it defines OK/Cancel JavaScript functions and binds it with UI page code, secondly it creates the popup window, sets the attributes and displays the window. Finally, it defines the logic. Only client side actions are allowed because UI action is client (Client checkbox).

This example simply updates the record, and before it asks you if you want to do it. I can see big potential how to level up user experience.

In part two I will describe the second solution which uses a custom UI page and triggers the flow. No rocket science, it will extend some of existing confirmation page, I will put there some existing UI macro and include custom process logic like triggering the subflow. It will be like Lego: putting bricks in the right positions.

Statement: Solution presented in this post is done on personal development instance. No client ServiceNow nodes were injured during development, no data loss, no major incident occurred. Developed and tested on Tokyo ServiceNow release.