For the purpose of this demonstration, we will be looking at the Contact form we have been working on until now. Reuse the same solution you have used already, or if you want to start a new one, create a new solution.

First off, let's focus on working with the tabs. These form elements have the advantage of generating a link on the navigation, allowing a user to browse directly to a specific tab. They come in handy when you have a long entity form, and you don't want the user to scroll for too long.

On the top-left side of the Contact form, right underneath the ribbon, your will see the tab as shown in the following screenshot:

Observe the four tabs displayed by default on the contact.

We can show and hide tabs based on either a form event, such as the OnLoad or OnSave events, or based on a field event, such as the OnChange event. The code is the same, the only difference is what event we associate with our function.

For the purpose of this example, I want to hide a tab when the form loads, no matter what.

In order to revert this action, check for a form condition and run another function to display this tab again. You can define the condition to be either a value populated in a text field, or maybe a new "Notes Required" two-options field on the form. Check the value as described in the previous recipes, and call the following function to show the tab:

function ShowTab()
{
  Xrm.Page.ui.tabs.get("notes and activities").setVisible(true);
}

Similarly with tabs, a form section is an area of the form situated within a tab. You can choose to leave the tab visible at all times, but hide or show only a section.

The following function hides a section on the Contact form on form load. For this case, I will be leaving the Notes & Activities tab visible, but I want to hide only the Activities section.

function HideSection()
{
  Xrm.Page.ui.tabs.get("notes and activities").sections.get("activities").setVisible(false);
}

Observe that, in order to get to a section, we have to retrieve the tab on which the section lives.

On the flip side, in order to show a section back on the form, the following function does the job:

function ShowSection()
{
  Xrm.Page.ui.tabs.get("notes and activities").sections.get("activities").setVisible(true);
}

The demonstration in this recipe revolves around the concept of defining what the user needs to see on an entity form, based on either a form event or a predefined rule. We do count on all these tabs and sections being generated ahead of time. All we are doing is showing and/or hiding them according to our business rules.

Getting to a tab in order to perform an action on it is achieved using the following line of code:

Xrm.Page.ui.tabs.get("tabName")

Once we have a reference to the tab, we can perform the required actions on it, such as show or hide the tab by setting the SetVisible property.

Additionally, getting to a section on the form is done through the tab it lives on. The following code gets a reference to the section:

Xrm.Page.ui.tabs.get("tabName").sections.get("sectionName")

From here on, we can perform other actions.