Hide fields based on condition in a form

[vidhya_mouli]

Requirement: When contact has value display contact and hide: u_name, u_phone, u_company and u_email else vise versa

function onLoad() {

    var contact = g_form.getValue('contact'); 
	
    if (contact) {
        // Contact has value → show contact, hide other fields
        g_form.setDisplay('contact', true);

        g_form.setDisplay('u_name', false);
        g_form.setDisplay('u_phone', false);
        g_form.setDisplay('u_company', false);
        g_form.setDisplay('u_email', false);

    } else {
        // No contact → hide contact, show other fields
		g_form.setDisplay('contact', false);

        g_form.setDisplay('u_name', true);
        g_form.setDisplay('u_phone', true);
        g_form.setDisplay('u_company', true);
        g_form.setDisplay('u_email', true);
    }
}

When the contact has value it hides the rest of the fields. But when the contact does not have value, it shows other fields and the also the contact field.

Why?

[vidhya_mouli]

[MariusAlinPopa]

Hi @vidhya_mouli , 

Can you check if other catalog client scripts or ui policies are affecting the contact field? Please check their order as well.

The ui policy that you shown should work, can you try using another field just for testing? Try using Contract instead, and apply the same settings.

Also, instead of 'is empty' you can try 'is' and leave the input empty.

Finally you can try increasing the ui policy order to something like: 1000

So final settings:

order: 1000

global: true

on load: true

reverse if false: true

Condition:

Customer user (contact) is empty

OR 

Customer user (contact) is [empty input]

Let me know if any of the above suggestions work, 

Marius

[vidhya_mouli]

I cannot use onChange because the fields have to be dispalyed/hidden everytime the form loads.

[Tanushree Maiti]

Hi @vidhya_mouli 

just remove 

 if (isLoading) {
        return;
    }

 this part. it will work onload as well 

[Ankur Bawiskar]

@vidhya_mouli 

onLoad runs only once when form loads, it won't run again

Approach

1) onLoad

+

2) onChange

onLoad

function onLoad() {
    toggleContactFields();
}

function toggleContactFields() {
    var contact = g_form.getValue('contact');

    if (contact) {
        g_form.setDisplay('contact', true);
        g_form.setDisplay('u_name', false);
        g_form.setDisplay('u_phone', false);
        g_form.setDisplay('u_company', false);
        g_form.setDisplay('u_email', false);
    } else {
        g_form.setDisplay('contact', false);
        g_form.setDisplay('u_name', true);
        g_form.setDisplay('u_phone', true);
        g_form.setDisplay('u_company', true);
        g_form.setDisplay('u_email', true);
    }
}

onChange script on Contact field

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading) {
        return;
    }

    if (newValue) {
        g_form.setDisplay('contact', true);
        g_form.setDisplay('u_name', false);
        g_form.setDisplay('u_phone', false);
        g_form.setDisplay('u_company', false);
        g_form.setDisplay('u_email', false);
    } else {
        g_form.setDisplay('contact', false);
        g_form.setDisplay('u_name', true);
        g_form.setDisplay('u_phone', true);
        g_form.setDisplay('u_company', true);
        g_form.setDisplay('u_email', true);
    }
}

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