Based on selection of A field B field should population (dropdown values come)

[sahana1998]

for catalog item

I have created catalog item , under catalog  item created A and B fields 

How implement based on the selection A field values(drop down)  B field values should come.

[Ashish Parab]

@sahana1998, 

Create an onChange client script as below:

Type - onChange

UI Type - All
Variable Name - Field 1 (select variable name as per your requirement)

Script -

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        g_form.addOption('Field B', 'A option', 'A option');
        g_form.addOption('Field B', 'B option', 'B option');
        g_form.addOption('Field B', 'C option', 'C option');
        g_form.addOption('Field B', 'D option', 'D option');
        g_form.addOption('Field B', 'E option', 'E option');
        // you can add multiple options as per your requirement

        return;
    }

    if (newValue == 'Value 1') {
		// remove D and E options
        g_form.removeOption('Field B', 'D option', 'D option');
        g_form.removeOption('Field B', 'E option', 'E option');

		// add A, B and C options
        g_form.addOption('Field B', 'A option', 'A option');
        g_form.addOption('Field B', 'B option', 'B option');
        g_form.addOption('Field B', 'C option', 'C option');
    }

    if (newValue == 'Value 2') {
        g_form.removeOption('Field B', 'A option', 'A option');
        g_form.removeOption('Field B', 'B option', 'B option');
        g_form.removeOption('Field B', 'C option', 'C option');

        g_form.addOption('Field B', 'D option', 'D option');
        g_form.addOption('Field B', 'E option', 'E option');
    }
}

Please modify the script to match your variable names and values. Let me know if it doesn’t work.

Please mark this as "correct" and "helpful" if you feel this answer helped you in anyway.

Thanks and Regards,

Ashish

[Juhi Poddar]

Hello @sahana1998 

This requirement can be achieve by 2 methods:

• Ui policy
• Catalog Client script

Method1:  Implement Using a UI Policy:

1. Create a UI Policy:

   • Navigate to System UI > UI Policies.
   • Click New to create a new UI Policy.
   • Set the Table to your catalog item.
   • In the Conditions field, specify the condition for Field A (e.g., Field A is Value1).

2. Add UI Policy Actions:

   • Under the UI Policy Actions tab, click New.
   • Select Field B as the field for the action.
   • In the Type field, select Set Choices.

3. Set Choices for Field B:

   • In the Choices field, define the values for Field B based on the selected value of Field A:
     • For Value1: Add A, B, C.
     • For Value2: Add D, E, F.
     • For Value3: Add G.

4. Repeat for Other Values:

   • Create additional UI Policies for each value of Field A (e.g., Field A is Value2 or Field A is Value3).
   • Set the corresponding choices for Field B in each UI Policy.

5. Ensure UI Policy Execution Order:

   • If multiple UI Policies apply to the same catalog item, ensure they execute in the correct order by adjusting the Order field.
6. This method is user-friendly and does not require scripting.
7. Each Field A value requires a separate UI Policy.
8. If Field A changes dynamically, the changes to Field B values will apply immediately.

Method 2: Catalog Client Script

1. Create a Catalog Client Script:

   • Navigate to the Catalog Item where the fields are configured.
   • Go to 'Client Scripts' and create a new Client Script.

2. Script Configuration:

   • Type: onChange
   • Field Name: Field A
   • Script:

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

    // Define the values for Field B based on the selected Field A value
    var fieldBOptions = {
        'Value1': ['A', 'B', 'C'], // Field A = Value1 → Field B options
        'Value2': ['D', 'E', 'F'], // Field A = Value2 → Field B options
        'Value3': ['G']            // Field A = Value3 → Field B options
    };

    // Get the corresponding Field B options for the selected Field A value
    var selectedOptions = fieldBOptions[newValue] || [];

    // Clear existing options in Field B
    g_form.clearOptions('field_b');

    // Add new options to Field B
    selectedOptions.forEach(function(option) {
        g_form.addOption('field_b', option, option); // Use the same value for both value and label
    });
}
​

Hope this helps!

"If you found my answer helpful, please give it a like and mark it as the "accepted solution". It helps others find the solution more easily and supports the community!"

Thank You
Juhi Poddar

[sahana1998]

Hi @Juhi Poddar 

for method1:

for Second step i couldn't find "Type field, select Set Choices."