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-24-2021

Hi Akshay,

Please try below.

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">
	<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" onchange="myfunc(category.value)">
									<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">
								<select name="sub_category" class="ig_select" id="sub_category" required="true">
									<option value = "" selected="selected"> --None-- </option> 
														</select>
							</div>
							
						</div>
			</div>
			
		</body>
		</html>
</j:jelly>

Client Script:

function myfunc(category) {
    var subCatElement = document.getElementById("sub_category");
    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);
    }
}

Hope it helps.

Regards,

Ujjawal

Akshay Bhaskar · ‎08-25-2021

Hi Ujjawal,

Thank you so much for your quick response. We're really close to cracking the answer to this question with your code. One thing that I observed is that your above code seems to be concatenating options under sub-category. Let me explain more visually -

Case 1: When my category is 'Inquire/Help' > Subcategory options need to be Antivirus, Email and Internet Application (as shown below)

Case 2: When I select the category as Software, ideally the only options that needs to be present are : Email & Operating System but in this case, the sub category is including options from Inquiry/help & Software.

Case 3: When I jump back to the previous option, the sub-category is repopulated with 1st category options dependent values and concatenated again.

Could you please guide me in resolving this issue? Thanks again for the previous response.

Regards,
Akshay B

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

Akshay Bhaskar · ‎08-25-2021

This client script is working just as expected. Thanks a lot again Ujjawal for your guidance.

Best Regards,
Akshay B