How to add a conditional variable inside a catalog form

[Jim12]

How to add a conditional variable inside a catalog form?

Scenario

I need to add one radio button called as "Animal"in a catalog form. If user clicks that, then additional 4 further radio buttons appears as "Dog", "Cat" and "Lion" along with second row of radio button for Color as "Brown", "Grey" and "Red" and next row with a drop down. Please refer attachment.

Please help to explain how to achieve this.

Thanks in advance

Jim

[Medi C · Accepted solution]

Hi@Jim12, 

Usage of Multiple Choice variable type is when you have more than 1 choice. As per your use case, the first variable type of request has only 1 choice (animal). Therefor, it will be always auto selected.

What you can do, is to include none on your first variable:

Then, create a UI Policy:

And you can add UI Policy Actions for the 3 variables as per the following example:

Results:

[Jim12]

Thank you for suggestion. I used your suggestion with a difference that in UI policy, condition was IS instead of IS NOT.

Thank you.

Jim

[Shivalika]

Hello @Jim12 

Please use below Client scripts (onload and onChange) if your form structure is already done and you are onto configuration settings - 

function onLoad() {

    g_form.setDisplay('Animal_Type', false);

    g_form.setDisplay('Animal_Color', false);

    g_form.setDisplay('Additional_Options', false);

}

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

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

        return;

    }

    if (control === 'variables.Animal') {

        if (newValue === 'Yes') {

            g_form.setDisplay('Animal_Type', true);

        } else {

            g_form.setDisplay('Animal_Type', false);

            g_form.setDisplay('Animal_Color', false);

            g_form.setDisplay('Additional_Options', false);

        }

    }

    if (control === 'variables.Animal_Type') {

        if (newValue) {

            g_form.setDisplay('Animal_Color', true);

        } else {

            g_form.setDisplay('Animal_Color', false);

            g_form.setDisplay('Additional_Options', false);

        }

    }

    if (control === 'variables.Animal_Color') {

        if (newValue) {

            g_form.setDisplay('Additional_Options', true);

        } else {

            g_form.setDisplay('Additional_Options', false);

        }

    }

}

Please mark answer as helpful and accept as solution if it helped you in anyway. 

Regards, 

Shivalika 

LinkedIn - https://www.linkedin.com/in/shivalika-gupta-540346194

YouTube - https://youtube.com/playlist?list=PLsHuNzTdkE5Cn4PyS7HdV0Vg8JsfdgQlA&si=CYM7gWmk6Dov7uQa