"Simple Modal Confirm" UI Page

[Jim Coyne]

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

Similar to the "Simple Modal Alert" UI Page, but this one gives the user a choice to cancel the operation.  Looks better than the generic JavaScript confirm() window and is consistent with the ServiceNow look and feel.  Supports some HTML tags.  Related to the "Simple Copy/Paste" UI Page.

Supports optionally running code after the "OK", "Cancel" or "X" buttons are clicked.  See the example code below:

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 with 'OK' and 'Cancel' buttons.  Looks better than the generic JavaScript confirm() window and is consistent with the ServiceNow look and feel.</p>";
message += "<p>&nbsp;</p>";
message += "<p>Supports some HTML tags.</p>";

var modalWindow = new GlideModal("u_fpc_modal_simple_confirm");
try {
    modalWindow.setBackdropStatic(true); //remain open when user clicks outside of the window.  Can omit if you do not care about this
} catch (err) {}
modalWindow.setWidth(600);
modalWindow.setTitle("Simple Modal Confirm Test");
modalWindow.setPreference("sysparm_message", encodeURIComponent(message));

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

modalWindow.render();


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

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

}


function uFpcOnCloseCancel() {
    alert("The confirm dialog was cancelled (" + Date.now() + ")");
    console.log("The confirm dialog was cancelled (" + Date.now() + ")");

    //..add whatever client-side code you need to run here
    g_form.addWarningMessage("The confirm dialog was cancelled (" + Date.now() + ")");
}


function uFpcOnCloseX() {
    g_form.addWarningMessage("'X' was clicked to close the confirm 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 confirm() 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.