Help please hiding/displaying Sections on edit screen based on stored values

To ensure that the sections are displayed or hidden based on the initial values stored in the database when editing a record, you need to add logic that checks the current values of the fields when the edit page loads.

Here’s a general approach you can take:

1. Check Initial Values: When the edit page is loaded, you need to check the initial value of PlaceOnPaidAdminLeave (or any relevant field) and conditionally hide or show the sections based on that value.

   
   

2. Trigger the Logic on Page Load: You can call the same logic you have in your change event on the page load event, passing in the initial value of the field.

   
   

Here's how you can implement this:

Step 1: Define a function to toggle sections based on the value

You can extract the logic for toggling the sections into a separate function. This will help you reuse the logic both in the change event and when the page loads.

function toggleSections(isOn) {
 if (isOn) {
 PlaceOnUnpaidLeave.clear();
 RelocationPerDiem.clear();
 PosFilledOutsidePosting.clear();
 Relocation.clear();
 pageObj.toggleItem("section2", false);
 pageObj.toggleItem("testing", false);
 pageObj.toggleItem("UnpaidVP", false);
 pageObj.toggleItem("CodeBlock", false);
 pageObj.toggleItem("vpapproval", false);
 DepartmentCode.removeValidation("IsRequired");
 ResourceCode.removeValidation("IsRequired");
 BusinessUnit.removeValidation("IsRequired");
 EarningsCode.removeValidation("IsRequired");
 PhysicalLocation.removeValidation("IsRequired");
 ActivityCode.removeValidation("IsRequired");
 ProjectCode.removeValidation("IsRequired");
 VPName.clear();
 VPEmail.clear();
 VPUserID.clear();
 VPTitle.clear();
 VPApproval.clear();
 VPApprovalDate.clear();
 } else {
 PlaceOnUnpaidLeave.clear();
 RelocationPerDiem.clear();
 PosFilledOutsidePosting.clear();
 Relocation.clear();
 pageObj.toggleItem("section2", true);
 pageObj.toggleItem("testing", true);
 pageObj.toggleItem("UnpaidVP", true);
 pageObj.toggleItem("CodeBlock", true);
 pageObj.toggleItem("vpapproval", true);
 DepartmentCode.addValidation("IsRequired");
 ResourceCode.addValidation("IsRequired");
 BusinessUnit.addValidation("IsRequired");
 EarningsCode.addValidation("IsRequired");
 PhysicalLocation.addValidation("IsRequired");
 ActivityCode.addValidation("IsRequired");
 ProjectCode.addValidation("IsRequired");
 VPName.clear();
 VPEmail.clear();
 VPUserID.clear();
 VPTitle.clear();
 VPApproval.clear();
 VPApprovalDate.clear();
 }
}
Step 2: Update the change event to use the new function
Replace the toggle logic in the on('change') event with a call to the new function:
PlaceOnPaidAdminLeave.on('change', function(e) {
 toggleSections(this.getValue() === 'on');
});
Step 3: Call the function on page load
You should call this function when the page loads, checking the initial value of PlaceOnPaidAdminLeave. Make sure to do this in a way that is compatible with your framework, such as:
$(document).ready(function() {
 const initialValue = PlaceOnPaidAdminLeave.getValue();
 toggleSections(initialValue === 'on');
});
Summary
With these modifications, your edit page should now conditionally hide or display the relevant sections based on the initial values from the database. When the page loads, it will check the value of PlaceOnPaidAdminLeave, and when the user changes it, the sections will toggle accordingly. 
Make sure to test thoroughly to ensure that it behaves as expected in all scenarios.