UI Action pop up

[servicenow14710]

How to create a simple poup window on change request uiaction button lets say the button is Revert to New,

Popup says do you want to revert . options shows yes or no

Any suggestions.Thanks

[Karan Chhabra6 · Accepted solution]

Hi @servicenow14710 ,

Since, 'revert to new' is an OOB ui action, you can make some changes to it in order to display the dialog box before updating the record. You need to create a new UI page and make some changes in the existing UI action,

Please follow these steps:

Step 1: Modify the OOB UI action (select the form button and client checkbox), specify an action name and onclick function, action name here is 'revert_state' and onclick function is revertNew()

Step 2: Paste this script in the script section of the ui action

function revertNew() {

    var dialog = new GlideDialogWindow("confirm_revert");
	dialog.setTitle('Confirmation');
    dialog.render(); 
}

if (typeof window == 'undefined') {
    revertToNew(current);
}

function revertToNew(changeRequestGr) {
	var changeRequest = new ChangeRequest(changeRequestGr);
	if (!changeRequest.revertToNew())
		gs.addErrorMessage(gs.getMessage('State Model for {0} changes does not allow reverting change from {1} state', [changeRequest.getValue('type'), changeRequest.getDisplayValue('state')]));
		action.setRedirectURL(current);
}

Step 3: Create a new UI page, name it as 'confirm_revert' or you can change the name according to your choice, make sure to change it in the ui action script as well if you're changing the name

Step 4: Paste this script in the HTML section of the UI page

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} 
</style>
<table style="height:100px">
<tr style="width:100px;"><h3>Do you want to revert?</h3></tr>
<tr>
<td >
<input type="button" class="button button1" onclick="clickedYes()" value="Yes"/>
</td>
<td >
<input type="button" class="button button1" onclick="clickedNo()" value="No"/>
</td>
</tr>
</table>
</j:jelly>

Step 5: Paste this script in the client script section of the UI page

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

function clickedYes() {
    gsftSubmit(gel('revert_state'));

}

Step 6: Validate

If the user clicks 'No' - popup would go away and nothing happens

If the user clicks 'Yes' - page reloads and state changes to 'New'

If my answer has helped with your question, please mark it as correct and helpful

Thanks,

Karan

[servicenow14710]

@Karan Chhabra6 : Thanks much for detailed solution. Appreciate your time. It worked exactly what i asked for. Thanks again.