Show/Hide choices of field based on selection of another field choice on portal form

[Srikanth99]

Hi Developers, 
I need one client script for below requirement.

1. On Portal If we select "Category" -- "Strategic" -- > it should populates "Type" values are "Project" and "Enhancement".

2. On Portal If we select "Category" -- "operational" -- > it should populates "Type" values are "Change" and "Defect".

please help me with complete Catalog Client script.

Thanks in Advance.

[-O-]

This can and should be done using reference qualifier. Of course the lookup version of the select box should be used as variable type.

[ryan_pope]

If these are being mapped to a "category" and "type" field (based on the values you're presenting, it looks like you might be creating a demand with this record producer), you can follow these articles:

ServiceNow Record Producer Variable Dependent Variable | Concurrency - Concurrency
Using Category and Subcategory on record producers | Pathways Consulting Group (pathwayscg.com)

If not, or you need something more complex, I've had success with this in the past:

There are a couple of moving parts in order to get dependent variables on a catalog item. This approach will walk through how to do so where the second variable is a select box, lookup select box or reference variable.

Variables Requirements:

There is a dependency on their being some mechanism for the first variable value being reference-able in relation to the second.

    Ex1: Variable 1: Location reference variable, Variable 2: Building reference variable, where building records have a reference to the Location table.

    Ex2: Variable 1: Select box of categories, Variable 2: Lookup select box of subcategories. (My approach for these is, rather than add them a select box using the question_choice table, I add them directly to the sys_choice table, which has a field OOB for "Dependent Value". The "Lookup value field" should be "Sys ID", and the "Lookup label field(s)" should be "label". For each subcategory, the dependent value should be the *value* (not label) of the corresponding category).

                

Dynamic Filtering Setup:

1. Write a script include function that takes a parameter (which will be the first variable's value) to query the reference table of the second variable, and return a stringified encoded query based on that query.

Ex:

var VarDependencyUtils = Class.create();

VarDependencyUtils.prototype = {

    initialize: function() {

    },

    catSubCatFilter: function(categoryValue) {

        var choices = new GlideRecord('sys_choice');

        choices.addQuery('name', 'question_choice');

        choices.addQuery('element', 'subcategory');

        choices.addQuery('dependent_value', categoryValue);

        choices.query();

        var choicesArr = [];

        while (choices.next()){

            choicesArr.push(choices.sys_id + '');

        }

        var returnQuery = 'sys_idIN' + choicesArr.join();

        return returnQuery;

    },

    type: 'VarDependencyUtils'

};

2. We need to tell the system that the first variable has a dependency on it. To do this, in the "Default Value" tab (at least this is usually where it is), we need to add the following to the "Variable attributes" field:

ref_qual_elements=subcategory

3. For the second variable, we also need to tell the system that this variable is dependent on the first. Following the same navigation as the previous step, add the following to the "Variable attributes" field:

ref_qual_elements=category

4. Finally, in the "Type Specifications" tab (again, this is usually where this field is), we need to add the following to the "Reference qual" field:

javascript:new VarDependencyUtils().catSubCatFilter(current.variables.category);

Voila! You now have a variable that is dependent on another! 

[Anil Lande]

Hi,

Please use below logic in OnChange client script which should run on Change of Categor.

if(newValue=='strategic'){
g_form.clearOptions('type');
g_form.addOption('type','project');
g_form.addOption('type','enhancement');

}else if(newValue=='operational'){
g_form.clearOptions('type');
g_form.addOption('type','change');
g_form.addOption('type','defect');

}

Note: Please use variable values and choice values as per your configuration.

Thanks,
Anil Lande

[Saurav11]

Hello,

If you have created the choices please use the below onchange catalog client on category field.

var cat=g_form.getValue('category');
if(cat=='strategic')
{
g_form.removeOption('type','change');
g_form.removeOption('type','defect');
}
else if(cat=='operational')
{
g_form.removeOption('type','project');
g_form.removeOption('type','enhancement');

}

Please mark answer correct/helpful based on Impact.