Hide Dependent Fields with UI Policies

[jramirez1]

I have a select box field A with choices: x, y, z.

When the selected choice for field A is option "x", field B should be enabled and mandatory. Field B is a select box with choices: u, v, w.

When the selected choice for field B is option "w", field C should be enabled. If the selected choice for field A changes to "y" or "z", then fields B and C should be hidden.

I created one UI policy, #1, with "reverse if false" checked in, which validates when field A has a value of "x", then field B is set to mandatory "true" and visible "true".

After that, I have another UI policy, #2, with "reverse if false" checked in, which validates when field B has a value of "u", then field C is set to mandatory "true" and visible "true".

UI policy #1 is working as expected; however, UI policy #2 does not. When field A is "x" and field B is "w", then field C is mandatory and visible, but as soon as the field A value changes, field B gets hidden, and field C remains visible.

Can someone kindly advise on why this does not work? Is there a better approach for this requirement?

I have attached some screenshots of what I have.

[SHARANsnow7]

Hii @jramirez1 

It seems like the issue is with the order of your UI policies. When you change the value of field A, UI policy #1 is triggered and hides field B, but UI policy #2 is not triggered to hide field C because its condition is based on the value of field B, which is now hidden and therefore not evaluated.

[Vengateshwaran]

Hi @jramirez1 ,

You can achieve your requirement by writing 2 on-change client scripts. I have attached the code screenshot below refer to it. 

 Help others to find a correct solution by marking the appropriate response as correct answer and helpful.

[Vengateshwaran]

Hi @jramirez1 ,

I have made some changes to the UI-policy. I have attached the screenshot below.

Help others to find a correct solution by marking the appropriate response as correct answer and helpful.

[jramirez1 · Accepted solution]

Thanks to everyone for your suggestions. They have been very helpful in achieving this requirement.

UI policy #1 was not well thought out because I was clearing the value of the B field only when the value of A was being set to X. Instead of this, what I needed was to clear this value when A was not X. By doing this, when I change the value of A to Y or Z, the value of B gets cleared out, which then triggers the second UI policy that hides C because B is no longer X.

UI policy #1 - Hide/show Field B

UI policy #2 - Hide/show Field C

In catalog item

1)

2)