How to access data from a table inside a UI Page?

[jglez1]

Hi folks, so I'm rendering a modal using a UI Page. I have a <select> element with a bunch of <option> elements. So right now, the values are hardcoded but my boss wants to make it so these options are configurable (can be turned off and on) without needing a dev.

So I created a table with a bunch of records that match these <option> elements. The records have an "active" column that is either true or false. If the value is true, then the record will be loaded in the UI Page as an <option> element.

This makes it so a non-tech savvy person can go in and change the value to false, and that option is now turned off. Does anyone know how to do that in a UI Page?

Thank you.

[-O-]

Here's a simple UI Page containing everything needed to display a select box with label where the options are the Category choices of Incident records:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<!--
		Run server side code that loads the list of choices,
		stores it in variable jvar_choices
		Important here is attribute object="true" which enables returning an
		array from a g:evaluate element
	-->
	<g:evaluate var="jvar_choices" object="true">
		// Regular server side code that loads the choices using GlideRecord
		// Here one might also have a single instruction, one line calling a
		// Script Include method
		// Important is that the last line in the script decides what
		// g:evaluate "returns"
		var choices = [],
		    $gr = new GlideRecord('sys_choice');

		$gr.addEncodedQuery('name=incident^element=category^inactive=false^language=en');
		$gr.orderBy('sequence');
		$gr._query();

		while ($gr._next())
			choices.push({ 'label': '' + $gr.label, 'value': '' + $gr.value, });

		choices;
	</g:evaluate>
	<!--
		Just for layout
	-->
	<div style="column-gap: 2em; display: flex; line-height: 2em; width: auto;">
		<!--
			Give the choice list a label
		-->
		<label style="">${ gs.getMessage('Category'); }</label>

		<!--
			Start the select element
		-->
		<select style="border: 1px solid #f0f0f0;">
			<!--
				Loop through the choices array constructed above turning each
				one into an option element
			-->
			<j:forEach items="${ jvar_choices; }" var="jvar_choice">
				<option value="${HTML: jvar_choice.value; }">${HTML: jvar_choice.label; }</option>
			</j:forEach>
		</select>
	</div>
</j:jelly>

Note that Phase One elements/nodes are used throughout (so <g: and <j: vs. <g2: and <j2:).
Which means that the UI Page will not be evaluated on each access, but only when it is modified or after the cache is flushed.

So if the list of choices changes often, it is better to rewrite the UI Page (or UI Macro - if you decide to make the code reusable) using Phase Two elements; e.g instead of <g:evaluate/> one would write <g2:evaluate/>.

Note that if the list of choices is the same as the ones on a field in a table, this whole thing can be much simplified as the <g:evaluate/> part would become

<g:evaluate var="jvar_not_important" expression="var _choiceList = GlideScriptChoiceList.getChoiceList('incident', 'category');" />

and the <j:forEach/> part would become:

<g:options choiceList="${ _choiceList; }" />

Notice how here not a Jelly variable (jvar_choices) is used, but a JavaScript one (_choiceList) to "move" the choices from where those are loaded to where those are used.