Adding a New NavBar to an Entity Form

CRM 4.0 does not provide a very good story on customizing entity form navigation. It's acceptable for most configurations, but it would be nice if the left navigation within an entity form could be customized further. At least from the standpoint of adding additional NavBars, instead of having to place relationship and sitemap NavbarItems in one of the four provided by Microsoft (Details, Sales, Service, Marketing).

Below is the Account form with a 1-to-many relationship to an entity named Custom Entity. Through the relationships configuration on the Account entity, the only options we have are to display the link in the Details, Sales, Service, or Marketing areas. These areas can be renamed using the ISV Config file, but we cannot move any of the out-of-the-box entities to different sections. Below is a screen shot of the Account entity.

















What will be demonstrated in this post is how to create a new NavBar on the Account entity and move NavBarItems to it. This solution is not supported due to the form manipulation but is fully functional. Even security applies, meaning, the NavbarItems will only display if the user has proper access, and if the user has no access to any of the NavBarItems, the new NavBar will not display. Below is the end result. The Custom Entities, Sub-Accounts, and Relationships NavBarItems have been moved to a new NavBarItem.
















Below is a JavaScript class that can be used to create new NavBars using the OnLoad event of an entity form.

// =====================================================
// JsNavBar v1.0 - 10/30/2009 (CRM 4.0)
// =====================================================
JsNavBar = function(displayName) {
 var navBarDisplayName = displayName;
 var navBarItemArray = new Array();

 JsNavBar.prototype.AddNavBarItem = function(navBarItemId) {
  navBarItemArray[navBarItemArray.length] = document.getElementById(navBarItemId);
 };

 JsNavBar.prototype.Show = function() {
  var crmNavBar = document.getElementById("crmNavBar");
  if (crmNavBar != null) {

   var navBarItems = document.createElement("UL");
   navBarItems.style.display = "inline";
   navBarItems.className = "ms-crm-Nav-Group-Subareas";

   for (i = 0; i < navBarItemArray.length; i++) {
    if (navBarItemArray[i] != null) {
     navBarItems.appendChild(navBarItemArray[i]).parentNode;
    }
   }

   if (navBarItems.hasChildNodes()) {
    var newNavBar = document.createElement("LI");
    newNavBar.className = "ms-crm-Nav-Group";
    newNavBar.innerHTML = '' + navBarDisplayName + ': ';
    newNavBar.appendChild(navBarItems);

    if (crmNavBar.childNodes.length > 1) {
     var secondNav = crmNavBar.childNodes[1];
     crmNavBar.insertBefore(newNavBar, secondNav);
    } else {
     crmNavBar.appendChild(newNavBar);
    }
   }
  }
 };
};

The next snippet of code shows how to use the above code.

var demoNavBar = new JsNavBar("Demo"); 
demoNavBar.AddNavBarItem("navSubAct"); 
demoNavBar.AddNavBarItem("navRelationships"); 
demoNavBar.Display(); 

To obtain the id's of the NavBarItems on the form, the IE Developers Toolbar is a great tool and can be downloaded here: (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en). Once installed, to use it, open a CRM entity form, press CTRL+N. A new window will open with the address and toolbars displayed. Select Tool->Toolbars-->Explorer Bar-->IE Developer Toolbar. It can be used the NavBarItem ids. See below.