How to make field Dependent in UI Page .

[Nitish Saini]

I have a requirement on UI Page. There is three fields like Category, Subcategory and Item. I want the dependency between these fields like Subcategory should be dependent on Category and Item should be dependent on Subcategory. I have tried all the ways which is available on Service Now Community but not able to execute..!!

Thank You in Advance.

[Saurav11]

Hello,

Please check the below article:-

https://www.servicenow.com/community/itom-forum/how-to-make-one-ui-reference-field-dependent-on-anot...

Please mark my answer as correct based on Impact.

[Aman Kumar S]

Hi @Nitish Saini ,

Please check below post:

UI Page - Dependent drop down lists 

[Richard Schmidt]

Hi Nitish,

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