Using UI Action with GlideModal

[ericgilmore]

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>

[AnirudhKumar]

The g:dialog_buttons_ok_cancel tag uses the ok and cancel as attributes to call the invokePromptCallBack function.

It should be in the client script portion.

And it should have an argument, in the format invokePromptCallBack(<<something here>>)

like invokePromptCallBack(selectedValue)

Just alert selectedValue inside the invokePromptCallBack function. You should be able to see which button user clicked.

[ericgilmore]

Yes, it is part of the UI Page.

UI Page : close_task : Client script section
-------------------------------------------------
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;
}

So are you suggesting something like this?

function invokePromptCallBack(type) {
    var gdw = GlideDialogWindow.get();
    if (type == 'ok')
       var f = gdw.getPreference('onPromptComplete');

        /** ========== FROM THE UI ACTION =========== **/
       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;
}

Or is there another method to get the button click value from the UI Action to the UI Page or am I thinking incorrectly about this?

[ericgilmore]

What I added above seems to be working as expected.
I decided to try the same thing on RITM's | sc_req_item, BUT it doesn't work. Same code.

Anyone ever run into this?
Why would this work on sc_task but not sc_req_item?

[ericgilmore · Accepted solution]

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)