Setting choicelist values dynamically in ui page

[Jake Sadler]

I currently have this line of code in a ui page for category and sub category, how would I pass the category as a dependant field into the subcategory glidechoicelist method and refresh the choice list when the category value changes?

                       <g:evaluate var="jvar_not_important" expression="var choices = new GlideChoiceListGenerator('${sysparm_table}', 'category', '').get();" />

    <select id="category" class="form-control" name="category" aria-required="true">

        <g:options choiceList="${choices}" />

    </select> 

                       <g:evaluate var="jvar_not_important" expression="var choices = new GlideChoiceListGenerator('${sysparm_table}', 'sub_category', '${category}').get();" />

    <select id="sub_category" class="form-control" name="sub_category" aria-required="true">

        <g:options choiceList="${choices}" />

    </select>  

[Appanna M · Accepted solution]

Hello @Jake Sadler ,

if you want to refresh the choice list when the category value changes then you have to call onchange client script - the way we do for our onchange requirements using GlideAjax. Pass the onchange param to the select tag.

Create a client callable script include and call the script in ui page script.

UI Page Script:

<g:evaluate var="jvar_not_important" expression="var categoryChoices = new GlideChoiceListGenerator('${sysparm_table}', 'category', '').get();" />
<select id="category" class="form-control" name="category" aria-required="true" onchange="updateSubCategories()">
    <g:options choiceList="${categoryChoices}" />
</select> 

<g:evaluate var="jvar_not_important" expression="var subCategoryChoices = new GlideChoiceListGenerator('${sysparm_table}', 'sub_category', '').get();" />
<select id="sub_category" class="form-control" name="sub_category" aria-required="true">
    <g:options choiceList="${subCategoryChoices}" />
</select>

<script>
    function updateSubCategories() {
        var category = document.getElementById('category').value;
        
        // Make an AJAX call to get the subcategory choices based on the selected category
        var ga = new GlideAjax('GetSubCategories');
        ga.addParam('sysparm_name', 'getSubCategories');
        ga.addParam('sysparm_category', category);
        ga.getXMLAnswer(updateSubCategoryChoices);
    }

    function updateSubCategoryChoices(response) {
        var subCategorySelect = document.getElementById('sub_category');
        var choices = JSON.parse(response);

        // Clear the current subcategory choices
        subCategorySelect.options.length = 0;

        // Populate the subcategory choices based on the response
        for (var i = 0; i < choices.length; i++) {
            var option = document.createElement('option');
            option.value = choices[i].value;
            option.text = choices[i].label;
            subCategorySelect.add(option);
        }
    }
</script>

Script Include: Client Callable 

var GetSubCategories = Class.create();
GetSubCategories.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    getSubCategories: function() {
        var category = this.getParameter('sysparm_category');
        var subCategoryChoices = new GlideChoiceListGenerator('YOUR_TABLE_NAME', 'sub_category', category).get();

        var choices = [];
        while (subCategoryChoices.next()) {
            choices.push({
                value: subCategoryChoices.getValue('value'),
                label: subCategoryChoices.getValue('label')
            });
        }
        return JSON.stringify(choices);
    }
});

Please Mark My Answer as Helpful and Accept as Solution, if you find this article helpful or resolves your issue.