Highlighting Tab from Within sControl

Highlighting Tab from Within sControl

When we were building the Messages Application for the AppExchange we encountered a little glitch that I think many Salesforce developers encounter but not all know how to remedy. The problem we ran into was that at times the highlighting of the Home tab would go away as we navigated to some of the sControls used within the app.

Now you may already know that if you pass a record Id in the URL then that will actually dictate which tab stays highlighted for the page. Since our app was being placed on the Home tab as a component we couldn't pass the record Id in the URL because the functionality we desired was to keep the Home tab highlighted not our custom object tab.

The way we ended up solving this problem was by using the Document Object Model (DOM) to essentially look at all the tabs being displayed within Salesforce and then updating the CSS (styles) for the page to force the highlighting. In this post I will attempt to explain how this code works and walk through the details of it.

Let's begin with the code:

var parentTable = parent.document.getElementById("tabBar").rows[0]; //assign the first row of the parent document table with the Id "tabBar" to a variable
for (var a in parentTable.cells) { //for all cells (TDs) in that row (TR)
	var tableCell = parentTable.cells[a].innerHTML; //assign the inner HTML of each TD to a variable
	if (typeof(tableCell) == "string") { //if the type of the tableCell variable is "string"
		if (tableCell.indexOf("/home/home.jsp") != -1) { //look at the contents of the string and see if you find "/home/home.jsp"
			parent.document.getElementsByTagName("body")[0].className = "homeTab homepage"; //update the class declaration of the pages BODY tag
			parentTable.cells[a].className = "currentTab primaryPalette"; //update the class declaration of the table cell that we are currently within
		}
	}
}

In order to understand exactly what we are doing you need to understand how Salesforce builds the page content. First and foremost the styles used in the BODY tag on the page dictate the colors and icons for the page layout. See my post on Icons & Colors for a listing of all the custom color options. Second, (in our example) the sControl is housed inside an IFRAME allowing Salesforce to display the sidebar on the left-hand side of the page and the tabs at the top of the page.

Since our code is being run inside an IFRAME we need to make sure we traverse the DOM to get the content of the parent frame. This is done with the first line of code "var parentTable = parent.document.getElementById('tabBar').rows[0];". More specifically what this line of code does is looks at the top frame of the page for an element with the Id (id="") of "tabBar". This element is a specific reference to the table containing all of the tabs for the page. To see for yourself simply view the source code for any Salesforce page and within the source code find "tabBar".

So now that we are looking at the specific table containing all of the tabs we need to find the specific tab for Home. Now we know that whenever you click the Home tab you always go to the same page. That page is "/home/home.jsp". Again you can see that this is true by looking at the source code of any Salesforce page where you have the Home tab listed. Our second, third, & fourth lines of code create the looping we need to be able to identify the correct elements of the table through which we are searching and our fifth line of code is the one that specifically identifies the Home tab.

If we get to line six of our code we know that the page accessing the sControl has a tab above it reading "Home" and that is good enough for us to know that we can now update the class declarations for both the BODY tag of the entire page (which we do on line six) and the TD cell containing the reference to the Home tab (which we do on line seven).

I know that this example will not pertain to everyone that reads it but I hope that this provides a useful solution to those of you that have encountered this tab highlighting issue.