Dynamically add/remove or replace control

[Muthu]

Hi Team,
Wondering how can we dynamically add/remove or replace a control based on value in a dropdown.

For example, in this image if user select "East" in dropdown i want to show "Officers East" control in the place "B". If user changes the dropdown to "West", then at the same place "B", i want to show "Officers West" control. (Not in next column or row).

Thanks,
Muthu

[mnikitina]

Hello @Muthu,

You can show/hide elements on the form dynamically using the code:

fd.spRendered(function() {
    if(fd.field('Title').value = 'Hide') {
        $('.element-to-hide').hide();
    }
});

You can find more information in the documentation here.

In your case, to show/hide fields dynamically and keep the layout, you need to use a Grid container.
Add two Grid containers and fields to the form like this:

Select the field that you want to show/hide on the form and give its cell a CSS class:

Then, you can use the code from the documentation.

[Muthu]

Thanks @mnikitina. It worked