"Simple Modal Alert" UI Page

[Jim Coyne]

Included in the Developer Toolbox Update Set available on Share (link to Share in the post).

A simple UI Page that displays a message in a GlideModal popup window.  Looks better than the generic JavaScript alert() window and is consistent with the ServiceNow look and feel.  Supports some HTML tags.  Related to "Simple Modal Confirm" UI Page and "Simple Copy/Paste" UI Page.

Sample usage:

var message = "Included in the <a href='https://community.servicenow.com/community?id=community_blog&sys_id=b3c843aadb892b40fece0b55ca961906' target='_blank'>Developer Toolbox</a>&nbsp;Update Set available on Share (link in the 'Developer Toolbox' post).";
message += "<p>&nbsp;</p>";
message += "<p>Simply displays a message in a GlideModal popup window.  Looks better than the generic JavaScript alert() window and is consistent with the ServiceNow look and feel.</p>";
message += "<p>&nbsp;</p>";
message += "<p>Supports <span><b>some</b></span> HTML tags.</p>";

var modalWindow = new GlideModal("u_fpc_modal_simple_alert");
modalWindow.setBackdropStatic(true); //remain open when user clicks outside of the window
modalWindow.setWidth(500);
modalWindow.setTitle("Simple Modal Alert Test");
modalWindow.setPreference("sysparm_message", encodeURIComponent(message));

//set the functions we want to run after the OK or 'X' button is clicked
modalWindow.setPreference('uFpcOnCloseOk', uFpcOnCloseOk.bind(this));
modalWindow.setPreference('uFpcOnCloseX', uFpcOnCloseX.bind(this));

modalWindow.render();


function uFpcOnCloseOk() {
    alert("The 'OK' button was clicked");
    console.log("The 'OK' button was clicked (" + Date.now() + ")");
    g_form.addInfoMessage("The 'OK' button was clicked (" + Date.now() + ")");

    //..add whatever client-side code you need to run here
}

function uFpcOnCloseX() {
    g_form.addWarningMessage("'X' was clicked to close the alert window (" + Date.now() + ")");
}

You can run the sample code in the Xplore: Developer Toolkit.  Make sure you select "Opener: gsft_main" to have it run and open up in a tab that you have SN open in.

A few more lines than alert() obviously, but much nicer.  I figured the page might be useful for someone out there.

Attached is the XML file for the UI Page record so you can just import them into your instance.

As usual, test it out in your dev instance, or better yet, your personal dev instance first.

NOTE:  I've also attached an XML file for an example UI Action that opens the confirm dialog from any form view.  DO NOT USE that UI Action other than to test out the UI Page.

Update July 7, 2022

Now supports optionally running code after either the "OK" or "X" buttons are clicked.  See the example code above.