UI page dependent reference field

[poornima2]

We do have client/matter number reference fields on a UI page. I am trying to set the filter for the matter field based on the client field selection. Is this possible? Thanks!

<g:ui_reference id="clientNum" name="clientNum" table="u_clients"   completer="AJAXTableCompleter" columns="u_client_name" order_by="name" onchange="xtest()"/>

<g:ui_reference id="matterNum" name="matterNum" table="u_matters"   completer="AJAXTableCompleter" columns="u_matter_name" order_by="name"/>

[MichaelZischeck]

according to the last comment in this thread, I thought: I am cleverer. I use a REPLACEME as query, getAttribute, replaceAll REPLACME with query.... and do this on both the field and the button.

turns out: something is missing, I get an empty list to select from. Type-ahead empty too...

yet: the attributes are identical to as when I hard code the lookup to a fix value of first field

[Richard Schmidt]

Hi everyone,

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 }
	);
}