Catalog client script to control which variable choice options are displayed

[jonathangilbert]

Hi

I wish to control which choice options are displayed in a Variable based on the response of another variable. I have seen on the forums it is controlled by a On Change client script using addOption, or removeOption.

I have created the client script which works when the first variable value is changed, the second variable only displays the choice options I configured, however if the value of the first variable is changed again, the second variable choice options are incorrect, it does not refresh.

What am I missing in my script to ensure options are always updated based on variable 1 being changed. Here is my script

function onChange(control, oldValue, newValue, isLoading) {

   if (isLoading || newValue == '') {

      return;

   }

if (newValue == 'Default') {// shows all choice options except the admin role 13587b75-c4d1-4a07-8641-9d00693b1f65

g_form.removeOption('which_role_s_do_you_require', '13587b75-c4d1-4a07-8641-9d00693b1f65');

}

 if (newValue == 'Privileged') {// only displays the admin role 13587b75-c4d1-4a07-8641-9d00693b1f65

g_form.removeOption('which_role_s_do_you_require', 'd74c4943-4347-4340-9a61-fc85ccce3ef7');

g_form.removeOption('which_role_s_do_you_require', 'a3f647e5-59b4-43c3-b05d-48ec2604d692');

g_form.removeOption('which_role_s_do_you_require', '26687442-3860-419c-bc96-4069bcca3dc1');

g_form.removeOption('which_role_s_do_you_require', '7de36bf0-828a-48a8-a31e-675f1e3983c7');

g_form.removeOption('which_role_s_do_you_require', 'e69af349-fb1b-4cf3-becd-d9e6a8ae8bd4');

g_form.removeOption('which_role_s_do_you_require', 'ae557f87-0a3d-47f0-91de-668de79e31e5');

g_form.removeOption('which_role_s_do_you_require', 'd5baf8dd-0fee-4d76-82c0-f884c198b4dd');

g_form.removeOption('which_role_s_do_you_require', '43babf7d-6eb0-42e4-9dcd-95f19e93b922');

g_form.removeOption('which_role_s_do_you_require', 'd63088a0-335b-41ba-8450-bfd1c70ef85b');

g_form.removeOption('which_role_s_do_you_require', '2d9202df-3977-493f-b354-ff9e05396583');

g_form.removeOption('which_role_s_do_you_require', '5fbeb849-d34c-4a0b-9d28-fa23a2c41c57');

g_form.removeOption('which_role_s_do_you_require', '82d368ef-bf79-4dd0-af2f-d8c68b2b1ff6');

}}

[Ankur Bawiskar]

@jonathangilbert 

update as this

-> Store the complete list of choices once, then filter it based on Variable 1: 

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

    var roleVariable = 'which_role_s_do_you_require';
    var adminRole = '13587b75-c4d1-4a07-8641-9d00693b1f65';

    // Use the actual value and label of every choice
    var allRoles = [
        {
            value: adminRole,
            label: 'Admin'
        },
        {
            value: 'd74c4943-4347-4340-9a61-fc85ccce3ef7',
            label: 'Role 1'
        },
        {
            value: 'a3f647e5-59b4-43c3-b05d-48ec2604d692',
            label: 'Role 2'
        },
        {
            value: '26687442-3860-419c-bc96-4069bcca3dc1',
            label: 'Role 3'
        },
        {
            value: '7de36bf0-828a-48a8-a31e-675f1e3983c7',
            label: 'Role 4'
        },
        {
            value: 'e69af349-fb1b-4cf3-becd-d9e6a8ae8bd4',
            label: 'Role 5'
        },
        {
            value: 'ae557f87-0a3d-47f0-91de-668de79e31e5',
            label: 'Role 6'
        },
        {
            value: 'd5baf8dd-0fee-4d76-82c0-f884c198b4dd',
            label: 'Role 7'
        },
        {
            value: '43babf7d-6eb0-42e4-9dcd-95f19e93b922',
            label: 'Role 8'
        },
        {
            value: 'd63088a0-335b-41ba-8450-bfd1c70ef85b',
            label: 'Role 9'
        },
        {
            value: '2d9202df-3977-493f-b354-ff9e05396583',
            label: 'Role 10'
        },
        {
            value: '5fbeb849-d34c-4a0b-9d28-fa23a2c41c57',
            label: 'Role 11'
        },
        {
            value: '82d368ef-bf79-4dd0-af2f-d8c68b2b1ff6',
            label: 'Role 12'
        }
    ];

    // Remove all currently displayed choices
    g_form.clearOptions(roleVariable);

    // Re-add the choices appropriate for the selected access type
    for (var i = 0; i < allRoles.length; i++) {
        var role = allRoles[i];

        if (newValue == 'Privileged' && role.value != adminRole) {
            continue;
        }

        if (newValue == 'Default' && role.value == adminRole) {
            continue;
        }

        g_form.addOption(roleVariable, role.value, role.label);
    }

    // Clear a previous selection if it is no longer valid
    var selectedRole = g_form.getValue(roleVariable);

    if (newValue == 'Default' && selectedRole == adminRole) {
        g_form.clearValue(roleVariable);
    }

    if (newValue == 'Privileged' && selectedRole != adminRole) {
        g_form.clearValue(roleVariable);
    }
}

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[jonathangilbert]

Morning Ankur, thankyou once again, but I do have an issue. With my original script when the script first ran, it would not select an option, the variable was blank and also highlighted as being mandatory. However with your revised script, yes the choice options are now getting updated, but the variable is getting pre populated with an option, so the mandatory flag isnt working. The variable needs to be empty for the use to select which of the refined choice options to select

[Dinesh Chilaka]

Hi @jonathangilbert ,

The issue is that g_form.removeOption() removes the choices from the variable, but when Variable 1 changes again, those removed choices are not automatically restored.

You need to reset/rebuild the choice options whenever Variable 1 changes. Use g_form.clearOptions() and then add the required options again with g_form.addOption() based on the new value.
If my response helped, mark it as helpful and accept the solution.
Thanks,

Dinesh

Also, clear the selected value of Variable 2 when Variable 1 changes to prevent an invalid previously selected option from remaining.

[jonathangilbert]

Hi Dinesh, thanks for your script, but it still did not work, this is what I changed it too

function onChange(control, oldValue, newValue, isLoading) {

   if (isLoading || newValue == '') {

      return;

   }

 if (newValue == 'Default') {// shows all choice options except the admin role 13587b75-c4d1-4a07-8641-9d00693b1f65

g_form.clearOptions();

g_form.addOption('which_role_s_do_you_require', 'd74c4943-4347-4340-9a61-fc85ccce3ef7');

g_form.addOption('which_role_s_do_you_require', 'a3f647e5-59b4-43c3-b05d-48ec2604d692');

g_form.addOption('which_role_s_do_you_require', '26687442-3860-419c-bc96-4069bcca3dc1');

g_form.addOption('which_role_s_do_you_require', '7de36bf0-828a-48a8-a31e-675f1e3983c7');

g_form.addOption('which_role_s_do_you_require', 'e69af349-fb1b-4cf3-becd-d9e6a8ae8bd4');

g_form.addOption('which_role_s_do_you_require', 'ae557f87-0a3d-47f0-91de-668de79e31e5');

g_form.addOption('which_role_s_do_you_require', 'd5baf8dd-0fee-4d76-82c0-f884c198b4dd');

g_form.addOption('which_role_s_do_you_require', '43babf7d-6eb0-42e4-9dcd-95f19e93b922');

g_form.addOption('which_role_s_do_you_require', 'd63088a0-335b-41ba-8450-bfd1c70ef85b');

g_form.addOption('which_role_s_do_you_require', '2d9202df-3977-493f-b354-ff9e05396583');

g_form.addOption('which_role_s_do_you_require', '5fbeb849-d34c-4a0b-9d28-fa23a2c41c57');

g_form.addOption('which_role_s_do_you_require', '82d368ef-bf79-4dd0-af2f-d8c68b2b1ff6');

}

 if (newValue == 'Privileged') {// only displays the admin role 13587b75-c4d1-4a07-8641-9d00693b1f65

g_form.clearOptions();

g_form.addOption('which_role_s_do_you_require', '13587b75-c4d1-4a07-8641-9d00693b1f65');

}}