I want pass variables from the UI Page to Form after clicking the OK button on the UI Page and also vice versa Form to the UI Page after clicking on the form header UI Action button????

Shantharao · ‎03-03-2020

Hello All,

I have created one simple UI Page, here my use case is I want to pass UI page variables or textbox values into the form after clicking the OK button on the UI page vice versa, I want to pass Form fields DisplayValue into the UI Page textbox fields after clicking the UI action button on the form?

I want to add two buttons OK and Cancel with blue background

How can we achieve this scenario, please find the screenshot for more reference

My UI Action

function checkUIPgaeValidation() {
var number = g_form.getValue("u_number");
// var userName = g_form.getValue("short_description");
var gdw = new GlideDialogWindow('test_sample_page');
gdw.setTitle('Testing UI Page features');
gdw.setSize(750, 300);
gdw.adjustBodySize();
gdw.setPreference("number", number);
gdw.render();
}

___________________________________

UI Page Name : test_sample_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">
<h1> It is my firsy UI page </h1>

<g:evaluate>
var userSysId = gs.getUserID();
gs.addInfoMessage(userSysId);
gs.addInfoMessage(gs.getUserName());
</g:evaluate>
<g:evaluate>
var number = g_form.getValue("u_number")

g_from.addInfoMessage(number + "from Ui page");
</g:evaluate>
<table>
<tr>
<td><strong>Enter Name </strong></td><td> <input type="text" value="userSysId"/> <br></br></td>
</tr>
<tr>
<td><strong>Enter Number </strong></td><td> <input type="integer" value="number"/><br></br></td>
</tr>
<tr>
<td><strong>Date </strong></td><td> <input type="date" placeholder="mm/dd/yyyy" value="new Date().getDate"/></td>
</tr>
<tr>
<td><strong>Font </strong></td><td> <textarea> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea><br></br></td>
</tr>
</table>
</j:jelly>

Note: please provide me the useful "jelly" learning youtube video links or any documents

Thanks

Harsh Vardhan · ‎03-03-2020

to pass the value into your form you can do it using your UI page client script part.

sample code:

function oK() {


      var num = document.getElementById("number").value;
      var pswd = document.getElementById("<html_id>").value; // here you will pass the html id value which you want to update on form.

      var test = new GlideRecord('<table name>');

      var test.addQuery('number',num);
      test.query();
      if(test.next()){

      test.setValue('password', pswd);


      test.update();


}

Html:

      <g:dialog_button onclick="oK()" type="button" class="btn">OK</g:dialog_button>

to set the value on your UI Page html field, you can pass it on your ui action setPreference().

Refer the below blog and give a try .

https://www.servicenowguru.com/system-ui/glidedialogwindow-advanced-popups-ui-pages/

Shantharao · ‎03-06-2020

Hi Harsha,

I am getting below error while creating new UI page especially for ok/cancel button line as highlighted in the red color

UI Page - HTML CODE

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

<g:evaluate var="jvar_short_text"
expression="RP.getWindowProperties().get('short_text')" />
<g:evaluate var="jvar_comments_text"
expression="RP.getWindowProperties().get('comments_text')" />

<table width="100%">
<tr id="description_row" valign="top">
<td colspan="2">

${jvar_short_text}
</td>
</tr>
<tr>
<td>

<g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Additional comments" value="${jvar_comments_text}" mandatory="true" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr id="dialog_buttons">
<td colspan="2" align="right">

<g:macro_invoke macro=" dialog_buttons_ok_cancel" ok="return validateComments()"ok_type="button" cancel_type="button" ></g:macro_invoke>
</td>
</tr>
</table>
</g:ui_form>

</j:jelly>

Error at line (32) Element type "g:macro_invoke" must be followed by either attribute specifications, ">" or "/>".

what is the reason do you have any insight?

Harsh Vardhan · ‎03-06-2020

try now.

<?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 -->
		<g:evaluate var="jvar_short_text"
					expression="RP.getWindowProperties().get('short_text')" />
		<g:evaluate var="jvar_comments_text"
					expression="RP.getWindowProperties().get('comments_text')" />
		<!-- Set up form fields and labels -->
		<table width="100%">
			<tr id="description_row" valign="top">
				<td colspan="2">
					<!-- Short description value used as a label -->
					${jvar_short_text}
				</td>
			</tr>
			<tr>
				<td>
					<!-- Comments text field (Contains comments from originating record as a default) -->
					<g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Additional comments" value="${jvar_comments_text}" mandatory="true" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
				</td>
			</tr>
			<tr id="dialog_buttons">
				<td colspan="2" align="right">
					<!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.
'ok' option will call the 'validateComments' Client script function from the UI Page-->


					<g:dialog_buttons_ok_cancel ok="return validateComments()" ok_type="button" cancel_type="button" />






				</td>
			</tr>
		</table>
	</g:ui_form>

</j:jelly>

If my answer helped you, kindly mark it as correct and helpful.