Need to display field choices depending on selection of other two field choices

[K S R]

Field 1: choice1, choice2

Field2: choice 1, choice2............choice10

Field3: choice1 , choice2.................................choice 40.

Depending on selection of first two field choices, third filed choices need to display.

How to achieve this, I am unable to do through UI policy

[dgarad]

Create an onChange client script

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

    // Get the current values of both controlling fields
    var parent1 = g_form.getValue('first_parent_field');
    var parent2 = g_form.getValue('second_parent_field');

    // Clear existing choices on the target choice field
    g_form.clearOptions('target_choice_field');

    // Add back the default empty/none choice
    g_form.addOption('target_choice_field', '', '-- None --');

    // Evaluate conditions based on both selections
    if (parent1 === 'choice_a' && parent2 === 'choice_x') {
        g_form.addOption('target_choice_field', 'val1', 'Display Label 1');
        g_form.addOption('target_choice_field', 'val2', 'Display Label 2');
    } else if (parent1 === 'choice_b') {
        g_form.addOption('target_choice_field', 'val3', 'Display Label 3');
    }
}

[Alka_Chaudhary]

Hi @K S R ,

A UI Policy is not the right solution for this requirement because it cannot dynamically filter the choices of one choice field based on the selected values of two other choice fields.

The recommended approach is to use onChange Client Scripts on both u_field_1 and u_field_2.

Both Client Scripts can use the same logic:

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

    updateField3();
}

function updateField3() {

    var field1 = g_form.getValue('u_field_1');
    var field2 = g_form.getValue('u_field_2');

    // Remove existing choices
    g_form.clearOptions('u_field_3');

    // Wait until both fields have a value
    if (!field1 || !field2)
        return;

    // A + X
    if (field1 == 'a' && field2 == 'x') {
        g_form.addOption('u_field_3', 'choice1', 'Choice 1');
        g_form.addOption('u_field_3', 'choice2', 'Choice 2');
        g_form.addOption('u_field_3', 'choice3', 'Choice 3');
    }

    // A + Y
    else if (field1 == 'a' && field2 == 'y') {
        g_form.addOption('u_field_3', 'choice4', 'Choice 4');
        g_form.addOption('u_field_3', 'choice5', 'Choice 5');
    }

    // B + X
    else if (field1 == 'b' && field2 == 'x') {
        g_form.addOption('u_field_3', 'choice6', 'Choice 6');
        g_form.addOption('u_field_3', 'choice7', 'Choice 7');
    }

    // B + Y
    else if (field1 == 'b' && field2 == 'y') {
        g_form.addOption('u_field_3', 'choice8', 'Choice 8');
        g_form.addOption('u_field_3', 'choice9', 'Choice 9');
        g_form.addOption('u_field_3', 'choice10', 'Choice 10');
    }
}

For example, if:

• u_field_1 has values: A, B

• u_field_2 has values: X, Y

Then the behaviour can be:

u_field_1	u_field_2	u_field_3 Options
A	X	Choice 1, Choice 2, Choice 3
A	Y	Choice 4, Choice 5
B	X	Choice 6, Choice 7
B	Y	Choice 8, Choice 9, Choice 10

Since the third field depends on both fields, the logic should execute whenever either u_field_1 or u_field_2 changes. Also, make sure to check that both fields have values before populating u_field_3; otherwise, simply return without adding any choices.

If the number of combinations is large (for example, 10 values in u_field_1, 10 values in u_field_2, and 40+ possible choices in u_field_3), consider storing the mappings in a custom table and using GlideAjax to fetch the valid choices dynamically instead of hardcoding all combinations.

If this solution helps you then, mark it as ✔️ accepted solution ‌‌and give thumbs up 👍 !

Thanks Alka

[Ankur Bawiskar]

@K S R 

please use 2 onChange client scripts i.e. 1 on Field 1 and another on Field 2

what did you start with and where are you stuck?