How to create UI Pages.

Hrishabh Kumar · ‎02-08-2023

I am trying to understand and use UI Pages for my projects in servicenow, I am not able to get an idea of how to get started with UI Pages as it is coded with "jelly-script".

1) Are UI Pages only created with "Jelly-Script" or can we use simple HTLM in it.

2) Should I try to learn Jelly-Script or there is any other way to create UI Pages without Jelly Script maybe a no-code or low-code approach.

3) Provide any useful resources for UI Pages and Jelly Script.

SoniaShridhar13 · ‎02-08-2023

Hi @Hrishabh Kumar You can start with https://docs.servicenow.com/en-US/bundle/tokyo-application-development/page/administer/ui-builder/ta...

I once created UI page to display record of incident table and sharing below code if it helps you ...you can modify as per your need-

First UI Page:

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

Start Date:<g:ui_date name="start_date" id="start_date" table="incident" field='sys_created_on'/> <br/><br/>

End Date:<g:ui_date name="end_date" table="incident" field='sys_created_on'/>

<br/>

<button onClick = "MyFunction2()"> Cancel </button>

</j:jelly>

Client script:

function MyFunction(){

var date1 = gel("start_date").value;

var date2 = gel("end_date").value;

var nums = '';

var gr = new GlideRecord('incident');

gr.addQuery('sys_created_on','>=',date1);

gr.addQuery('sys_created_on','<=',date2);

gr.query();

while(gr.next()){

nums += ',' + gr.getValue('number');

}

window.open("date_range_selected_incident.do?sysparm_nums="+nums);

}

function MyFunction2(){

window.open("Date_Range_selecting_incident",target="_self");

}

Second 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">

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 50%;

}

tr, td {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

</style>

<body>

<table>

<tr>

<th>Incident Number </th>

<<th> Caller </th>

<th> Opened </th>

<th> Opened by </th>

<th> Assigned to</th>

<th> Priority</th>

<th> State </th>

<th> Short Description </th>

</tr>

<g2:evaluate var="jvar_incident" jelly="true" object="true">

var inc = new GlideRecord('incident');

inc.addQuery('number','IN',jelly.sysparm_nums);

inc.query();

</g2:evaluate>

<j2:while test="$[inc.next()]">

<tr>

<j2:set var="jvar_num" value="$[inc.number]"/>

<j2:set var="jvar_caller" value="$[inc.caller_id.getDisplayValue()]"/>

<j2:set var="jvar_opened" value="$[inc.opened_at.getDisplayValue()]"/>

<j2:set var="jvar_openedby" value="$[inc.opened_by.getDisplayValue()]"/>

<j2:set var="jvar_assigned" value="$[inc.assigned_to.getDisplayValue()]"/>

<j2:set var="jvar_priority" value="$[inc.priority.getDisplayValue()]"/>

<j2:set var="jvar_state" value="$[inc.state.getDisplayValue()]"/>

<j2:set var="jvar_short" value="$[inc.short_description]"/>

<td> $[jvar_caller] </td>

<td> $[jvar_opened] </td>

<td> $[jvar_openedby] </td>

<td> $[jvar_assigned] </td>

<td> $[jvar_priority]</td>

<td> $[jvar_state]</td>

<td> $[jvar_short]</td>

</tr>

</j2:while>

</table>

</body>

</j:jelly>

Please mark it helpful if it helps...

Thanks,

Sonia

Ankur Bawiskar · ‎02-08-2023

@Hrishabh Kumar

it depends on your requirement whether you require UI page or not.

It can simply have HTML in it or combination of Jelly + HTML

Remember UI pages require jelly script and it's not supported in portal and workspace.

Sharing links for your help and it will show you examples as well

Ui page example

UI pages

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader