- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2021 04:50 AM
Hello,
My requirement is to show second UI page from first and that too in same window / frame.
There are two UI pages already created (say page1 & page2).
On click of UI action, if there are records in related list, show page1 & then page2 else show only page2. See below code.
Page1 HTML:
<g:ui_form>
<input type="hidden" id="cancelled" name="cancelled" value="false"/>
<input type="hidden" name="task_id" id="task_id" value="${RP.getWindowProperties().get('sysId')}"/>
<g:evaluate var="jvar_URL" object="true">
<!-- Code will check records and put all sys_ids in an array and return an URL -->
url;
</g:evaluate>
<table>
<tr id="dialog_buttons">
<td colspan="2" align="left">
<g:dialog_buttons_ok_cancel ok="return onSubmit();" cancel="return onCancel();" />
</td>
</tr>
<br/><br/>
</table>
<table>
<tr>
<td><iframe src="${jvar_URL}" scrolling="yes" width="900" height="400"/></td>
</tr>
</table>
</g:ui_form>
If I wrote the <iframe> first & then dialog_buttons_ok_cancel then those buttons are not displaying.
Page1 Client script:
function onSubmit() {
var taskId = gel('task_id').value;
alert("task id="+taskId);
GlideDialogWindow.get().destroy();
}
function onCancel() {
var cancel = gel('cancelled');
cancel.value = "true";
GlideDialogWindow.get().destroy();
return false;
}
Page1 Processing script:
if ('false' == cancelled) {
response.sendRedirect("ui_page.do?sys_id=<SYS_ID_OF_PAGE2>");
}
The issue I'm facing is for second page. Page2 is not getting displayed in same UI page window/frame.
Also, if I click on "Cancel" button then it is redirecting to new record instead of same record.
Please help me to solve this issue.
Thanks in advance.
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2021 02:18 PM
So here's a skeleton of how this could be done:
A client UI Action where field Onclick = u_onClick():
var u_onNextDlg;
var u_onCloseDlg;
function u_onClick () {
var IS_READ_WRITE = false,
dialog_1 = new GlideModal('u_ui_page_1', IS_READ_WRITE, 1024);
dialog_1.setTitle('Title 1');
dialog_1.render();
u_onNextDlg = function (dialog_1) {
return function (param) {
dialog_1.destroy();
var dialog_2 = new GlideModal('u_ui_page_2', IS_READ_WRITE, 1024);
dialog_2.setTitle('Title 1');
dialog_2.setPreference('sysparm_id', param);
dialog_2.render();
u_onCloseDlg = function (dialog_2) {
return function () {
dialog_2.destroy();
};
}(dialog_2);
};
}(dialog_1);
}
Make sure the UI Action is NOT marked as "Isolate script".
Next, the 1st 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">
<g:ui_form>
<article class="modal-body">
<div class="form-horizontal">
<span class="section">
<div class="section-content" glide="true">
<p>Content 1...</p>
</div>
</span>
</div>
</article>
<footer class="modal-footer">
<g:dialog_buttons_ok_cancel cancel_type="button" ok_id="u_ui_page_1_ok" ok="u_onNextDlg('an id')" ok_type="button"/>
</footer>
</g:ui_form>
</j:jelly>
Finally the 2nd 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">
<g:ui_form>
<article class="modal-body">
<div class="form-horizontal">
<span class="section">
<div class="section-content" glide="true">
<p>sysparm_id: $[ sysparm_id; ]</p>
<p>Content 2...</p>
</div>
</span>
</div>
</article>
<footer class="modal-footer">
<g:dialog_buttons_ok_cancel cancel_type="button" ok_id="u_ui_page_2_ok" ok="u_onCloseDlg()" ok_type="button"/>
</footer>
</g:ui_form>
</j:jelly>
Of course this is just for demonstration, a lot of things is hard-coded, but when one clicks the UI Action, the 1st UI Page is shown, when that dialog is dismissed pressing the OK button, the 1st UI Page is unloaded and the 2nd UI Page is shown, receiving parameters that might have been passed to it by the 1st UI Page's OK routine. Hard-coded, of course.
Hope this helps.
Just an idea: I don't know why
GlideDialogWindow.get
is used or suggested, as far as I can tell, that is not a thing, method get does not exist on object GlideDialogWindow.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2021 05:20 AM
Processing scripts are executed when the form that was defined in the UI Page is submitted. So running the processing script and not having the current form reloaded are mutually exclusive.
It could be done if you'd implement submitting the form (and as a result executing the processing script) and receiving the answer all in JavaScript. You would need to get rid of the <g:ui_form/> tag - would be replaced by a form constructed and submitted entirely in JavaScript.
I'm not sure what's the process behind this, but maybe you could implemented all of it so that the UI pages are displayed using GlideModal, on not the 2nd in the 1st, but the 2nd after the 1st one is closed. Or merge the two into one, showing and hiding the proper parts (UI Page 1 and UI Page 2) on client side using JavaScript).
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2021 06:32 AM
Thanks for reply Janos.
When user clicks on "Ok" button then only Page2 should be displayed. I've tried writing another GlideDialogWindow in client script but no luck.
Please help me with code.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2021 07:10 AM
Hi,
you can call the 2nd UI page using GlideDialogWindow here
function onSubmit() {
var taskId = gel('task_id').value;
alert("task id="+taskId);
var dialog = new GlideDialogWindow("task_comments_dialog"); name of UI page
dialog.setTitle("Add Task Comments"); //Set the dialog title
dialog.render(); //Open the dialog
GlideDialogWindow.get().destroy();
}
Regards
Ankur
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2021 08:03 AM
Thank you for reply
I tried with that code but its not working. To load second UI page we need to pass sys_id which I'm passing through taskID but its not showing me in the alert. Below is the code I wrote.
Client script:
function onSubmit() {
var taskID = gel('task_id').value;
var dialog = new GlideDialogWindow("page_two");
dialog.setTitle("Close form"); //Set the dialog title
dialog.setPreference('sysId', taskId); //Send sys_id
dialog.render(); //Open the dialog
GlideDialogWindow.get().destroy();
}
I put alert for taskID in the onCancel function of second UI page, but it is showing me blank value.
With above code the second UI page is opening but when I click on "Ok" or "Cancel" button it is redirecting me to new record due to sys_id issue.
Please help.