UI Page - Dependent drop down lists

Akshay Bhaskar · ‎08-24-2021

Hi Everyone. I hope you're all keeping well?

I have a requirement to have 2 drop-downs on a UI Page. To make it simple, let us consider our OOB Incident form.

We have two fields - Category and Sub-category. In the Classic UI version, when a value within the category changes, different values in the sub-category field are populated due to the dependency. Could someone please help me implement the same functionality in a UI Page?

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<html>
<head>
</head>
		<body>
			<div class="main_container">
									<div class="row">
										<div class="col-sm-2"><p>Category</p></div>
							<div class="col-sm-3"><g:evaluate> var catCode = new GlideRecord('sys_choice');
									catCode.addEncodedQuery('element=category^name=incident^inactive=false');
									catCode.query(); 
								  </g:evaluate>
								<select name="category" class="ig_select" id="category" required="true">
									<option value = ""> --None-- </option> 
								  <j:while test = "${catCode.next()}"> 
										  <option value = "${catCode.value}"> ${catCode.label} </option> 
									  </j:while> 
								</select>
							</div>
				</div>
				<div class="row">
					<div class="col-sm-2"><p>Sub-category</p></div>	
					<div class="col-sm-3"><g:evaluate> var subCategory = new GlideRecord('sys_choice');
									subCategory.addEncodedQuery('element=subcategory^name=incident^inactive=false');
									subCategory.query(); 
								  </g:evaluate>
								<select name="sub_category" class="ig_select" id="sub_category" required="true">
									<option value = ""> --None-- </option> 
								  <j:while test = "${subCategory.next()}"> 
										  <option value = "${subCategory.value}"> ${subCategory.label} </option> 
									  </j:while> 
								</select>
							</div>
							
						</div>
				
				
				
			</div>
			
		</body>
		</html>
</j:jelly>

And the UI Page currently looks like this -

But I'd like to have the sub-category values populated based on the value within the category field. Could someone please provide some guidance on this?

Ujjawal Vishnoi · ‎08-25-2021

Yes Just realized, need to add 1 extra line in client script.

Please see below.

function myfunc(category) {
    var subCatElement = document.getElementById("sub_category");
	subCatElement.length = 1;
    var subCategory = new GlideRecord('sys_choice');
    subCategory.addQuery("element", "subcategory");
    subCategory.addQuery("name", "incident");
    subCategory.addQuery("inactive", false);
    subCategory.addQuery("dependent_value", category);
    subCategory.query();
    while (subCategory.next()) {
        subCatElement.options[subCatElement.options.length] = new Option(subCategory.label, subCategory.value);
    }
}

View solution in original post

Ujjawal Vishnoi · ‎08-25-2021

I guess by mistake you have uncheck the correct answer for this question. You have already been marked it correct.

Akshay Bhaskar · ‎08-25-2021

HI Ujjawal,

I really appreciate your help in resolving these queries of mine. Yes, I think I unchecked the answer by mistake but I've reverted that. Also, the answer that you've provided is working as required.

R9 · ‎05-28-2024

hi, I followed your solution but the value of category is not getting picked up for me, what am I doing wrong? This is what I am using-

<g:evaluate>

var items = ["None", "Hardware", "Inquiry/Help", "Software","Network","Facility" , "Event", "Communications"];

</g:evaluate>

<h5>**Category :

<j:forEach var="jvar_item" items="${items}" >

</j:forEach>

</select></h5>