Adding Tabs in CRM 2011 Forms like CRM 4.0 Forms
Sometimes, the users are so used to with the tabs from CRM 4.0 forms that they are not happy with the tab sections from CRM 2011 forms. And sometimes, the input data from one tab has to be populated in another tab according to the workflow of the business process.
In such situations, we've got no choice but to simulate the tabs of CRM 4.0 form by embedding an HTML web resource with tab controls in the header of the form which will show/hide the tab sections upon clicking.
To start implementing, download the HTML file from here.
Upload that HTML file as a web resource in your CRM organization solution.
Open the form that you want to add tabs and insert the uploaded web resource in the header of that form.
Go to the Formatting tab and change the number of rows to 1 and occupy all columns in layout.
Save the form and publish.
So, the final result of the form will be as shown in the screenshot below.
PS: Currently, I've just added 12 tabs in the html web resource so that it can handle the forms with maximum 12 tabs. If your form has more than 12 tabs, you have to edit the HTML file and add more tab items (li nodes) and re-upload the html web resource.
For those who are not able to download the html file from the Google Drive link above, check out the source code in the box below.
In such situations, we've got no choice but to simulate the tabs of CRM 4.0 form by embedding an HTML web resource with tab controls in the header of the form which will show/hide the tab sections upon clicking.
To start implementing, download the HTML file from here.
Upload that HTML file as a web resource in your CRM organization solution.
Open the form that you want to add tabs and insert the uploaded web resource in the header of that form.
Go to the Formatting tab and change the number of rows to 1 and occupy all columns in layout.
Save the form and publish.
So, the final result of the form will be as shown in the screenshot below.
PS: Currently, I've just added 12 tabs in the html web resource so that it can handle the forms with maximum 12 tabs. If your form has more than 12 tabs, you have to edit the HTML file and add more tab items (li nodes) and re-upload the html web resource.
For those who are not able to download the html file from the Google Drive link above, check out the source code in the box below.
<html>
<head id="Head1" runat="server">
<script>
function tabOnLoad()
{
LoadTabs();
HideAllTabs(parent.Xrm.Page.ui.tabs.get(0).getName());
var tabHeight = document.getElementById("crmTabBar").offsetHeight + 2;
parent.document.getElementById("crmFormHeader").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.height = parent.document.getElementById("crmFormHeader").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.offsetHeight - 17;
}
function LoadTabs()
{
var crmTabBar = document.getElementById("crmTabBar");
var tabCollection = parent.Xrm.Page.ui.tabs;
for(i = 0; i < tabCollection.getLength() & i <= crmTabBar.children.length; i++)
{
var tabID = tabCollection.get(i).getName();
var NewTabItem = crmTabBar.children[i];
NewTabItem.id = tabID + "Tab";
NewTabItem.tabID = tabID;
NewTabItem.onclick = function() { SelectTab(this.id.substring(0, this.id.length - 3));};
//var NewDiv = document.createElement("div");
//NewDiv.id = tabID;
//NewDiv.style.visibility = 'hidden';
//document.appendChild(NewDiv);
var AnchorItem = NewTabItem.children[0];
AnchorItem.innerText = tabCollection.get(i).getLabel();
}
for(i = crmTabBar.children.length - 1; i >= tabCollection.getLength(); i--)
{
crmTabBar.removeChild(crmTabBar.children[i]);
}
}
function HideAllTabs(shownTab)
{
var isAllHidden = false;
var count = 0
while(!isAllHidden && count <5)
{
isAllHidden = true;
for(i = 0; i < parent.Xrm.Page.ui.tabs.getLength(); i++)
{
if(parent.Xrm.Page.ui.tabs.get(i).getVisible() && parent.Xrm.Page.ui.tabs.get(i).getName() != shownTab)
{
parent.Xrm.Page.ui.tabs.get(i).setVisible(false);
isAllHidden = false;
}
}
count++;
}
}
function SelectTab(tabName)
{
HideAllTabs(tabName);
parent.Xrm.Page.ui.tabs.get(tabName).setVisible(true);
try
{
parent.window[tabName.replace(/\s/g,"_") + "Tab_GotFocus"]();
}
catch(ex){}
}
</script>
<title>Tab</title>
<script type="text/javascript" src="/_common/global.ashx"></script>
<link rel="stylesheet" type="text/css" href="/_common/styles/fonts.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_common/styles/global.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_common/styles/theme.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_forms/controls/controls.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_common/styles/select.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_common/styles/miniCal.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_nav/menu.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_forms/controls/notifications/notifications.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_forms/controls/form.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_common/styles/dialogs.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_nav/tabs.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_grid/appgrid.css.aspx" />
<link rel="stylesheet" type="text/css" href="/_controls/lookup/lookupdialogs.css.aspx" />
</head>
<body onload="tabOnLoad()">
<table cellSpacing=0 cellPadding=0 width="100%" height="100%"><tbody>
<tr>
<td class=ms-crm-TabBar-Cell>
<ul style="width: 565px" id=crmTabBar class=ms-crm-TabBar valign="bottom" nowrap>
<li id="tab1" class="ms-crm-Tab" tabIndex=-1 tabID="tabID1"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab2" class="ms-crm-Tab" tabIndex=-1 tabID="tabID2"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab3" class="ms-crm-Tab" tabIndex=-1 tabID="tabID3"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab4" class="ms-crm-Tab" tabIndex=-1 tabID="tabID4"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab5" class="ms-crm-Tab" tabIndex=-1 tabID="tabID5"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab6" class="ms-crm-Tab" tabIndex=-1 tabID="tabID6"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab7" class="ms-crm-Tab" tabIndex=-1 tabID="tabID7"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab8" class="ms-crm-Tab" tabIndex=-1 tabID="tabID8"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab9" class="ms-crm-Tab" tabIndex=-1 tabID="tabID9"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab10" class="ms-crm-Tab" tabIndex=-1 tabID="tabID10"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab11" class="ms-crm-Tab" tabIndex=-1 tabID="tabID11"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li id="tab12" class="ms-crm-Tab" tabIndex=-1 tabID="tabID12"><a href="#" target=_self>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
</ul>
<div style="visibility:hidden" id="tabID1">
</td>
</tr>
</tbody></table>
</body>
</html>
VERY awesome!
ReplyDeleteWe have been using your horizontal tab solution but it stops working in rollup 12, I guess because of the cross browser support. Would it make any difference if we implement the Microsoft solution to limit browser support to Internet Explorer in rollup 12 and beyond?
ReplyDeletePls download the latest version and try it again. At least it should work on IE and Chrome. I'll try to make it working in other browsers as well.
DeleteThe decision about the CRM system to limit to IE only for UR 12 and beyond is up to the clients and their demands. One good thing about limiting to IE only is that such unsupported client scripting like accessing DOM (as in this tab solution) will most likely be working even after latest rollups. If we let the clients use all supported browsers, the client scripting will be limited to supported methods only.
For more information, you can read about that in the following MSDN link.
http://msdn.microsoft.com/en-us/library/hh771584.aspx
We really appreciate your response on this. I downloaded the latest version and got it working in rollup 12, once I had set System Settings / Customisation as follows, HTC compatibility = on, Latest Internet Compatibility = off
DeleteMany thanks for your help.
I am interested in downloading the HTML page above, but the link does not work for me (seems broken). Could you perhaps make it available somehow? Thanks!
ReplyDeleteI've tried downloading from the link and it's still working.
DeleteAnyway, I've updated the post to include the source code. Hope it helps.
Does this work with CRM Dynamics 2015
ReplyDeleteand online?
Delete