UI Action pop up

servicenow14710 · ‎05-11-2023

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 · ‎05-11-2023

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

View solution in original post

Prince Arora · ‎05-11-2023

@servicenow14710

Please use the confirm box for your requirement & mention the script as below:

var answer = confirm(" do you want to revert?");
if (answer){
//perform your operations here.
}

If my answer solved your issue, please mark my answer as ✅Correct & 👍Helpful based on the Impact.

servicenow14710 · ‎05-11-2023

@Prince Arora :Thanks for the reply. Are those options ok and cancel customisable?

I need options , Yes No

Prince Arora · ‎05-11-2023

@servicenow14710

The confirm box is given/handled by the javascript OOB we can't change it.

If you want to make a customizable confirm box, you can achieve it using GlideModal + UI page (its little bit complex)

If my answer solved your issue, please mark my answer as ✅Correct & 👍Helpful based on the Impact.

servicenow14710 · ‎05-11-2023

I tried this code in UIAction Script it is not shoiwng any window. Am i missing something here?

var answer = confirm(" do you want to revert?");
if (answer){
//perform your operations here.
}

@Prince Arora :Thanks for the update