Refresh ui page without reloading it.

Go to solution
Nikita9
Mega Expert

‎10-28-2020 01:39 AM

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. 

find_real_file.png

Pls help.

 

Regards,

Nikita

Preview file
118 KB
0 Helpfuls
  • 6,193 Views
1 ACCEPTED SOLUTION

Go to solution
rahulpandey
Kilo Sage

‎11-02-2020 12:15 AM

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

19 REPLIES 19

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to Nikita9

‎11-01-2020 11:58 PM

Hi Nikita,

You can reload the RITM form but once page loads it needs a trigger to invoke the UI page

So this is not possible

Let user invoke the UI page again by clicking the UI action

Regards
Ankur

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

Go to solution
Narsing1
Mega Sage

‎10-28-2020 07:23 AM

You can try something like this

HTML:

<div id="result1">
initial page

</div>

<input type="button" name="refresh1" id="refresh1" onclick="refresh()">

 

Client Script:

function refresh(){

var res = document.getElementById('result1');
res.innerHTML = '';

var ga = new GlideAjax("<anyscriptinclude>");

ga.addParam("sysparm_name", "refreshmydata");

ga.getXML('mydata');

}

function mydata(response){

var answer = response.responseXML.documentElement.getAttribute("answer");

var res = document.getElementById('result1');

res.innerHTML = answer;

}

 

Script Include

 

function refreshmydata(){

var m = "<html><b>my new data</b></html>";

return m;

}

0 Helpfuls

Go to solution
rahulpandey
Kilo Sage

‎11-02-2020 12:15 AM

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.

 

 

Go to solution
Nikita9
Mega Expert
In response to rahulpandey

‎11-02-2020 04:06 AM

Hi Rahul,

 

Thanks a lot.

 

 

0 Helpfuls

Go to solution
parth lathiya
Tera Contributor

‎09-01-2022 12:08 AM

Hi Nikita, I have a similar requirement like you that I want to show some details in popup. I have tried with variable of type UI Page to render some HTML content but it's not working. Can you please help me with how are you displaying this popup and the information in it.

Thanks in advance

 

0 Helpfuls