Hi Everyone,
In this article, we will explore the Glide List type of variable in UI Page, how we can pass value from form to UI Page, how to access it in processing script.
Use Case 1: How to create a Glide List type of variable in UI Page?
Implementation Steps: Navigate to [sys_ui_page] table and create new record
Name: sn_glide_list
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">
<p><label for="company"><b>SN Company</b></label></p>
<g:macro_invoke macro="lightweight_glide_list2" id="comId" name="comId" control_name="comCollector" reference="core_company" query="u_active=true" can_write="true" />
</j:jelly>
Save the form and click on Try it, result will be as below:
*****************************************************************************************************************
Use Case 2: How to pass the value of Glide List variable from a record to glide list type variable in UI Page?
Implementation Steps: In an incident form, I have created a custom field named 'Company' which is referencing to [core_company] table. I want to pass this data to UI page when a UI Action is clicked and the UI Page loads.
We will be passing the Company records: [Community ServiceNow, Miami Closed Warehouse] in the UI page
- Create a UI Action as below:
function openCompanyPage() {
var gdw = new GlideDialogWindow('sn_glide_list');
gdw.setSize(1000, 500);
gdw.setPreference('curr_rec_sysid', g_form.getUniqueValue());
gdw.setTitle('Update Company Data');
gdw.render();
}
- UI Page Details
Name: sn_glide_list
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>
<g:evaluate>
var currRecSysId = RP.getWindowProperties().get('curr_rec_sysid') || '';
</g:evaluate>
<input type="hidden" name="curr_rec_sysid" value="$[currRecSysId]" />
<input type="hidden" id="company_list" name="company_list" value="" />
<br />
<br />
<p><label for="company"><b>SN Company</b></label></p>
<g:macro_invoke macro="lightweight_glide_list2" id="comId" name="comId" control_name="comCollector" reference="core_company" query="u_active=true" can_write="true" />
<br />
<div class="modal-footer">
<span class="pull-right">
<g:dialog_buttons_ok_cancel ok="return onSubmit();" cancel="return onCancel();" />
</span>
</div>
</g:ui_form>
</j:jelly>
Client Script:
var compData = g_form.getValue('u_company_field');
var displayCiVal = new GlideAjax('UserLearning');
displayCiVal.addParam('sysparm_name', 'companyData');
displayCiVal.addParam('sysparm_core_company_data', compData);
displayCiVal.getXML(callAnswer);
function callAnswer(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
var obj = JSON.parse(answer);
var splitted = obj.compIds;
var displayText = obj.compNames;
for (var z = 0; z < splitted.length; z++) {
var selEl = document.getElementById('select_0comCollector');
var optEl = document.createElement('option');
var txtNd1 = document.createTextNode([displayText[z]]);
optEl.setAttribute('value', [splitted[z]]);
optEl.appendChild(txtNd1);
selEl.appendChild(optEl);
}
}
function onSubmit() {
var selectedElement = document.getElementById('select_0comCollector');
var pushValues = [];
for (var loopVal = 0; loopVal < selectedElement.options.length; loopVal++) {
pushValues.push(selectedElement.options[loopVal].value);
}
var selectedCompanies = pushValues.toString();
gel('company_list').value = selectedCompanies;
}
function onCancel() {
GlideDialogWindow.get().destroy();
return false;
}
Processing Script:
gs.info('Selected Record ID: '+ curr_rec_sysid); //Accessing the Incident SysId
gs.info('Selected CompanyIds: '+ company_list); //Accessing the Company SysId selected in UI Page
Script Include:
Name: UserLearning
Client Callable: True
var UserLearning = Class.create();
UserLearning.prototype = Object.extendsObject(AbstractAjaxProcessor, {
companyData: function() {
var getCompSysIds = this.getParameter('sysparm_core_company_data');
var compNames = [];
var compIds = [];
var obj = {};
var grCompany = new GlideRecord('core_company');
grCompany.addQuery('sys_id', 'IN', getCompSysIds);
grCompany.query();
while (grCompany.next()) {
compNames.push(grCompany.name.toString());
compIds.push(grCompany.sys_id.toString());
}
obj.compNames = compNames;
obj.compIds = compIds;
return JSON.stringify(obj);
},
type: 'UserLearning'
});
References to achieve the above functionality:
Populate a list UI element in a UI page with Value
Result:
On Click of UI Action, the below details gets populated in the UI Page's glide list element
Now, We will click on OK, then we will access the sysId of Incident and sysId of Company record(s) in Processing script:
That's all for this article.
Mark the article as helpful if you found it useful.
