Assistance with GlideDialogWindow/Pop-up with SC Task

kristenmkar
Mega Sage

Good evening all! 

 

I am currently trying to configure a pop-up window/prompt that displays when an ad hoc catalog task is created from RITM - the window would bring up the Assignment Group field so they can select the proper team to assign this new task to.  Here is what I have done so far:

- Created a UI action button on RITM that creates the SC task. It also sets a boolean field called "Ad Hoc Task" to true on the SC task form when the task is inserted. 

- I then created a UI page called "Assignment_Group_Prompt" with the following 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">
<g:ui_form>
<table>
<tr>
<td style="width:25%">
<g:form_label>
Select Assignment Group:
</g:form_label>
</td>
<td style="width:60%">
<g:ui_reference name="group_ref" id="group_ref" query="nameSTARTSWITHa" table="sys_user_group" />
</td>
</tr>
<tr>
<td>
<g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('Okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()"/>
</td>
</tr>
</table>
</g:ui_form>
</j:jelly>
 
And this as the UI Page Client Script:
function continueOK() {
alert("OK clicked");
var gdw = GlideDialogWindow.get();
var group = gel('group_ref').value;
var sys_id = gdw.getPreference('sys_id'); //get the values passed in the client script
var selected_value = gdw.getPreference('value'); //get the values passed in the client script
alert(group+"---"+selected_value);
GlideDialogWindow.get().destroy();
}
function continueCancel() {
alert("Cancel clicked");
GlideDialogWindow.get().destroy();
}
 
Finally, I created a client script to call the window.  Right now I have it as an OnLoad Script on the SC Catalog Task Table:
function onLoad() {

var adHoc = g_form.getValue('u_ad_hoc_task');
var group = g_form.getValue('assignment_group');

if (adHoc == true && group == '') {

//Create a GlideDialogWindow object
var dialog = new GlideDialogWindow('Assignment_Group_Prompt'); // UI Page name
dialog.setTitle('Select Task Team'); //Set the dialog title
dialog.setSize(650, 600); //Set the dialog size
dialog.setPreference('sys_id', g_form.getUniqueValue()); //pass current object id
dialog.setPreference('value', newValue); //pass the selected value on the form
dialog.render(); //Open the dialog
}
}
 
For reference, here is my UI Action.  It works fine and brings up the sc task form once it's created, but I can't get the dialog box to pop-up after.  Wondering if my logic is completely off- I thought I could get the Client script to trigger when the sc Task was created, and only run if the AdHoc task was checked true and if the Assignment Group was empty.  I can't seem to get it to work/popup after the task is created and the user is directed to the task form.  Is my UI page completely off? Or is the whole thing completely off?
UI action:
{
var task = new GlideRecord("sc_task");

task.initialize();

task.request_item = current.sys_id;
task.setValue('short_description', current.getValue('short_description'));
task.setValue('description', current.getValue('description'));
task.setValue('u_ad_hoc_task',true);
var sysid = task.insert();

var url = "/sc_task.do?sys_id=" + sysid;


action.setRedirectURL(url);
}
 
Thanks so much for any advice! It is very appreciated! 🙂 
1 ACCEPTED SOLUTION

Here is how I would do it...

 

UI Action (just the basics listed here):

Action name = u_acme_create_ad_hoc_task

Form button = checked

Show update = checked

Client = checked

Onclick = uAcmeConfirmAdHocTask();

Script

function uAcmeConfirmAdHocTask() {
    //are there unsaved values?
    if (g_form.modified) {
        //the form data has been modified but not saved yet so warn the user
        var modalWindow = new GlideModal("glide_confirm_standard"); //SN OOTB confirm dialog
        modalWindow.setTitle("Create Ad Hoc Task");
        modalWindow.setBackdropStatic(true); //remain open when user clicks outside of the window
        modalWindow.setWidth(600);
        modalWindow.setPreference("warning", true);
        modalWindow.setPreference("title", "There are unsaved changes.  Do you wish to proceed?");
        modalWindow.setPreference("onPromptComplete", uAcmeCreateAdHocTask);
        //show the popup window for confirmation
        modalWindow.render();

        return;
    }

    //calling it from a function so the confirm dialog above can use the same code
    uAcmeCreateAdHocTask();

    function uAcmeCreateAdHocTask() {
        //get the sys_id of the current record
        var sysId = g_form.getUniqueValue();

        var createTaskWindow = new GlideModal("u_acme_create_ad_hoc_task");  //UI Page to select Assignment Group
        createTaskWindow.setTitle("Create Ad Hoc Task");
        createTaskWindow.setBackdropStatic(true); //remain open when user clicks outside of the window
        createTaskWindow.setWidth(600);
        createTaskWindow.setPreference("sysparm_sys_id", sysId);
		createTaskWindow.setPreference("sysparm_short_description", g_form.getValue("short_description"));
		createTaskWindow.setPreference("sysparm_description", g_form.getValue("description"));
        //show the popup window
        createTaskWindow.render();
    }
}

 

 

UI Page

HTML

<g:ui_form>
	<!-- the details of the Requested Item -->
	<input type="hidden" aria-hidden="true" name = "item_sys_id" value = "$[sysparm_sys_id]"/>
	<input type="hidden" aria-hidden="true" name = "item_short_description" value = "$[sysparm_short_description]"/>
	<input type="hidden" aria-hidden="true" name = "item_description" value = "$[sysparm_description]"/>

	<!-- the missing mandatory fields error message text -->
	<g2:evaluate jelly="true" object="true">
		var mandatory_msg = "The following mandatory fields are not filled in:";
	</g2:evaluate>
	<input type="hidden" aria-hidden="true" id="mandatory_msg" name="mandatory_msg" value="$[HTML:mandatory_msg]" />

	<!-- mandatory fields error message -->
	<div style="display: none;" id="mandatory_error_msg_div" class="outputmsg_div" aria-live="polite" role="region" data-server-messages="false">
		<div id="output_messages" class="outputmsg_container">
			<button aria-label="Clear message" title="Clear message" id="close-messages-btn" class="btn btn-icon close icon-cross" onclick="uAcmeHideErrorMessage(); return false;" />
			<div class="outputmsg_div" aria-live="polite" role="region" data-server-messages="false">
				<div role="alert" class="outputmsg outputmsg_error notification notification-error">
					<span class="notification-icon icon-cross-circle">
						<span class="sr-only"></span>
					</span>
					<span id="mandatory_error_msg" class="outputmsg_text"></span>
				</div>
			</div>
		</div>
		<br/>
	</div>

	<!-- instructions -->
	<div>
		Select the Group to which the new task will be assigned.
	</div>

	<br/>

    <div class="form-horizontal">
		<!-- Group picker -->
		<div class="form-group is-required" id="group_picker_wrapper">
			<label class="col-sm-12 col-md-4 control-label" for="group_picker">
				<span mandatory="true" class="required-marker label_description"/>
				<span id="group_picker_label" title="Assignment Group">
					Assignment group
				</span>
			</label>
			<div class="col-sm-12 col-md-4 form-field input_controls">
				<div class="is-required" style="width:350px">
					<g2:ui_reference id="group_picker"
									 name="group_picker"
									 table="sys_user_group"
									 order_by="name"
									 show_popup="false"
									 completer="AJAXTableCompleter"
									 onchange="uAcmeFieldOnChange('group_picker')"/>
				</div>
			</div>
		</div>
	</div>

	<!-- action buttons -->
	<div class="modal-footer">
		<span class="pull-right">
			<g:dialog_buttons_ok_cancel ok="return uAcmeActionOk();"/>
		</span>
	</div>
</g:ui_form>

 

 

Client script

(function() {
    //script that runs onload of the page
    try {
        //remove focus from the "x" button
		document.activeElement.blur();

		//try to set focus to the Group picker
		document.getElementById("sys_display.group_picker").focus();

		//and set the mandatory field display
		uAcmeFieldOnChange("group_picker");

	} catch (err) {}
})();


function uAcmeFieldOnChange(fieldName) {
	var field = $(fieldName);
	var wrapper = $(fieldName + "_wrapper");

	if (!field.value.trim()) {
		wrapper.removeClassName('is-filled');
	} else {
		wrapper.addClassName('is-filled');
	}
}


function uAcmeHideErrorMessage() {
	try {
		document.getElementById("mandatory_error_msg_div").style.display = "none";
	} catch(err) {}
}


function uAcmeActionOk() {
	var result = true;
	var missingData = [];

	//verify the mandatory fields have been filled in
    try {
		gelObject = gel("group_picker");
		if (gelObject.value.trim() == "") {
			result = false;
			missingData.push(document.getElementById("group_picker_label").innerHTML);
		}
	} catch (err) {
        return false;
	}

	if (!result) {
		document.getElementById("mandatory_error_msg").innerHTML = gel("mandatory_msg").value + " " + missingData.join(", ");
		document.getElementById("mandatory_error_msg_div").style.display = "block";
	}

	return result;
}

 

 

Processing script

(function() {
    //run on the server to create the new Catalog Task
    var requestedItemId = typeof item_sys_id !== "undefined" ? item_sys_id : "";
	var shortDescription = typeof item_short_description !== "undefined" ? item_short_description : "";
	var description = typeof item_description !== "undefined" ? item_description : "";
    var groupId = typeof group_picker !== "undefined" ? group_picker : "";

    //add the Role to the selected Modules
	if (groupId) {
		var catalogTask = new GlideRecord("sc_task");
		catalogTask.newRecord();  //initialize the new record with default values
		catalogTask.setValue("request_item", requestedItemId);
		catalogTask.setValue("u_ad_hoc_task", true);
		catalogTask.setValue("assignment_group", groupId);
		catalogTask.setValue("short_description", shortDescription);
		catalogTask.setValue("description", description);
		if (catalogTask.insert()) {
			//redirect to the new task
			response.sendRedirect(catalogTask.getLink());
		} else {
			//back to the Requested Item
			gs.addErrorMessage("Could not create a new Catalog Task");
			var urlOnStack = GlideSession.get().getStack().bottom();
			response.sendRedirect(urlOnStack);
		}
	}
	
})();

 

 

It might seem complicated but I've got several templates that I used based on what I need so it's mostly copy/paste and tweak once you have it.

 

The end result looks like this:

 

If there are changes on the form...

JimCoyne_0-1738547550650.png

 

If there are none, or the user selected "OK" to continue...

JimCoyne_1-1738547619499.png

 

Mandatory fields are enforced

JimCoyne_2-1738547671456.png

 

And the user is redirected to the new record after clicking "OK".  There could be some extra tweaking for your needs like setting the condition or Role that can see the UI Action and the UI Page should have an ACL or two on it.

 

 

View solution in original post

8 REPLIES 8

Ankur Bawiskar
Tera Patron
Tera Patron

@kristenmkar 

the onload checks if the flag=true and group is empty

the new task you are creating has the flag as true, is the group field also empty?

If yes then onload should show the popup

Also in UI page you are getting the group, but not doing anything with it

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Jim Coyne
Kilo Patron

A better way/UX to do it would be to have the UI Action popup the window, have the user select the Group and then create the SC Task on confirmation.  Can forward to the newly created record from there.  And confirm that there are no updated fields. You could save the current record automatically or ask/warn the user.

BrawnS
Giga Contributor

I totally agree with your suggestion! Having the UI action pop up the window and letting the user select the group before creating the SC task sounds like a smoother, more intuitive process. It would also streamline the workflow by allowing users to confirm and check for updated fields before moving forward. The automatic save or a prompt to warn the user would definitely add a layer of efficiency while keeping things flexible. Great idea! 

Thanks.  It's all about the UX.

 

Too many times people just think of getting the thing done.  One of the reasons developers are not the best people to design a solution.  And I'm saying this as a developer  🤓