Refresh ui page without reloading it.

Nikita9 · ‎10-28-2020

Hi All,

I have a requirement where i need to give specified time to user to review the form. when user clicks on alert button then my ui page should refresh. So that i can get all default values that was there on that ui page and my timer can restart .

I am not getting any code to refresh ui page so that my ui page timer restarts with default values.

Pls help.

Regards,

Nikita

rahulpandey · ‎11-02-2020

Hi Nikita,

I have created a similar case and I could achieve it. Here is what I have done.

UI action

function openPage(){
		var dialog = new GlideDialogWindow('Test UI');

	dialog.setTitle(getMessage('Testing 123'));
	dialog.setPreference('label', 'Can you please choose an option?'); // This is the input for UI page, which would be default

	dialog.render();
}

UI page

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">
<g:ui_form>
	<!-- Get values from dialog preferences passed in -->
	<g2:evaluate var="jvar_label" expression="RP.getWindowProperties().get('label')" />
	<g2:evaluate var="jvar_optionName"  jelly="true" object="true" >

		var options =RP.getWindowProperties().get('optionName');
		options = options.split(",");
		var choiceArray = [];
			//<![CDATA[
		for(var i = 0; i<options.length; i++){
			choiceArray.push(options[i]);							 
		}
//]]>
	choiceArray;


	</g2:evaluate>
	<input id="label_id" type="HIDDEN" value="$[jvar_label]"/>
	<!-- Set up form fields and labels -->
	<table width="100%">
		<tr>
			<td>
				<g:ui_choice_input_field name="TestChoice" id="chooseOption" label="$[jvar_label]" mandatory="true">
					<option value="">${gs.getMessage('-- None --')}</option> 
					<option value="other">Other</option>
				</g:ui_choice_input_field>
			</td>
		</tr>
		<tr>
			<td colspan="2">
			</td>
		</tr>
		<tr id="dialog_buttons">
			<td colspan="2" align="right">
				<g:dialog_button_ok ok="return getChoices()" ok_type="button" />
			</td>
		</tr>
	</table>
</g:ui_form>
	<button onclick="reincarnate()">Cancel</button>
</j:jelly>

Client Script

function reincarnate(){
	var labelValue = document.getElementById("label_id").value;
	GlideDialogWindow.get().destroy();
	setTimeout(function(){ openPage(labelValue);}, 1000);
	
}
function openPage(value){
		var dialog = new GlideDialogWindow('Test UI');

	dialog.setTitle(getMessage('Testing 123'));
	dialog.setPreference('label', value);
	dialog.render();
}

In above example, I could destroy the GlideModal and recreate it.

In your case, You could create hidden input fields and store the values of parameters inside those hidden inputs.

Below are the inputs I see you are receiving in UI page

<j:set var="jvar_email" value="${JS:RP.getWindowProperties().get('email_ids')}" />
<j:set var="jvar_ccemail" value="${JS:RP.getWindowProperties().get('ccemail_ids')}" />
<j:set var="jvar_bccemail" value="${JS:RP.getWindowProperties().get('bccemail_ids')}" />
<j:set var="jvar_blacklist" value="${JS:RP.getWindowProperties().get('bclist_ids')}" />
<j:set var="jvar_sys_id" value="${JS:RP.getWindowProperties().get('sys_id')}" />
<j:set var="jvar_subject" value="${JS:RP.getWindowProperties().get('subject')}" />

Further on cancel, you can reopen the UI page by passing setpreferences from hidden fields.

Note : You need to use setTimeout and get value of hidden fields into variable before detroying the GlideModal.

View solution in original post

Pranav Bhagat · ‎10-28-2020

Can you share your UI Page code ,so that we can help.

Nikita9 · ‎10-28-2020

Hi Pranav,

this is the code i have used.

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">
<j:set var="jvar_email" value="${JS:RP.getWindowProperties().get('email_ids')}" />
<j:set var="jvar_ccemail" value="${JS:RP.getWindowProperties().get('ccemail_ids')}" />
<j:set var="jvar_bccemail" value="${JS:RP.getWindowProperties().get('bccemail_ids')}" />
<j:set var="jvar_blacklist" value="${JS:RP.getWindowProperties().get('bclist_ids')}" />
<j:set var="jvar_sys_id" value="${JS:RP.getWindowProperties().get('sys_id')}" />
<j:set var="jvar_subject" value="${JS:RP.getWindowProperties().get('subject')}" />

<g:evaluate jelly="true" object="true" var="jvar_initialTime">

var d1 = new Date();
var gdt = (d1.getTime()) ;
gdt;
</g:evaluate>

<input type="hidden" name="hiddenValue" id="hiddenValue" value="${jvar_initialTime}"/>

