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

Can you share your UI action please (make sure UI action should be client side);

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

servicenow14710 · ‎05-11-2023

@Prince Arora : This is OOB UI Action Revert to new on change request. It is not client side.

revertToNew(current);
action.setRedirectURL(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')]));
}

servicenow14710 · ‎05-11-2023

@Prince Arora :

Here i added your code.

var answer = confirm(" do you want to revert?");
if (answer){
//need to do revert action
}

Prince Arora · ‎05-11-2023

@servicenow14710

UI action you have shown is of server side, we need client side UI action to perform the same as we need to take inputs from the user ok/cancel

As you have mentioned UI action is OOB, is there a chance you can change it to Client side and by using gsftSubmit(null, g_form.getFormElement(), "ui action id"), you can perform both the operations.

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

servicenow14710 · ‎05-11-2023

@Prince Arora : So i need to change this to both server and client side?

by using gsftSubmit(null, g_form.getFormElement(), "ui action id").