Hiding Sections on a CRM 4 Form

Paul Nieuwelaar, 16 June 2010

Once you know how to hide sections on a CRM form using Javascript, it can be used together with other Javascript functions, such as hiding fields and tabs, and suddenly the customization capabilities of the CRM form are endless, and you’ll end up having forms where only the relevant fields are displayed, based on what was selected in fields before it.

I recently stumbled across the code to hide a section on a CRM form using JavaScript, and it can come in handy when you need to hide a section based the selection of another field.

In the example below I have created a section called Members Information, which is only visible if the Type radio button is set to Member.

To get this you need to add a few lines of code to the Type attribute OnChange event, and the Form OnLoad event.
It pays to do this one step at a time, so if something goes wrong you can pinpoint the error. We’ll start by adding the code to the Type attribute OnChange event.

Open the OnChange event for Type, check Event is enabled and paste is the following code:

if (crmForm.all.mag_type.DataValue == true) {
crmForm.all.mag_username_c.parentElement.parentElement.style.display='';
crmForm.SetFieldReqLevel("mag_requiredfield1", 1);
crmForm.SetFieldReqLevel("mag_requiredfield2", 1);
}

else {
crmForm.all.mag_username_c.parentElement.parentElement.style.display='none';
crmForm.SetFieldReqLevel("mag_requiredfield1", 0);
crmForm.SetFieldReqLevel("mag_requiredfield2", 0);
}

Where mag_type is the name of the bit attribute, or radio button that will be controlling the section visibility, and mag_username is the name of any nvarchar attribute, or normal text field that is on the section you are hiding. The lines that contain mag_requiredfield are for if there are any required fields on the section that you are hiding. Add in the names of the required fields, replacing mag_requiredfield1 for the first hidden field, and mag_requiredfield2 for the second, and so on. Remove the required field lines that aren’t being used. If there are no required fields on the section remove both lines from the if and else statement.

Click Ok twice to close out of the OnChange and Field Properties windows when the code looks right.

You may want to test the OnChange event is working as expected by viewing the Create Form Preview window. Make sure the radio button selections display and hide the section when they should do.

When you are satisfied with the OnChange event, open up the Type OnChange event again, and copy all the code you added earlier.

Now open the Form OnLoad event, check Event is enabled and paste in the exact code you copied from the OnChange event. Click Ok twice to close out of the OnLoad and Form Properties windows.

Test that it is all working correctly by viewing the Create Form Preview window. When the page loads, if Non Member is the default selection the Members section should be hidden.

Close the preview window when you are satisfied that the OnChange and OnLoad events are working correctly, then Save and Close the Form and Publish the entity.

That’s all there is to it for hiding sections, in one of my next posts I might go through how to hide fields and tabs based on a bit attribute selection as well. Stay tuned.