Catalog Client Script on select box field

[Rooma1]

Hi All,

I am trying to create a Catalog Client Script where a Select Box choices are dependent on selection of other Select box options. What is the simplest way of achieving this? I have used OnChange client script but my code isn't working properly.

The Select Box fields are:

1. Exception Type

2. Which Security or Quality gate to select

Exception Type:

None

Quality Gate

Security Gate

Which Security or Quality gate to select: (if Exception Type = Quality Gate)

Code Coverage

Which Security or Quality gate to select: (if Exception Type = Security Gate)

Policy Scan

Pipeline Scan

Sandbox Scan

Which Security or Quality gate to select: (if Exception Type = None)

None (It should clear the value and change to None)

Can someone please help as i am new to coding?

[Robbie]

Hi @Rooma1,

(Updated)

This is easily achieved leveraging the g_form methods within an onChange Client Script. Methods to use: 

- g_form.clearOptions()

- g_form.addOption()

- g_form.removeOption()

This is a very common request and use case. So as to not reinvent the wheel, please see the below link:

https://www.servicenow.com/community/developer-forum/select-box-choices-dependant-on-another-select-...

To help others (or for me to help you more directly), please mark this response correct by clicking on Accept as Solution and/or Kudos.

Thanks, Robbie

[Satishkumar B · Accepted solution]

Hi @Rooma1 

Certainly! Here's a concise version of the resolution for creating a Catalog Client Script in ServiceNow to dynamically populate a Select Box based on another Select Box's selection:

1. Create a Catalog Client Script:
- Navigate to `Service Catalog` > `Catalog Client Scripts`.
- Create a new script targeting your catalog item form.

2. Script Content:

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

    var exceptionType = g_form.getValue('exception_type');
    var gateField = g_form.getControl('which_gate');

    // Clear gate field if exception type is 'None'
    if (exceptionType === 'None') {
        gateField.value = '';
        return;
    }

    // Define options based on exception type
    var gateOptions = [];
    switch (exceptionType) {
        case 'Quality Gate':
            gateOptions = ['Code Coverage'];
            break;
        case 'Security Gate':
            gateOptions = ['Policy Scan', 'Pipeline Scan', 'Sandbox Scan'];
            break;
        default:
            break;
    }

    // Set options for the gate field
    gateField.options.length = 0; // Clear existing options
    gateOptions.forEach(function(option) {
        gateField.options[gateField.options.length] = new Option(option, option);
    });
}

- Replace `'exception_type'` and `'which_gate'` with your actual field names.
- Ensure the script is associated correctly with your catalog item form in ServiceNow.
- Test thoroughly to verify that the options in `which_gate` update correctly based on selections in `exception_type`.

This script changes in `exception_type`, updates `which_gate` dynamically based on the selected option, and clears `which_gate` if `exception_type` is set to 'None'. Adjust field names and logic as per your specific requirements and field configurations in ServiceNow.

--------------------------------------------------------------------------------------------------------------------
If my response proves useful, please indicate its helpfulness by selecting "Accept as Solution" and " Helpful." This action benefits both the community and me.

[Rooma1]

Hi Satish,

Thanks for your quick solution. I understood the code but I didn't understand the last part of it.

// Set options for the gate field
    gateField.options.length = 0; // Clear existing options
    gateOptions.forEach(function(option) {
        gateField.options[gateField.options.length] = new Option(option, option);
    });

Can you please explain why this is being used?

Thanks,

Rooma 

[Satishkumar B]

Hi @Rooma1 

The code segment gateField.options.length = 0; clears any existing options in the gateField. Then, using forEach, it iterates over gateOptions to dynamically populate gateField with new options based on exceptionType. Each option is created using new Option(option, option) and added to gateField. This approach ensures gateField displays options relevant to the selected exceptionType effectively.