Variable Data in a GlideModal

Gaurav Bajaj · ‎09-14-2023

Recently I came across an ask to showcase multi line text variable data in a more readable format which could be searched, sorted, and paginated so to offer a better user experience. This data was coming over from an external source and was carrying over more than 5000 line-items for a specific service request. So, I needed a way to display the data in a popup window or a new page so the user viewing this information can filter and identify data upon click of a button.

Therefore, I build a little utility using good old jelly skills and modern GlideModal APIs and used list of countries across the globe to showcase an example.

Technical Solution:

A new variable of type ‘UI page or UI macro’ just sitting below the main variable carrying data in it.
Purpose of this UI page/Macro is to open-up a popup window using GlideModalv3 API and pass-on the variable data to a different UI page (explained below) after querying from RITM.
A UI page which is supposed to display the data in table format having all list specific feature e.g., search, pagination, and sorting. I’ve used jQuery data table JS (external library) to achieve it.
Rest is about loading external libraries and CSS (based on your need)
And voila! Your variable data is ready to flaunt itself.

Below screenshot refer to the RITM page having a variable storing list of all the countries.

And this is how the countries list will be displayed with search and pagination facilities.

Technical Components and Script Details

Create a new variable of type ‘UI page’.

UI page Script

Essentially this script is rendering a UI button on RITM and then on click of it, its queries the sc_req_item table via Glide Ajax based on RITM ID passed and then passing the output -variable data into the GlideModal window through the setPreference function.

Script Include

This is the straightforward part which returns the data stored in a variable in string format for a given RITM record.

<g:set var="jvar_answerList" value="${RP.getWindowProperties().get('dataset')}"/>

UI Page with a Popup window

This is the tricky part where some level of jelly scripting along with jQuery/datatable JS is utilized.

To break down the script, though I have added enough comments within the script to explain it.

The first step is to load JS into Platform into UI scripts and add a reference at the beginning of the script itself. One could think of loading JS via the CDN path itself, but it does not work in GlideModal hence it’s better to load them and provide a reference.
Grab the data of the country list which is passed from the UI page where GlideModal is called using setPreference function.
Print the country array list in a table via jelly script.
Call the data table JS function which works on the table id of the country list.

<?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:requires name="jquery.min.js.jsdbx" />

<g:requires name="dataTables.min.js.jsdbx" />

<g:evaluate>

var answerList = RP.getWindowProperties().get('dataset').split(',');

</g:evaluate>

<thead>

<tr>

<th>Countries</th>

</tr>

</thead>

<tbody>

<j:forEach var="jvar_answerList" items="${answerList}">

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

</j:forEach>

</tbody>

</table>

// Since ServiceNow uses jquery with a different version already, therefore the loaded jquery in this UI page should not conflict with OOB platform one.

var $j = jQuery.noConflict(true);

// Once the page document is loaded, datatable JS ensures that its provides all table list features e.g. search, pagination, sort via below function.

$j(document).ready(function(){

$j('#myTable').dataTable();

});

</script>

</j:jelly>