<style>
td, th {
padding: 6px;
}
#bpo_message{
position: absolute;
z-index: 1050;
left: 108px;
top: 0px;
visibility: visible;
width: 750px;
height: 300px;
}
</style>

<h2 style="text-align: center;"><span style="color: #000000;"><strong>$[SP]BPS Email Validation$[SP]</strong></span></h2>
<p style="text-align: left;"><span style="color: #000000;"> Please review the items below and check each box to indicate your consent that each item is valid and appropriate. Cancel if you need to return to the email and change any of these items.</span></p>

<div align="center">
<form id='emailForm'>
<table border="3px" cellspacing="2" cellpadding="0" id="emailIdList" style="width: 70%;">

<g:evaluate var="jvar_email_array" jelly='true'>
var emailIdArray = '${jvar_email}';
var array = emailIdArray.split(",");
var loopcount = 0;
var length = 0;
if(JSUtil.nil(emailIdArray))
length = 0;
else length = array.length;
array;
</g:evaluate>
<j:if test="${length > 0}">
<tr class="header">
<td style="width: 5%;"><input id='select_all' name='select_all' type='checkbox' onclick="allSelect()" /></td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Type")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Address")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Name")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Company")}</td>
</tr>

<j:while test="${loopcount < length}">
<g:evaluate>
var blackListedEmail = '${jvar_blacklist}';
var isBlackListed = 0;
var emailId = array[${loopcount++}];
var sysId = array[${loopcount-1}];
if(emailId.indexOf('@')==-1){
var userGR = new GlideRecord('sys_user');
if(userGR.get(emailId)){
sysId =userGR.sys_id;
emailId = userGR.email;
var name = userGR.getDisplayValue();
var company = userGR.company.getDisplayValue();
}
}
else{
var name = 'UNKNOWN';
var company = 'UNKNOWN';
}
if(blackListedEmail.indexOf(emailId)!=-1){
isBlackListed = 1;
}
if(new emailUTILAjax()._validateWhiteLIst(emailId)=='yes')
var isWhileListed = true;
else
var isWhileListed = false;

</g:evaluate>
${isWhileListed}
<j:if test="${isBlackListed < 1}">
<tr class="odd">
<td style="width: 5%;">
<j:if test='${isWhileListed}'>
<input id='TO_${sysId}' name='TO_${sysId}' type='checkbox' checked='true'/>
</j:if>
<j:if test='${!isWhileListed}'>
<input id='TO_${sysId}' name='TO_${sysId}' type='checkbox' />
</j:if>
</td>

<td >TO</td>
<td>${emailId}</td>
<td>${name}</td>
<td>${company}</td>
</tr>
</j:if>
</j:while>
</j:if>

</table>
<br/><br/>
<input type='hidden' id='org_body' value='${jvar_body}'/>
<table border="3px" cellspacing="2" cellpadding="0" id="emailIdList" style="width: 70%;">
<tr class="header">
<td style="width: 5%;"></td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Type")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Value")}</td>
</tr>
<tr>
<td style="width: 5%;"><input id='subject' name='subject' type='checkbox'/></td>
<td style="width: 10%;" >Subject</td>
<td >${jvar_subject}</td>
</tr>
<tr>
<td style="width: 5%;"><input id='Body' name='Body' type='checkbox'/></td>
<td style="width: 10%;" >Body</td>
<td id='email_body' ></td>
</tr>

</table>

</form>

<button class="btn btn-default" id="cancel_button" onclick="onCancel();" style="min-width: 5em;" title="" type="submit">Cancel</button>$[SP]$[SP]
<button class="btn btn-primary" id="ok_button" onclick="return SendEmail_UI()" style="min-width: 5em;" title="" type="submit" data-original-title="">Approve &$[SP] Send</button>
</div>

</j:jelly>

client script

function onCancel() {
GlideDialogWindow.get().destroy();
return false;
}
//collapse();

function allSelect() {
var x = document.getElementById("emailForm");
//alert('x'+x);

//var txt = x.elements[j].id ;
var selectValue = document.getElementById('select_all').checked;
// alert('selectValue'+selectValue);
for (j = 0; j < x.length; j++) {
var txt = x.elements[j].id;
//alert('txt'+txt);
if (txt.indexOf('TO_') != -1) {
document.getElementById(txt).checked = selectValue;
}
if (txt.indexOf('BCC_') != -1) {
document.getElementById(txt).checked = selectValue;
} else if (txt.indexOf('CC_') != -1) {
document.getElementById(txt).checked = selectValue;
} else {}
}
}

