Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Cancel Incident UI Action with Confirmation Dialog Not Saving State

Sandeep8987
Tera Contributor

Hello Community,

I’ve created a UI Action and a UI Page to cancel an incident after user confirmation. The requirement are:

  • Validate that Additional comments are filled before canceling.
  • Show a confirmation dialog (Yes/No).
  • If user clicks Yes, set incident_state and state to Canceled  and save the record.
  • If user clicks No, close the dialog without changes
    I have created an UI Page for that.
    Here’s what I have so far:
    for UI action :
     

 

function confirmAndCancel() {
    //Ensure comments are filled
    var comments = g_form.getValue("comments");
    if (!comments) {
        alert('The "Additional comments" field must be filled in before the transtitioning to Canceled');
        return false;
    }

    var dialog = new GlideDialogWindow("incident_confirm_cancel"); // UI Page name
    //alert('tesst');
    dialog.setTitle("Cancel Incident?");
    dialog.setPreference('sys_id', g_form.getUniqueValue());
    dialog.setPreference("callback", function(result) {
        alert("Callback:" + result);
        if (result === "yes") {

            alert('User selected YES');
			g_form.setValue('incident_state','8');
			g_form.setValue('state','8');
			//g_form.save();
			// g_form.submit("cancel_incident");

          gsftSubmit(null, g_form.getFormElement(), "cancel_incident");


        }
        if (result === "no") {
            alert('User selected No');

            return false;
        }
    });
    dialog.render();
    return false;
}

 



For 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:center; padding: 20px;">
        <h3>${gs.getMessage('Cancel Incident?')}</h3>
        <p>${gs.getMessage('Are you sure you want to cancel this incident?')}</p>
		 <button class="btn btn-danger" style="margin-right: 15px;" onclick="sendResponse('yes');"> ${gs. getMessage( 'Yes')}</button>
		  <button class="btn btn-default" onclick="sendResponse('no');"> ${gs. getMessage( 'No')}</button>
    </div>
	


</j:jelly>​

 


Client script:
 

 

function sendResponse(answer){
	var gdw = GlideDialogWindow.get();
	gdw.destroy();

var callback = gdw.getPreference("callback");
if(callback && typeof callback ==="function"){
	callback(answer);
}
}

 

Bhavya11  





1 REPLY 1

Anupam1
Mega Guru

Hi @Sandeep8987 ,

 

The solution for your Cancel Incident requirement:-

UI Action (client + server), the UI Page (Jelly + client script),

 

1️. UI Action (Client-side script)

This is the button the user clicks. It validates Additional comments, opens the confirmation dialog, and handles the callback.

function confirmAndCancel() {

    // Ensure Additional comments are filled

    var comments = g_form.getValue("comments");

    if (!comments || comments.trim() === "") {

        alert('The "Additional comments" field must be filled in before transitioning to Canceled');

        return false;

    }

 

    // Open confirmation dialog (UI Page)

    var dialog = new GlideDialogWindow("incident_confirm_cancel"); // UI Page name

    dialog.setTitle("Cancel Incident?");

    dialog.setPreference('sys_id', g_form.getUniqueValue());

    dialog.setPreference("callback", function(result) {

        if (result === "yes") {

            // Set values and submit to server-side UI Action

            g_form.setValue('incident_state', '8'); // 8 = Canceled

            g_form.setValue('state', '8');

            gsftSubmit(null, g_form.getFormElement(), "cancel_incident");

        }

        if (result === "no") {

            // Do nothing, just close

            return false;

        }

    });

    dialog.render();

    return false;

}

 Important: In the UI Action record, set Action name = cancel_incident. That ties the client-side gsftSubmit to the server-side script.

 

2️.  UI Action (Server-side script)

This runs when the user confirms cancellation. It updates the record.

// Server-side script for UI Action "cancel_incident"

if (typeof current !== 'undefined') {

    current.state = 8;           // Canceled

    current.incident_state = 8;  // Canceled

    current.update();

}

 

3️.  UI Page (Jelly)

This is the confirmation dialog. It shows Yes/No buttons and calls back to the client.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">

 

    <div style="text-align:center; padding: 20px;">

        <h3>${gs.getMessage('Cancel Incident?')}</h3>

        <p>${gs.getMessage('Are you sure you want to cancel this incident?')}</p>

        <button class="btn btn-danger" style="margin-right: 15px;" onclick="sendResponse('yes');">

            ${gs.getMessage('Yes')}

        </button>

        <button class="btn btn-default" onclick="sendResponse('no');">

            ${gs.getMessage('No')}

        </button>

    </div>

 

    <script>

    function sendResponse(answer){

        var gdw = GlideDialogWindow.get();

        gdw.destroy();

        var callback = gdw.getPreference("callback");

        if(callback && typeof callback === "function"){

            callback(answer);

        }

    }

    </script>

</j:jelly>

 

4️.  End-to-End Flow

  1. User clicks Cancel Incident UI Action.
  2. Client script checks Additional comments.
    • If empty → alert, stop.
  3. If filled → open UI Page dialog.
  4. User clicks Yes → callback sets state values and submits via gsftSubmit.
  5. Server-side UI Action updates the record to Canceled.
  6. User clicks No → dialog closes, no changes.

 

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

 

Best,

Anupam.