CRM Dynamics Portal: Adding Tab controls to a Web Page

Published May 13 2019 by James Trobaugh
Back to insights

Many times a CRM Entity Form page can contain multiple Tab Sections that when presented on a CRM Portal Web Page can force the user to scroll excessively to find the bottom of the Web Page. While in CRM you have the option to show these tabs individually but the CRM Portal does not offer such an option. I've created a simple JavaScript code snippet that will transform all of the Tab Sections on an Entity Form to individual tabs on the Web Page in the CRM Portal.

The logic is quite simple, the code using JQuery will identify each of the tab sections on the form and create a set of tab controls across the top of the Web Page using the header from each of the tab sections. At the same time the Bootstrap class of “tab-pane” is appended to each tab section and the header label is removed.

Below is a screen shot of a Web Page with no tab buttons.

James T Blog Image 1

Now the same form with tab buttons added

James T Blog Image 2

The adding of the Javascript code is quite simple. On the CRM Portal Web Page that I want to have the tabs I simply go to the Localized Content for the Web Page

James T Blog Image 3


Then in the Advanced section you will notice the Custom JavaScript section for this Web Page

James T Blog Image 4

Now you just add the JavaScript Code below to that section and save.

James T Blog Image 5

And now on each Web Page that is hosting a CRM Entity Form tab controls will be dynamically created on the top of the form.


Contact us