ServiceNow - Jelly scripting cheatsheet

UI Page consists of jelly, client script and processing script. UI Macro has the jelly script only (but client script can be injected in jelly script) Usages:

Open as a page using URI https://<instance_name>.service-now/<ui_page_name>.do
Open as a modal using client script (UI action, client script, etc) (see snippet 1)

// Snippet 1
var gm = new GlideModal('UI_dialog_name');
gm.setTitle('Show title');
gm.setWidth(550);
gm.render();

To pass variable from client script to modal, use setPreference method of GlideModal. In UI page, to print sysparm variables, use <j:set> tag set a jvar variable. Note that var name must have jvar_ prefix in order to be printed to HTML (see snippet 2.1, 2.2)

// Snippet 2.1
// Replace ui_page_name with your UI Page name, varName, value with your variable name and value
var modal = new GlideModal('ui_page_name');
modal.setPreference('sysparm_varName', value);

<!-- Snippet 2.2 -->
<j:set var="jvar_var_name" value="${sysparm_varName}"/>
Impact: ${jvar_var_name}

To use those sysparm variable in client script, create a hidden input that hold the value then use DOM manipulation to value of hidden field (see snippet 3.1, 3.2)

<!-- Snippet 3.1 -->
<input id="var_name" value="${sysparm_varName}" hidden="true" />

// Snippet 3.2
var value = gel('var_name').value;

To submit form so that processing script can be executed, use <g:ui_form> tag with a <g:dialog_button type="submit">. <g:dialog_button> has onSubmit attribute which is a function that return true if the form is okay to submit, otherwise, return false.
To pass variable to processing script, similarly to client script, you will need a hidden field but for processing script, you just use the name attribute of input field as variable name. Note that input elements should be placed inside g:ui_form so that its values can be sent to server as form data.
ServiceNow supports extension jelly tags g:ui_form, g:ui_input_field, g:ui_checkbox, g:dialog_buttons_ok_cancel, g:ui_reference
You can use g:evaluate tag evaluate an expression written in javascript which will be executed in server-side. If you need to use Jelly variable inside, set attribute jelly="true"
To loop through array, use j:forEach (see snippet 4)

<!-- Snippet 4 -->
<g:evaluate>
	var grQuestion = new GlideRecord('u_mn_feedback_category');
	grQuestion.orderBy('sys_created_on');
	grQuestion.query();
	var questions = [];
	var rowCount = grQuestion.getRowCount();

	while (grQuestion.next()) {
		questions.push({
			'id': grQuestion.u_name+'',
			'question': grQuestion.u_question+''
		});
	}
</g:evaluate>
<j:forEach var="jvar_question" items="${questions}">
	<div class="form-group">
		<label>${jvar_question.question}</label>
		<input class="form-control" id="${jvar_question.id}" name="${jvar_question.id}" />
	</div>
</j:forEach>

For UI macro, you can put a script into HTML. Expression is working on all HTML code, include parts enclosed in script tag Ref (see snippet 5)

<!-- Snippet 5 -->
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<j:set var="jvar_n" value="ip_rep_src_ip_${ref}" />
	<span id="${jvar_n}" onChange="onChange('${ref}')" onclick="ip_rep_src_ip('${ref}')" title="IP Reputation" alt="IP Reputation" tabindex="0" class="btn btn-default icon-search">
		<span class="sr-only">IP Reputation</span>
	</span>

	<script>
	function onChange(element, original, changed, loading) {
		var visibility = 'visible';
		var sysID = g_form.getValue('u_source_ip_s');
		if (!sysID)
			visibility = 'hidden';

		var e = gel('${jvar_n}'); // Here, Jelly will evaluate this expression and replace it by the value of that variable
		e.style.visibility= visibility;
	}


	function ip_rep_src_ip(reference){
		window.open('https://www.talosintelligence.com/reputation_center/lookup?search=' + encodeURI(g_form.getValue('u_source_ip_s')));
	}
	</script>
</j:jelly>

RenderProperties API is provided inside Jelly script API official docs (see snippet 6)
If you use an UI macro on a form (using a formmatter), to get sys_id of the record, you can query parameter Ref

<!-- Snippet 6 -->
<g:evaluate var="sys_id">
	var sys_id = RP.getParameterValue("sys_id");
	sys_id;
</g:evaluate>

Dipenduroy/ServiceNow - Jelly scripting cheatsheet.md

ServiceNow - Jelly scripting cheatsheet