Unable to hide field.

[Puneet4418]

Hi,

we have 3 choice fields in a catalog item.

if we select value "X" in field 1, then field 2 should visible and if we select value "Y" in field 2, field 3 should visible. for this I have created a UI policy and its working fine.

Now, when I am changing the value of Field 1, Field 2 is not visible but Field 3 is still visible.

How can I fix this issue?

[Najmuddin Mohd]

Hi @Puneet4418 ,
The cause is in the dependency of Field 1  and Field 3 field.

You have written Field 2 is dependent on Field 1, and Field 3 is dependent on Field 2
You should also write one more, Field 3 is also dependent on Field 1.

If this information helps you, Kindly mark it as Helpful and Accept the solution.
Regards,
Najmuddin.

[Najmuddin Mohd · Accepted solution]

For example,
In the below example,
On selection of Country, display state, 
On selection  of state, display city.

Now, when I change the country, state field is removed but city if field not.

To overcome this, In the second UI Policy, add one more condition. Instead of On selection of State,
On selection of Country and State, city is visible.

Hope this helps.
Regards,
Najmuddin.

[Collin Romeijn]

Hi,

Also try to make a UI policy to clear old values from fields that arrent needed anymore. If you don't the values are still pushed into the variables and can cause annoying behaviour after submitting, even if the field isn't visible.

Kind Regards,

Collin

[Ravi Gaurav]

Hi @Puneet4418 ,

• • Client Script: onChange script for Field 1.
  • Script logic:

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

  // If Field 1 is not "X", ensure both Field 2 and Field 3 are hidden.
  if (newValue !== 'X') {
  g_form.setVisible('field_2', false);
  g_form.setVisible('field_3', false);
  }
  }

• Client Script for Field 2:

  • Create an onChange script for Field 2 to ensure Field 3 visibility is correctly controlled.

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

// If Field 2 is not "Y", hide Field 3.
if (newValue !== 'Y') {
g_form.setVisible('field_3', false);
}
}