Make field visible when another field changes

[BiancaK]

Hi Developers

I am trying to achieve the below. When a user changes the Forecasted date then the fields "Reason for change, Category and Sub category" should become visible on the form and mandatory. I was able to configure the requirement to make the field mandatory when user changes the Forecasted date. But how can I hide these fields from the form initially?

Please the code below:

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

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

  if(g_form.isNewRecord() && newValue!=''){

g_form.setVisible('u_reason_for_change', false);

g_form.setMandatory('u_reason_for_change', false);

}

  return;  

  }  

  if(oldValue != newValue)  

  {  

  g_form.setValue('u_reason_for_change', true);

  g_form.setMandatory('u_reason_for_change', true);

  }  

  else  

  {  

  g_form.setVisible('u_reason_for_change', false);

  g_form.setMandatory('u_reason_for_change', false);

  }  

}  

[Tai Vu]

Hi @BiancaK 

From my understanding, we have 2 main scenarios in your case.

1. When user select the Forecasted date from empty, we hide fields.

2. When user change the Forecasted date from one to another, we show fields.

But what if the user changes the Forecasted date from one to empty?

Below is my sample script.

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

    //do nothing on load & old value is empty
    if (isLoading || oldValue === '') {
        return;
    }

	//enable these lines if you wanna hide fields when date changes from one to empty
    // if (newValue === '') {
    //     g_form.setMandatory('u_reason_for_change', false);
    //     g_form.setMandatory('u_category', false);
    //     g_form.setMandatory('u_subcategory', false);
    //     g_form.setVisible('u_reason_for_change', false);
    //     g_form.setVisible('u_category', false);
    //     g_form.setVisible('u_subcategory', false);
	// 	return;
    // }

    //mandatory on change when old value different to new value
    g_form.setMandatory('u_reason_for_change', (oldValue !== newValue));
    g_form.setMandatory('u_category', (oldValue !== newValue));
    g_form.setMandatory('u_subcategory', (oldValue !== newValue));
    g_form.setVisible('u_reason_for_change', (oldValue !== newValue));
    g_form.setVisible('u_category', (oldValue !== newValue));
    g_form.setVisible('u_subcategory', (oldValue !== newValue));

}

Cheers,

Tai Vu

[Fin Nguyen]

Thanks @Tai Vu for your solution, it works perfectly to me

[Satishkumar B]

Hi @BiancaK 
can you try the below onChange client script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading) {
        // Initially hide the fields when the form is loading
        g_form.setVisible('u_reason_for_change', false);
        g_form.setVisible('u_category', false);
        g_form.setVisible('u_sub_category', false);
        return;
    }

    if (newValue == '') {
        // If Forecasted Date is cleared, hide the fields again
        g_form.setVisible('u_reason_for_change', false);
        g_form.setMandatory('u_reason_for_change', false);
        g_form.setVisible('u_category', false);
        g_form.setMandatory('u_category', false);
        g_form.setVisible('u_sub_category', false);
        g_form.setMandatory('u_sub_category', false);
        return;
    }

    if (oldValue != newValue) {
        // If Forecasted Date changes, make the fields visible and mandatory
        g_form.setVisible('u_reason_for_change', true);
        g_form.setMandatory('u_reason_for_change', true);
        g_form.setVisible('u_category', true);
        g_form.setMandatory('u_category', true);
        g_form.setVisible('u_sub_category', true);
        g_form.setMandatory('u_sub_category', true);
    }
}

…………………………………………........................................................................................
Mark it helpful 👍and Accept Solution ✅!! If this helps you to understand.

…………………………………………........................................................................................

[BiancaK]

Hi @Satishkumar B 

Thank you for your response.

Your code works and caters for an existing form. But does not cater for a new form. 

Here is my requirement:

On a new form the fields Reason for change, Category and Subcategory should not be visible. Because on the new form the user will first complete the Forecasted date and save the form. But then at a later stage the user will come back to the form and wants to change the Forecasted date, this is when the Reason for change, Category and Subcategory should display and be mandatory. Or as per your code when the user goes to an existing form and changes the Forecasted field the fields should be visible and mandatory. How do I cater for both scenarios?

[Satishkumar B]

Hi @BiancaK 

try this below code:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
// Exit if the form is still loading
if (isLoading) {
return;
}

// Check if the form is new or existing
var isNewRecord = g_form.isNewRecord();

// Handle the case where the Forecasted Date is cleared
if (newValue == '') {
g_form.setVisible('u_reason_for_change', false);
g_form.setMandatory('u_reason_for_change', false);
g_form.setVisible('u_category', false);
g_form.setMandatory('u_category', false);
g_form.setVisible('u_sub_category', false);
g_form.setMandatory('u_sub_category', false);
return;
}

// For new records, initially hide the fields
if (isNewRecord) {
g_form.setVisible('u_reason_for_change', false);
g_form.setMandatory('u_reason_for_change', false);
g_form.setVisible('u_category', false);
g_form.setMandatory('u_category', false);
g_form.setVisible('u_sub_category', false);
g_form.setMandatory('u_sub_category', false);
} else {
// For existing records, handle visibility and mandatory status
if (oldValue != newValue) {
g_form.setVisible('u_reason_for_change', true);
g_form.setMandatory('u_reason_for_change', true);
g_form.setVisible('u_category', true);
g_form.setMandatory('u_category', true);
g_form.setVisible('u_sub_category', true);
g_form.setMandatory('u_sub_category', true);
}
}
}
…………………………………………..
Mark it helpful 👍and Accept Solution ✅!! If this helps you to understand.