Dynamics CRM Developer Tip O’ the Day: Working with Tabs

I learned an important lesson yesterday, again, on working with tabs with Dynamics CRM forms.

There are several ways to reference tabs when writing JavaScript and using the Xrm.Page model.  You may reference the tab by number, like this:

Xrm.Page.ui.tabs.get(2)

Note: Tabs are numbered starting with zero for the first tab.

Or by name, like this:

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

It is always a best practice to use the name of the tab instead of the number because if you ever move the tab around the form, then the number will no longer be valid and any JavaScript you have written which references a particular tab in such a manner will start to cause some very strange user experiences.

By using the name of the tab, you will always be referring to the same tab, no matter where it may be located on the form.

In my particular case, this was a Dynamics CRM 2013 installation that had been upgraded from 4.0.  My JavaScript conversion tool, Transformer!, automatically converts the tab references using the number because of the naming convention applied to the converted forms, which is a GUID.

I had merged the original Information form with the new Entity form and in doing so, I had inadvertently moved the tabs out of place.  The logic in JavaScript involved changing the title of a tab as well as showing and hiding one of two different tabs, based on the value of an Option Set field.

I worked around my issue by renaming my tabs from the GUID value to tabxTab, which was the original CRM 4.0 naming format then modified my JavaScript to use that name instead of the number.

By the way, the same practice also applies to form Sections, which are named and referenced in a similar manner.