Create a popup window for UI Action button to close similar tasks with matching Short Description

Nishant26
Tera Contributor

Hi All,

 

I have a requirement where I need to provide a "prompt"/"Popup" Window when the user closes the order task through UI Action Button on the form, below are the requirements details.

 

1. If there are multiple Order Tasks with same "short description" associated with a Customer Order, when the user close complete one of those tasks, then I need to display the following options to the user.

a. Close All Similar Order Tasks

b. Close This One Order Tasks

c. Cancel

 

1(a) If the user selects "close all similar Order Tasks" THEN it should close all similar Order Tasks.

 

1(b) If the user selects “Close Just This Order Task” then it should close only that task.

 

1(c) If the user selects “Cancel” THEN remove the display and take the user back to how the screen previously was.

 

Please let me know how to proceed further.

 

Thanks!

13 REPLIES 13

AnveshKumar M
Tera Sage
Tera Sage

Hi @Nishant26 ,

Try going through the following article, if you couldn't arrive at solution let me know, I'll try to provide you with the custom solution.

 

https://www.servicenow.com/community/now-platform-articles/custom-glide-modal-dialog-boxes/ta-p/2321...

 

Please mark my answer helpful and accept as solution if it helped you 👍

Thanks,
Anvesh

Hi Anvesh, I would require a custom solution for this implementation. Here are some details for your reference.

 

table: Order task(u_abc) for UI Action button

Parent field: u_parent on table(u_abc)

when the state of "Order Task" changes to Close Complete/Close Cancelled, then User will click on the UI button to close the Order task. Now, at the same time, a popup window should appear which will have three options:

 

1. Close this Order task only

2. Close this Order task as well as all other similar Order tasks

criteria-- all other Order Tasks and current Order task should have same Short description and other Order tasks/current Order task must be associated with the same Parent order.

3. Cancel

 

Can you please help with the custom solution by providing the code.

 

Thanks.

Hi @Nishant26 ,

You need to create an UI Action, UI Page and Script Include.

 

  1. In UI Action, select the table name as per your requirement, currently I selected for Global.
  2. In Client Callable Script Include change the table names and field names and state values as per your requirement

 

 

 

1. Client Callable Script Include:

 

var CloseOrderTaskUtils = Class.create();
CloseOrderTaskUtils.prototype = Object.extendsObject(AbstractAjaxProcessor, {

	closeOrderTask: function(){
		var sys_id = this.getParameter('sysparm_sys_id');
		var otGr = new GlideRecord('u_abc');
		if(otGr.get(sys_id)){
			otGr.setValue('YOUR_STATE_FIELD_NAME', 'STATE_FIELD_VALUE_FOR_CLOSE'); // Chnage values accordingly
			otgr.update();
			return 'true';
		}
	},

	closeAllOrderTasks: function(){
		var sys_id = this.getParameter('sysparm_sys_id');
		var otGr = new GlideRecord('u_abc');
		if(otGr.get(sys_id)){
			var short_desc = otGr.getValue('short_description') + '';
			var parent = otGr.getValue('u_parent');
			var otGr2 = new GlideRecord('u_abc');
			otGr2.addQuery('short_description',short_desc);
			otGr2.addQuery('u_parent',parent);
			otGr2.query();
			while(otGr2._next()){
				otGr2.setValue('YOUR_STATE_FIELD_NAME', 'STATE_FIELD_VALUE_FOR_CLOSE'); // Chnage values accordingly
				otgr2.update();
			}
			return 'true';
		}
	},

    type: 'CloseOrderTaskUtils'
});

AnveshKumarM_0-1696428346452.png

 

2. UI Page:

HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<div style="text-align:left;">
		<br/>
		<j:set var="jvar_ot_sys_id" value="${sysparm_order_task_id}"/>
		<div style="margin-top: 0px; color:tomato; font-weight:bold; text-align:center; font-size: larger;">
							${gs.getMessage('Alert!')}
						</div>
						<div>${gs.getMessage('Would you like to close similar order tasks under this order?')}</div>
		<br/>
		<div align="right" class="modal-footer">
			<g:dialog_button 
			id="order_task_close_all_btn" 
			type="submit" 
			onclick="closeAll()"
			style="width: 8em;">${gs.getMessage("Close all")}</g:dialog_button>

			<g:dialog_button 
			id="order_task_close_btn" 
			type="submit" 
			onclick="close()"
			style_class="btn btn-success"
			style="width: 8em;">${gs.getMessage("Close")}</g:dialog_button>

			<g:dialog_button 
			id="order_task_cancel_btn" 
			type="submit" 
			onclick="cancel()"
			style_class="btn btn-danger"
			style="width: 8em;">${gs.getMessage("Cancel")}</g:dialog_button>
		</div>
	</div>
	<script>
		document.getElementById("ok_button").focus();
	</script>
</j:jelly>

 

Client Script:

function close() {
    var ajaxHelper = new GlideAjax('CloseOrderTaskUtils');
    ajaxHelper.addParam('sysparm_name', 'closeOrderTask');
    ajaxHelper.addParam('sysparm_sys_id', '${JS:sysparm_order_task_id}');    
    ajaxHelper.getXMLAnswer(closeDialog);
}

function closeAll() {
    var ajaxHelper = new GlideAjax('CloseOrderTaskUtils');
    ajaxHelper.addParam('sysparm_name', 'closeAllOrderTasks');
    ajaxHelper.addParam('sysparm_sys_id', '${JS:sysparm_order_task_id}');    
    ajaxHelper.getXMLAnswer(closeDialog);
}

function cancel() {
    GlideDialogWindow.get().destroy();
    return false;
}

function closeDialog(answer){
	GlideDialogWindow.get().destroy();
    return false;
}


AnveshKumarM_1-1696428451740.png

 

3. UI Action:

 

function confirmCloseAll() {
    var sys_id_ot = g_form.getUniqueValue();
	var dialogClass = GlideDialogWindow;
    dlg = new dialogClass('order_task_close_confirm_form');
    dlg.setTitle(new GwtMessage().getMessage('Confirmation'));
    dlg.setWidth(450);
    dlg.setPreference('sysparm_order_task_id', sys_id_ot);
    dlg.setPreference('sysparm_parent_form', this);
    dlg.setPreference('dialogTrap', true);
    dlg.render();
}

AnveshKumarM_2-1696428502454.png

 

AnveshKumarM_3-1696428516989.png

 

Final Result:

 

AnveshKumarM_4-1696428629756.png

 

 

Thanks,
Anvesh

Hi Anvesh, 

 

thanks for the response!

 

I tried the above solution, but after clicking the UI Action button, it keeps on loading and not picking up. Looks like issue is with the UI page rendering. 

 

 I am attaching a link for a similar issue, can you please take a look and provide me a workaround for this.

 

https://www.servicenow.com/community/developer-forum/issue-with-ui-page-angularjs-and-glidedialogwin...

 

 

Thanks.