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

Yes, please follow the link below:

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1005843

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

servicenow14710 · ‎05-11-2023

@Prince Arora : Thanks prince for the solution provided.

So i made it client side in the same UI A ction clicking on client checkbox and adding gsftSubmit(null, g_form.getFormElement(), "ui action id"). And adding popup

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

But it is not working. Anything i messed here.Apprecaite for your time so much. Thanks

Prince Arora · ‎05-11-2023

@servicenow14710

Have you mentioned the name of the function in onclick field of ui action?

i am sure that it has been missed out

please enclose the confirm box in a function and kention the name in onclick

servicenow14710 · ‎05-11-2023

@Prince Arora :Yes i mentioned thefunction name ---revertToNew

My script is

function revertToNew(){

var answer = confirm(" do you want to revert?");

if (answer==true)

{

gsftSubmit(null, g_form.getFormElement(), 'revert_to_New');

}

else

{

return false;

}

if(typeof window == 'undefined')

{

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 :

Aaction name:revert_to_New

Onclick: revertToNew()

When i click on revert to new button the popup is coming(OOB) , but wheni clicked on ok the code to revert is not working .

On clicking on ok-- this code should work

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')]));
}