Dynamically Hide Sub Category field if there are no options to select

[jonathangilbert]

Good Morning

 I would like to add logic that the subcategory field is hidden on the incident form if there are no options configured to select.

For example:- 

If the Category is "WINDOWS" and we have configured "Update Required" or "Restart" as  subcategory options then the subcategory should be visible on the form.

If we had another Category "JIRA", but we have not added any subcategory options ( as they are not required), we would like the Subcategory field to be hidden.

I thought about using a ui policy, but that will not work as the will only work if a actual value is entered.

Any Ideas?

[palanikumar]

You can use the below onload client script

function onLoad() {
  var subcategory = g_form.getElement('subcategory');
  if (subcategory.options.length == 0) {
     g_form.setDisplay('subcategory',false);
  }
}

[jonathangilbert]

Morning 

Thankyou for the quick response, but that does not work, the subcategory is still visible if it has no options

[palanikumar]

I think SubCategory has None option as well. So you can check for length <=1

function onLoad() {
  var subcategory = g_form.getElement('subcategory');
  if (subcategory.options.length <= 1) {
     g_form.setDisplay('subcategory',false);
  }
}

[vignesh parthib · Accepted solution]

Hi @jonathangilbert 

I hope yo may need 2 script one for Onchange and onLoad

Create an onChange Client Script

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    // Clear the current Subcategory
    g_form.setValue('subcategory', '');

    // Delay execution to allow subcategory options to load
    setTimeout(function () {
        var subcatControl = g_form.getControl('subcategory');

        if (!subcatControl) return;

        var options = subcatControl.options;
        var optionCount = 0;

        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            // Count only non-empty values (excluding --None-- or empty)
            if (opt.value && opt.value.trim() !== '') {
                optionCount++;
            }
        }

        if (optionCount === 0) {
            g_form.setDisplay('subcategory', false);
        } else {
            g_form.setDisplay('subcategory', true);
        }

    }, 100); // Delay to wait for options to load
}

Also Handle onLoad:

function onLoad() {
    var category = g_form.getValue('category');

    if (!category) return;

    setTimeout(function () {
        var subcatControl = g_form.getControl('subcategory');

        if (!subcatControl) return;

        var options = subcatControl.options;
        var optionCount = 0;

        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            if (opt.value && opt.value.trim() !== '') {
                optionCount++;
            }
        }

        if (optionCount === 0) {
            g_form.setDisplay('subcategory', false);
        } else {
            g_form.setDisplay('subcategory', true);
        }
    }, 100);
}

Thanks,
Vignesh
"If this solution resolves your issue, kindly mark it as correct."