Showing posts with label tabs. Show all posts
Showing posts with label tabs. Show all posts

14 September 2011

SharePoint tabs UI for web parts

Christophe Humbert's beautiful Easy Tabs for SharePoint works wonderfully well; it automatically generates tabs for the web parts on the page. You simply drop the code Christophe provides into a content editor web part (CEWP) and off you go.

In a current project, we needed the ability to have all pages show tabs without dropping a CEWP on every page. The code needed to be on a page layout for a publishing site. The challenge? Christophe's code traverses up the DOM from the current CEWP to find the parent container of the web parts; unless you use a CEWP, it won't work.

Some serious trial-and-error, as well as posting to the SharePoint group on StackExchange.com, provided the clues; we need to provide a direct reference to the parent container of the web parts. Here's the part of the code that was moving up the DOM tree:
var el=document.getElementsByTagName("SCRIPT"),p=el[el.length-1],sT,a,sep,tabRow;
do {p=p.parentNode;sT=p.innerHTML.split("MSOZoneCell_WebPart");}while (sT.length<4 && p.parentNode.id!="MSO_ContentTable")
In the page layout, the web parts are in a Page Content control (PublishingWebControls:richhtmlfield), so here's the change to the JavaScript to reference that parent container:
var p,a,sep,tabRow;
p = document.getElementById('ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichHtmlField');
Note that there's no need for the el variable or the do-while loop. You probably need to do some trial-and-error, using alert() statements to view the p.innerHtml and/or p.parentNode.innerHtml; this helped me discover what p was pointing to after the do-while and simply reference it directly.