Populate UI Page with task fields

[Michelle89]

Hello All, Please help point me in the right direction for this:

What is the easiest way to populate a field from a task form to a variable on a catalog item displayed in a UI Page?

I have created a checkbox field on the Change Request form. After the user checks the checkbox field, I have configured a UI Policy that will tell the UI Page to popup. When the UI Page appears, it just displays ABC Catalog Item.

How can I pass the Change Request Number to the ABC Catalog Item variable called: 'Change Request' on the catalog item?

[Matthew Glenn]

It's a bit of an older document, but take a look at the example here on ServiceNow's site

Specifically, look at how they're passing the "comments_text" and "short_text" values from the Client Script to the HTML of the UI Page (as seen below). This should work no differently with a UI Policy (that I'm aware of). This is assuming that you're calling your UI Page via GlideDialogWindow, which I believe is the current best practice.

Hopefully this helps a little

[Michelle89]

Hi Matthew,

Thank you for highlighting those screenshots and providing reassurance that this is the best practice!

I was able to get the Change Request number onto the UI Page in the input field, but still trying to figure out how to pass the variable in the iframe url which is directing to the catalog item. Can you please help provide any thoughts on this?

Initial thoughts - UI Page Client script: get the value for abc_change_number and update it to the iframe url?

Here is the HTML code for my UI Page:

<g:evaluate var="jvar_chgnum"
expression="RP.getWindowProperties().get('chgnum')" /> 

<g:ui_input_field name="abc_change_number" id="abc_change_number" label="Change Request" 
value="${jvar_chgnum}" mandatory="true" />


<iframe src="/com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=1234567abc" scrolling="yes" style="height:250%; width:100%"/>

[Matthew Glenn · Accepted solution]

Hey Michelle, 

I think I have what you need. Let's try the following

1. Open up your UI Page and adjust the <g:evaluate> tag to what you see below. The only difference is I've changed the "phase" to 2. I'm not sure why, but the rest of what I've put below doesn't work if not in phase 2. More on phases here

   <g2:evaluate var="jvar_chgnum" expression="RP.getWindowProperties().get('chgnum')" /> ​

2. Next, drop the <g:ui_input_field> tag. We won't be needing this after all.
3. The last adjustment we'll be making to the UI Page is to the src attribute of your iframe. We're going to be adding a parameter to it that will let your catalog item know the "chgnum" you're trying to pass in.
   
   Should look something like this. Don't forget to adjust the sys_id to match that of your catalog item. 
   
   

   <iframe src="/com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=1234567abc${AMP}sysparm_chgnum=$[jvar_chgnum]" scrolling="yes" style="height:250%; width:100%"/>​

   
   
   Now on to the catalog item
   
   
4. On your catalog item, create an onLoad Catalog Client Script with what you see below. Make sure to set the UI Type to either "Desktop" or "All":

   function onLoad() {
       //Use the 'getParameterValue' function below to get the parameter values from the URL
       var chgnum = getParameterValue('sysparm_chgnum');
       if (chgnum) {
           //Put the name of the variable you're trying to populate here
           g_form.setValue('change_request', chgnum); 
       }
   }
   
   function getParameterValue(name) {
       var url = document.URL.parseQuery();
       if (url[name]) {
           return decodeURI(url[name]);
       } else {
           return;
       }
   }​

   
   More info on pulling this parameter can be found here
   
   Once you've created this Catalog Client Script, you must set the "Isolate script" attribute on it to "False". Easiest way to do that is by simply adding that attribute to your list view when looking at the Catalog Client Scripts for this catalog item and set it there via list edit. By default, you won't find this "Isolate script" field on the form

This is all working for me in my dev instance. I hope it helps you out.

[Michelle89]

Thank you Matthew for your help, this worked for me!