Catalog Item Client Script for Dependent Drop Down Box

[Arijit Saikia]

Hi,

I am trying to create a Client Script for a Catalog Item where a Select Box choices are dependent on selection of other Select box options. What is the simplest way of achieving this? I was thinking of using OnChange client script.

The Select Box fields are:

1. Request Type

2. Access Extension

3. Contract Extension

Request type:
Onboard
Offboard

Access Extension

Extension Type: (if Request Type = Access Extension)
Contract Extension
Employee Extension

Contract Extension: (if Extension Type = Contract Extension)
Labour Hire
Contractor for Service
Consultant
Technology Service Partners

Contract Extension (if Extension Type = Employee Extension)
Non-ongoing

[Allen Andreas · Accepted solution]

Hi,

If these are choices directly on the variables within your catalog item, then yea, you can use an onChange client script and the add and removeOption methods mentioned here: https://servicenowguru.com/scripting/client-scripts-scripting/removing-disabling-choice-list-options... 

So an onChange for the request type, to then determine the extension type, then another onChange on the extension type to determine the contract extension.

I'd also recommend you showing "None" as well and use a UI Policy to only show the other select-boxes when the select-box before it has a selection. Also, keep in mind of people potentially switching their choices around, such as they pick a request type and extension type and contract extension...but then go back to request type and change that one. If they change it, you should clear the values in the following select-boxes and have them pick over again to prevent any false selections from being submitted.

[Allen Andreas · Accepted solution]

Hi,

If these are choices directly on the variables within your catalog item, then yea, you can use an onChange client script and the add and removeOption methods mentioned here: https://servicenowguru.com/scripting/client-scripts-scripting/removing-disabling-choice-list-options... 

So an onChange for the request type, to then determine the extension type, then another onChange on the extension type to determine the contract extension.

I'd also recommend you showing "None" as well and use a UI Policy to only show the other select-boxes when the select-box before it has a selection. Also, keep in mind of people potentially switching their choices around, such as they pick a request type and extension type and contract extension...but then go back to request type and change that one. If they change it, you should clear the values in the following select-boxes and have them pick over again to prevent any false selections from being submitted.

[Syedmd08 · Accepted solution]

1. Create an OnChange client script on the Request Type field.

2. In the script, use an if-else statement to check if the selected value is "Access Extension". If it is, enable the Access Extension field and disable the Contract Extension field. If it's not "Access Extension", disable the Access Extension field and enable the Contract Extension field.

3. Create another OnChange client script on the Extension Type field.

4. In the script, use an if-else statement to check if the selected value is "Contract Extension". If it is, enable the Contract Extension field and disable the Employee Extension field. If it's not "Contract Extension", disable the Contract Extension field and enable the Employee Extension field.

5. Save and test the catalog item.

Here's an example code snippet for the first client script:

function onChange(control, oldValue, newValue, isLoading) {
var accessExtensionField = g_form.getControl('access_extension_field');
var contractExtensionField = g_form.getControl('contract_extension_field');

if (newValue == 'Access Extension') {
accessExtensionField.setDisabled(false);
contractExtensionField.setDisabled(true);
} else {
accessExtensionField.setDisabled(true);
contractExtensionField.setDisabled(false);
}
}

And here's an example code snippet for the second client script:

function onChange(control, oldValue, newValue, isLoading) {
var contractExtensionField = g_form.getControl('contract_extension_field');
var employeeExtensionField = g_form.getControl('employee_extension_field');

if (newValue == 'Contract Extension') {
contractExtensionField.setDisabled(false);
employeeExtensionField.setDisabled(true);
} else {
contractExtensionField.setDisabled(true);
employeeExtensionField.setDisabled(false);
}
}

Note that you will need to replace "access_extension_field", "contract_extension_field", "employee_extension_field" with the actual names of your fields.

Please mark my reply as Helpful and/or Accept Solution, if applicable. Thanks!