function SendEmail_UI() {

//alert(document.getElementById('email_ids').checked);

var emailIdArray1 = g_form.getValue('u_to');
var array1 = emailIdArray1.split(",");
var length = array1.length;
var userstym = '5';

var timecal = (length * userstym);
var calctym = timecal + 3;

var d = new Date();
var nowTime = (d.getTime()) / 1000; // get value in seconds

var initialTime = gel('hiddenValue').value;

var initialTimeSeconds = initialTime / 1000; // get value in seconds

var diff = nowTime - initialTimeSeconds;
var tymlimit= diff.toFixed(1) ;

if (diff < calctym) {

var c = confirm('The standard time for this page is '+calctym + 'seconds & only '+tymlimit+'seconds is elapsed now. Please Click Cancel to review this page else click OK.');
if (c) {
GlideDialogWindow.get().destroy();
return true;

} else {

// alert('You clicked Cancel button')
return false;

}
} else {
alert('You have taken standard time');
GlideDialogWindow.get().destroy();
return true;

}

var x = document.getElementById("emailForm");
var txt = "";
var i;
var TO = '';
var CC = '';
var BCC = '';
var attachmentIds = '';
var ALL_TO = '';
var ALL_CC = '';
var ALL_BCC = '';
var ALL_TO_LENGTH = 0;
var attchmentViewed = 0;
var attchmentCount = 0;
var checkedattchmentCount = 0;

for (j = 0; j < x.length; j++) {
txt = x.elements[j].id;
alert('txt'+txt);
alert('txt.indexOfto'+txt.indexOf('TO_'));

if (txt.indexOf('TO_') != -1) {
if (ALL_TO == ''){
ALL_TO = txt.substring(3, txt.length);
alert('ALL_TO'+ALL_TO);}

else{
ALL_TO += "," + txt.substring(3, txt.length);
ALL_TO_LENGTH++;
alert('ALL_TO'+ALL_TO);
alert('ALL_TO_LENGTH'+ALL_TO_LENGTH);
}
}
if (txt.indexOf('BCC_') != -1) {
if (ALL_BCC == '')
ALL_BCC = txt.substring(4, txt.length);
else
ALL_BCC += "," + txt.substring(4, txt.length);
} else if (txt.indexOf('CC_') != -1) {
if (ALL_CC == '')
ALL_CC = txt.substring(3, txt.length);
else
ALL_CC += "," + txt.substring(3, txt.length);
}
if (txt.indexOf('email_attachment_') != -1) {
attchmentCount++;

if (document.getElementById(txt).style.display != 'none')
attchmentViewed++;
if (attachmentIds == '')
attachmentIds = txt.substring(17, txt.length);
else
attachmentIds += "," + txt.substring(17, txt.length);
}
}

for (i = 0; i < x.length; i++) {
txt = x.elements[i].id;
if (document.getElementById(txt).checked == true) {
if (txt.indexOf('TO_') != -1) {
if (TO == '')
TO = txt.substring(3, txt.length);
else
TO += "," + txt.substring(3, txt.length);
}
if (txt.indexOf('BCC_') != -1) {
if (BCC == '')
BCC = txt.substring(4, txt.length);
else
BCC += "," + txt.substring(4, txt.length);
} else if (txt.indexOf('CC_') != -1) {
if (CC == '')
CC = txt.substring(3, txt.length);
else
CC += "," + txt.substring(3, txt.length);
} else if (txt.indexOf('email_attachment_') != -1) {

checkedattchmentCount++;
if (attachmentIds == '')
attachmentIds = txt.substring(17, txt.length);
else
attachmentIds += "," + txt.substring(17, txt.length);

}
}

}

if (ALL_TO_LENGTH == 0) {
alert('To is mandatory, make sure to address are not blacklisted');
return false;
}

if (document.getElementById('subject').checked != true) {
alert("There are items that have not been confirmed. Please review and check all items prior to sending.");
return false;
}

g_scratchpad.dilog = 'ok';

setTimeout(function() {
gsftSubmit(null, g_form.getFormElement(), 'send_mail')
}, 2000);

}

Ankur Bawiskar · ‎10-28-2020

Hi Nikita,

you can reload the UI page as below

By calling it again using GlideDialogWindow

if (diff < calctym) {

var c = confirm('The standard time for this page is '+calctym + 'seconds & only '+tymlimit+'seconds is elapsed now. Please Click Cancel to review this page else click OK.');
if (c) {

// your new Code to GlideDialogWindow

var dialog = new GlideDialogWindow("ui page name"); //name of UI page here
dialog.setTitle("Show value"); //Set the dialog title
dialog.setPreference("sysparm_sysID", ''); //Pass your parameter gere
dialog.render(); //Open the dialog
//GlideDialogWindow.get().destroy();
return true;

} else {

// alert('You clicked Cancel button')
return false;

}
}

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Nikita9 · ‎10-28-2020

Hi Ankur,

It's not working for me.

I can see the same ui page with the all field checked even after clicking on cancel button.

Regards,

Nikita