How to create a popup dialog box on a UI Action and populate a field

[mkader]

Hello,

I have a "Reject" UI Action that I need to display a pop-up for with a comment box. They need to write the reason for the rejection. After they click ok, the rejected comment populates a reason field on the form. 

How can I set this up.

I am struggling to follow the example provided by SN Guru:

https://www.servicenowguru.com/system-ui/glidedialogwindow-advanced-popups-ui-pages/

Thanks!

[mkader]

@Kieran Anson - thanks for pointing this out. It definitely looks a lot cleaner and is exactly what I was looking for to implement! Huge Help!!!

[Kieran Anson]

Glad it's working 😄

[mkader]

@Kieran Anson - This is working in my PDI, but it not working in my DEV instance. When I click the UI Action, I quickly see my field being populate, but it does not save the change and then leaves the page 

[Kieran Anson]

Can you post the contents of that URL that's inside the box?

[mkader]

So I made a few modifications. I set the state as well. My issue now is the "State" is not setting. Text fields work no problem. The state temporarily changes, but on the reload of the form, the state field reverts back to original:

Here is what I have:

UI Action:

var rejectConfirmDialog;

function loadConfirmDialog() {
    var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
    rejectConfirmDialog = new dialogClass("incident_confirm_cancel", false, 648, 250);
    rejectConfirmDialog.setTitle(new GwtMessage().getMessage("Reason"));
    rejectConfirmDialog.render();
}

function moveToCancel(notes) {
    g_form.setValue("state", 7);
    g_form.setValue("u_reason", notes);
    rejectConfirmDialog.destroy();
    gsftSubmit(null, g_form.getFormElement(), "reject_incident");

}

if (typeof window == 'undefined')
    setRedirect();

function setRedirect() {
    current.update();
    action.setRedirectURL(current);
}

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:dialog_notes_ok_cancel
		dialog_id="incident_confirm_cancel"
		textarea_id="incident_confirm_reason_text"
		textarea_label="${gs.getMessage('Reason')}"
		textarea_label_title="${gs.getMessage('A reason is required to cancel this incident')}"
		textarea_name="incident_confirm_reason_text"
		textarea_onkeyup="enableButton()"
		textarea_onchange="enableButton()"
		textarea_style="height:auto; width: 100%; resize: vertical;"
		textarea_title="${gs.getMessage('Enter the reason here')}"
		ok=""
		ok_action="cancelincident"
		ok_id="incident"
		ok_title="${gs.getMessage('Cancel incident')}"
		ok_type="button"
		ok_style_class="btn btn-primary disabled"
		incident_title="${gs.getMessage('Close the dialog')}"
	/>
</j:jelly>

Client Script:

function cancelincident() {
	var textArea = $("incident_confirm_reason_text");
	if (textArea)
		moveToCancel(textArea.value.trim());
}

(function() {
	$("incident_confirm_reason_text").focus();
})();