UI Page: need dependant reference field

[MichaelZischeck]

I have now tried, I think all possibilities to get this working.

What I want is something similar as in Incident:

You select assignment group

You  select assigned to (which is a member of assignment group)

On Incident this has been solved by Form Designer: there you can set fields to be "dependant"

I however want this in a GlideModal.

UI Page HTML 

			<g:evaluate var="jvar_team_members">

var tm = new GlideRecord('sys_user_grmember');

//tm.addQuery('group', "${jvar_groupid}"); // use your jelly variable here for the group to filter
tm.addQuery('group', "da82ebe787f3155037bfca270cbb35d6"); // use your jelly variable here for the group to filter
				// group id da82ebe787f3155037bfca270cbb35d6

tm.query();


var list = []; // create an array of user IDs

while (tm.next()) {

        list.push(tm.getValue('user')); // add record's user to list as a member of that group

}

var users = list.join(','); // create comma separated values

users;   // save it to jvar_users

			</g:evaluate>
						<g2:ui_reference name="assigned_to" id="assigned_to" table="sys_user" query="sys_idIN${jvar_team_members}" completer="AJAXTableCompleter"/>

I think g:evaluate is "not dynamic", ie. it does not update once the assignment group has been changed.

So I followed this advice:

https://www.servicenow.com/community/developer-forum/ui-page-dependent-reference-field/m-p/2488457#M... 

no luck.

I then tried to use the actual table form, instead of a self built UI page. and voila: I get dependant fields, BUT only if I call it as GlideModalForm, I call it as "GlideModal" and dependant stuff won't work either.

I can't see why "dependant" fields would work one way, but not another. I also cannot understand why I can make fields in Form Designer "dependant", yet in UI Pages I can't

This inconsistency drives me crazy...

I know: I could create a "<Select>" with appropriate options upon change of the first value, but it'll not be "ServiceNow" design standard anymore

In the meantime I figured: I use Form Design, create the form as I need to update multiple records, and then I use "Update selected" on the list context menu. Requires of course switching to the right view first, but that's a no brainer

[Richard Schmidt]

Hi Michael,

I know this is quite an old post, but I was facing a similar issue recently and I was able to solve this problem with a new approach. I wanted to share my solution in case anyone else encounters the same challenge.

Solution:

I used an approach that takes the value from the first reference field, sets it as a preference, and reloads the modal with this preference. The Jelly script then evaluates the preference (choice sys_id) and populates the GlideRecord for the choice record. This allows us to automatically populate the user's previous selection in the reference field using the sys_id and the display value, while also generating the dynamic reference qualifier for the second reference field.

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:evaluate var="jvar_choiceGR" object="true">
		var choiceGR = new GlideRecord('sys_choice');
		choiceGR.get(RP.getWindowProperties().get('choiceID'))
		choiceGR;
	</g:evaluate>

	<g:ui_form>
		<!-- Category Reference Field -->
		<div class="form-group" style="display: flex; gap: 2rem; align-items: center;">
			<label style="flex-shrink: 0" for="sys_display.category">
				${gs.getMessage("Select Category")}
			</label>
			<g:ui_reference style="width: 100%" name="category" id="category"
				table="sys_choice" query="name=incident^element=category^inactive=false"
				value="${jvar_choiceGR.getUniqueValue()}" displayValue="${jvar_choiceGR.getDisplayValue()}"
				onchange="updateSubcategory(this.value)"/>
		</div>
		<!-- Subcategory Reference Field -->
		<div class="form-group" style="display: flex; gap: 2rem; align-items: center;">
			<label style="flex-shrink: 0" for="sys_display.subcategory">
				${gs.getMessage("Select Subcategory")}
			</label>
			<g:ui_reference style="width: 100%" name="subcategory" id="subcategory"
				table="sys_choice" query="name=incident^element=subcategory^inactive=false^dependent_value=${jvar_choiceGR.getValue('value')}"
				value="" displayValue=""
				onchange=""/>
		</div>
		<!-- Footer action buttons -->
		<div align="right" class="modal-footer">
			<g:dialog_buttons_ok_cancel ok="return onSubmit()" ok_style_class="btn btn-primary"
				cancel="window.GlideModalForm.prototype.locate(this).destroy(); return false"
				ok_text="${gs.getMessage('Update')}" cancel_text="${gs.getMessage('Cancel')}" />
		</div>
	</g:ui_form>
	
</j:jelly>

Client Script:

function updateSubcategory(choiceID) {
	var gm = GlideModal.prototype.get("community_demo"); //This is the name of the UI page
	gm.setPreferenceAndReload(
		{ "choiceID": choiceID }
	);
}