Using UI Action with GlideModal

ericgilmore · ‎10-11-2022

I have a UI Action that closes a task.

I want a modal window to display when the [Close Task] ui action is clicked.

The goal is to inform the user;

1. You're about to close a task, NOT close a window and go to the previous page.

2. How to close the window instead

How do I check if "OK" or "Cancel" has been clicked in the modal panel?

Documentation seems unclear on this.

UI Action: Close Task
OnClick: closeTask()

Script
------------------------
function closeTask(){
	var gm = new GlideModal('close_task');
	gm.setTitle('You Are About to Close a Task');
	gm.render();

	/* when OK is clicked, set some field values, submit the task*/
        if( **OK clicked on the modal panel** ) {
		g_form.setValue('state', 3);
		//Call the UI Action and skip the 'onclick' function
		gsftSubmit(null, g_form.getFormElement(), 'close_sc_task');		
	}
}
//Code that runs without 'onclick'
//Ensure call to server-side function with no browser errors
if (typeof window == 'undefined')
   updateTask();

function updateTask(){
   current.state = 3;
   current.update();
}


UI Page: close_task (copy of glide_confirm_basic)
-----------------------------------------
<g:ui_form onsubmit="return invokeConfirmCallBack('ok');">
<table width="100%">
	<tr><td/><td/></tr>
        <g:evaluate jelly="true">
                var title = (jelly.RP.getWindowProperties().get('title') || '') + '';
                title =  new GlideStringUtil().unEscapeHTML(title);
                var warning = (jelly.RP.getWindowProperties().get('warning') || '') + '';
                warning =  new GlideStringUtil().unEscapeHTML(warning);
        </g:evaluate>
	
        <j:if test = "${warning == 'true'}">
           <tr><td>
           <div style="margin-top: 6px; color: tomato; font-size:larger;text-align:center;">
                <b>Warning</b>
           </div>
           </td>
           </tr>
        </j:if>

	<tr>
     	<td nowrap="true"><g:no_escape>${title}</g:no_escape></td>	
	</tr>
        <tr><td/><td/></tr>
        <tr>
            <td colspan="2" align="right">
                <g:dialog_buttons_ok_cancel 
                   ok="invokePromptCallBack('ok');" 
                   ok_type="button" 
                   cancel="invokePromptCallBack('cancel')" 
                   cancel_type="button" />
            </td>
        </tr>	
</table>
</g:ui_form>

ericgilmore · ‎10-13-2022

Ok, here's the answer I found. First there are a set of GlideModal windows that come with ServiceNow, as shown at this site with examples. I used the glide_confirm_standard as my base for another on sc_req_item, BUT sc_task seemed to like this better.

UI Action : Close Task
Table : sc_task
Action name : close_sc_task
Onclick : closeTask()
Script
--------------
function closeTask() {
	var confirm = new GlideModal('close_task');
	confirm.setTitle('You are about to close a Task');
	confirm.setPreference("onPromptComplete", "ok");
	confirm.setPreference("onPromptCancel", "cancel");
	confirm.render();
}

//Code that runs without 'onclick'
//Ensure call to server-side function with no browser errors
if (typeof window == 'undefined')
    updateTask();

function updateTask() {
    current.state = 3;
    current.update();
}
-----------------------------------------------------------------------

UI Page : close_task
HTML
-------------------------------------------------------------------------
<g:ui_form onsubmit="return invokeConfirmCallBack('ok');">
<table border="0" width="100%">
	<tr><td/>
		<h2 style="color:red; font-weight:bold; text-align:center;">Are you sure you want to close this task as 'Complete'?</h2>
		<p style="font-weight:bold; text-align:center; font-size: larger;">Once closed it can not be reopened</p>
		<div  style="text-align:center;">To close the window instead, click Cancel, then navigate BACK</div>
	<td/></tr>
        <g:evaluate jelly="true">
                var title = (jelly.RP.getWindowProperties().get('title') || '') + '';
                title =  new GlideStringUtil().unEscapeHTML(title);
                var warning = (jelly.RP.getWindowProperties().get('warning') || '') + '';
                warning =  new GlideStringUtil().unEscapeHTML(warning);
        </g:evaluate>
	
        <j:if test = "${warning == 'true'}">
           <tr>
			   <td>
				   <div style="margin-top: 6px; color: tomato; font-size:larger;text-align:center;">
					   <b>Warning</b>
				   </div>
			   </td>
           </tr>
        </j:if>

	<tr>
     	<td nowrap="true"><g:no_escape>${title}</g:no_escape></td>	
	</tr>
        <tr><td/><td/></tr>
        <tr>
            <td  style="padding: 10px;" colspan="2" align="right">
                <g:dialog_buttons_ok_cancel 
                   ok="invokePromptCallBack('ok');" 
                   ok_type="button" 
                   cancel="invokePromptCallBack('cancel')" 
                   cancel_type="button" />
            </td>
        </tr>	
</table>
</g:ui_form>
--------------------
Client script
---------------------------------------------------------------------------------
function invokePromptCallBack(type) {
    var gdw = GlideDialogWindow.get();
    if (type == 'ok') {
       var f = gdw.getPreference('onPromptComplete');
		gsftSubmit(null, g_form.getFormElement(), 'close_sc_task');
	}
    else
       var f = gdw.getPreference('onPromptCancel');
    if (typeof(f) == 'function') {
        try {
            f.call(gdw, gdw.getPreference('oldValue'));
        } catch(e) {
        }
    }
    gdw.destroy();
    return false;
}
----------------------------------------------------------------------

As always, your mileage may vary.

ref. GlideModal usage and examples (davidmac.pro)

View solution in original post

rachanar · ‎06-05-2023

very helpful. Genuinely appreciate it!