Breadcrumb Bar Style Dashboard Navigation

I recently needed to provide a breadcrumb on a SharePoint dashboard page which uses web parts to provide information about a sales territory area. Because the sales territories are defined as a hierarchy consisting of thousands of areas (e.g. regions which contain districts, districts which contain trade areas, and trade areas which contain counties), I chose to use a Query String (URL) Filter to pass an area to the dashboard page, rather than trying to load the areas into a PerformancePoint tree filter or multiple cascading filters. As a result, the page is much more light weight and easy to navigate, however, at the expense of having to do full postbacks to navigate between areas.

Conceptually, the area breadcrumb needed to show the area being viewed and the path to that area (i.e. all of its parents). Additionally, the parents could be links, providing a way to navigate to any of the parent areas. A very simplistic approach could display the information in a manner similar to the following:

National > Region 1 > District 1D > Trade Area 1D2 > Orange County, CA

But then I thought of the Breadcrumb Bar that was originally introduced with the Windows Vista version of Windows Explorer. These aren't drives, folders and files, but the hierarchical nature of the sales territories fit perfectly. The benefit of this approach would be to allow additional navigation possibilities to any of an area's parent's children (read on if that's not clear).

With a bit of Googling, I found a nice basis for my breadcrumb bar with this example: CSS-Only Dropdown Menu. It basically provides a very simple, yet elegant, drop down menu with a little javascript to handle the mouseover and mouseout events.

Breadcrumb Bar Example for Orange County, CA (this example should be interactive... at least it was when I originally posted it):

• National
• • Region 1
  • Region 2
• Region 1
• • District 1A
  • District 1B
  • District 1C
  • District 1D
  • District 1E
  • District 1F
• District 1D
• • Trade Area 1D1
  • Trade Area 1D2
  • Trade Area 1D3
  • Trade Area 1D4
• Trade Area 1D2
• • Los Angeles County, CA
  • Orange County, CA
  • Santa Barbara County, CA
  • Ventura County, CA
• Orange County, CA

After dummying up an example of how I wanted the breadcrumb bar to look, I then had to decide how I would need to format the data to populate such a control. I came up with the following which required a stored procedure that basically has to determine each of the selected area's parents and the children of each of those parents (you'll have to design your own query based on your database design). Again, the following is what would be needed when passing "Orange County, CA":

AreaName	AreaType	AreaLevel	IsSelected
National	National	1	1
Region 1	Regions	2	0
Region 2	Regions	2	1
District 1A	Districts	3	0
District 1B	Districts	3	0
District 1C	Districts	3	0
District 1D	Districts	3	1
District 1E	Districts	3	0
District 1F	Districts	3	0
Trade Area 1D1	Trade Areas	4	0
Trade Area 1D2	Trade Areas	4	1
Trade Area 1D3	Trade Areas	4	0
Trade Area 1D4	Trade Areas	4	0
Los Angeles County, CA	Counties	5	0
Orange County, CA	Counties	5	1
Santa Barbara County, CA	Counties	5	0
Ventura County, CA	Counties	5	0

As an example, if I pass "District 1D" to the stored procedure, it would return "Region 2" and "National" (i.e. the parents of "District 1D") and "Region 1" (the additional child of "National") and the other children Districts of "Region 2".

Finally, I needed to build the control. I could have easily written a custom web part, but opted for a Data Form Web part instead. This basically required a bit of XSL to build the HTML. Again, I'll leave that exercise to you, the reader.

The final control also included an "enabled" flag that would allow me display the hierarchy, but disable parent areas that users did not have access to. This required an additional argument to the stored procedure of the user accessing the dashboard.

Although this post is light on code, I hope that it may help in creating your own breadcrumb bar for the navigation of a PerformancePoint dashboard.

SharePoint 2010, SSRS 2012 and Internet Explorer 9 Issues

In SharePoint 2010, when using the RSViewerPage.aspx to view SSRS reports in Internet Explorer 9, you may experience the following problems:

• Increasing the Zoom percentage to more than 100% on the page’s toolbar results in the top of the report not being visible. Decreasing the Zoom percentage below 100% results in extra whitespace at the top of the report.
• The Actions->Export flyout menu does not appear.

I have additionally experienced a problem with a PerformancePoint Reporting Services web part that is displayed in a modal dialog called using SharePoint’s SP.UI.ModalDialog.showModalDialog method. When I click a button on the page that calls the method and displays the dialog, the report will update itself based on connections to filters on the page. Works great in IE7, IE8, Chrome and FireFox, however in IE9, the update to the report is only triggered in compatibility mode.

Adding your site to IE9’s Compatibility View settings list (Tools->Compatibility View settings) should fix the functionality. After discovering this workaround on my own, I stumbled across the following Microsoft Knowledge Base article which addresses the Export menu issue:

FIX: SSRS 2008 R2 report or SSRS 2012 report has no Export menu in Internet Explorer 9.0 if you use the out-of-box viewer page in the SharePoint Report Viewer Web Part (http://support.microsoft.com/kb/2616481).

I’m hoping the Zoom problem and my modal dialog report update problem would be addressed by the fix mentioned in the KB article as well. I’ll update this post eventually when we apply the CU.

UPDATE 7/16/12: I installed SQL Server 2012 CU2 (11.0.2325), which is supposed to include the fixes from CU1 (mentioned in the kb article above), and it has not, unfortunately, fixed any of the issues mentioned in this post.

UPDATE 11/14/12: I installed SQL Server 2012 SP1 (11.0.3000) with the same results: none of the issues mentioned in this post have been addressed.