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

Glad it worked.

Akshay Bhaskar · ‎08-25-2021

Hi Ujjawal,

If I had to implement the same using GlideAjax and Script Include since GlideRecording in a client script is not the best practice, how can I alter your code?

Ujjawal Vishnoi · ‎08-25-2021

In UI pages you can use GlideRecord. It is not that bad compared to form. But if you still want to convert this GlideAjax then please create a new question and you can paste the link here. Sothat it can be helpful for others as well.

Akshay Bhaskar · ‎08-25-2021

Hi Ujjawal,

I've created another question - UI Page - Dependent Drop Down Lists using GlideAjax & Script Include

Ujjawal Vishnoi · ‎08-25-2021

I have provided you the solution.

Hope it helps