How to cancel previous ui page after clicking ui action

Debarpita Basak · ‎04-12-2021

Hi All,

I want to cancel previous ui page after click ui action button it will reload fresh ui page and will cancel the other page which is loaded

full scenerio:

Please Help me i click one ui button(Send_deb) it will display 1st ui page then in first ui page if i click one button it will call the 2nd ui page then in 2nd ui page if i click one button(Deb) it will call the the same ui button which display the 1st page but cancel previous displayed 1st page and 2nd page . @ankurbiswas

AnirudhKumar · ‎04-13-2021

If you are calling your ui page with a GlideDialogWindow, then use the below in the client script function that gets called when the button is clicked:

GlideDialogWindow.get().destroy(); //Closes the dialog window

Long live ServiceNow!

Debarpita Basak · ‎04-14-2021

Hi Anirudh , It is not working because it is not staying on that it is page it is going to another page.

Kindly help me

In ui page:

html part:

client script part:

function deb(){
gsftSubmit(null, g_form.getFormElement(), 'click_send');
GlideDialogWindow.get().destroy();

}

click_send is the action name of send_deb ui action button

AnirudhKumar · ‎04-14-2021

In my opinion, having a popup over another popup should be avoided - Call it UI Best Practice 🙂

I propose 2 solutions :

First solution - When the button on the first popup is clicked, close the current popup and open the second. When button in second popup is clicked, close the popup

Function in UI Action:

function openPop1() {
    var gDialog1 = new GlideDialogWindow('pop1');
    gDialog1.setTitle('Transport Request');
    gDialog1.setSize(700, 700);
    gDialog1.render();

}

UI Page 1 - Name : pop1

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">

	<button class="btn tn-primary" onclick="showPop2()" >Show pop2</button>
	
</j:jelly>

Client Script

function showPop2()
{
    GlideDialogWindow.get().destroy();
	
    var gDialog1 = new GlideDialogWindow('pop2');
    gDialog1.setSize(700, 700);
    gDialog1.render();
}

UI Page 2 - Name : pop2

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">

	<button class="btn tn-primary" onclick="closeAll()" >Close All</button>
	
</j:jelly>

Client Script

function closeAll()
{
	GlideDialogWindow.get().destroy();
}

Second solution - In this both your popups remain on screen, but when the button on the second popup is clicked, the screen refreshes so both popups go away

For this just make 2 changes : Remove GlideDialogWindow.get().destroy() in first UI Page client script, and add location.reload(); in the second UI Page client script.

I do not know what it is that you want to do with the popups. If you could show me the big picture, I can give you the solution quicker than what it takes for Maggi to cook.

Debarpita Basak · ‎04-15-2021

Hi Anirudh,

Please Help me i click one ui button(Send_deb) it will display 1st ui page then in first ui page if i click one button(2nd page) it will call the 2nd ui page then in 2nd ui page if i click one button(Submit) it will click the the same ui button(Send_deb) again which display the 1st page but cancel previous displayed 1st page and 2nd page that means i am calling the ui action twice and second time when i am calling ui action Send_deb It will call and display the first page

Code for Ui action Send_deb :

Name

Table

Requested Item [sc_req_item]

Order

Action name

Active

Show insert

Show update

Client

List v2 Compatible

script :

function clicksend() {

var dialog = new GlideDialogWindow("sch");
dialog.setTitle("1st_page");
//dialog.removeCloseDecoration();//ruchi.g.kumari_121142020 : added to remove x icon from top right corner of the ui page
dialog.setSize(750, 300);
dialog.render();
}
gs.addInfoMessage("Test_Send_email_by_Deb");

1st ui page:

html part:

<form>
<div>
<label for="site-search">Search the word:</label>
<input type="search" id="mySearch" name="q"
placeholder="Search the site..." size="30"/>
<button type="button" onclick="searches()">Search</button>
<button type="button" onclick="ruchi()">2nd page</button>
<button type="button" onclick="cancel()">Cancel</button>
</div>
</form>

client script part:

function searches(){

var short_text = g_form.getValue('mySearch');
var sita = g_form.getValue('short_description');

var ram = sita.search(short_text) > -1;

var regExp = new RegExp(short_text, "gi");
var x = (sita.match(regExp) || []).length;

var s1=sita.toString();
var regExp = new RegExp(short_text, "gi");
var s2 = s1.replace(regExp,'*');
alert("All replaced. The count "+ ' '+(x));
g_form.setValue("short_description",s2);;

GlideDialogWindow.get().destroy();
return false;

}

function ruchi(){
var dialog = new GlideDialogWindow('search');
dialog.setTitle("2nd");
dialog.setWidth(400,230);
dialog.render();

}

function cancel(){
//Close the dialog window
GlideDialogWindow.get().destroy();
return false;
}

--------------------------------------------------------------------------------

2nd ui page:

html part:

<form>
<div>

<label for="site-search"><h2>Search the word :<span style ="padding-left:10px;"></span></h2></label>
<input id="mySearch"
placeholder="Search the word..." size="50" />

<g:evaluate var="jvar_num"

expression="RP.getWindowProperties().get('num')" />

<h4><button type="button" onclick="searchReplace()">Search</button>

<button type="button" onclick="deb()">submit</button>

<button type="button" onclick="cancel()">Cancel</button></h4>

</div>
</form>

client script part:

function searchReplace()
{
var stext = g_form.getValue('mySearch');
var numb = g_form.getValue('number');
alert("Number " + (numb));
alert("Text " + (stext));
var ga = new GlideAjax('ParentChildSync');
ga.addParam('sysparm_name','scrubText');
ga.addParam('sysparm_number',numb);
ga.addParam('sysparm_stext',stext);
ga.getXML(callback);

}

function callback(response) {

var answer = response.responseXML.documentElement.getAttribute("updcount");
alert("Replaced count " + (answer));
GlideDialogWindow.get().destroy();
return false;

}

function cancel(){
//Close the dialog window
GlideDialogWindow.get().destroy();
//return false;
}

function deb(){
gsftSubmit(null, g_form.getFormElement(), 'click_send');// it will click ui action Send_deb button
}

Last part remaining to complete : by clicking submit button it will click the ui action button Send_deb and load the 1st page freshly