Creating a breadcrumb trail in SharePoint without modifying templates

Background - Editing SharePoint Templates a Headache

In 2003 we created a customized SharePoint Portal site for a customer that pretty much had us changing every template under SharePoint. We added custom navigation, a breadcrumb trail, moved the search to the top of the page, and pretty much completely resurfaced SharePoint. If you're familiar with the architecture of SharePoint, there are nearly 100 templates that make up a SharePoint area (one for the default page, and up to 5 more each for every list and library allowed in that area). Consider also that SharePoint Portal Server has about 7 out of the box templates each with its own corresponding set of 100 list and library pages, My Sites and WSS Sites have about 100 templates each and you'll find there are a LOT of pages to modify (and that's not including Administrative pages).

Recommendation: Use CSS for Most Visual Customizations

So, we learned our lesson and started customizing SharePoint using CSS. You can do some amazing things with CSS including moving complete page elements around (you can, for example move the search to the top of the page using css).

Leverage Javascript if CSS is Not Enough

But sometimes CSS just isn't enough. Sometimes we want to add a page element to every page that isn't a "web part". For this, we started using the owsbrows.js file to "pop" items into the page onload. The owsbrows.js file is loaded with with every page in SharePoint (Portal Areas, My Site & Team Sites) Basically, you can add items to a SharePoint page by running a JS / DHTML function when the page loads. It's a pretty cool technique for adding or modifying the SharePoint page without changing every template (for example, you can use this to remove the "My Site" link from users...)

Adding Dynamic Data to the Page using AJAX (Such as a Breadcrumb Trail)

If your customization includes dynamic data such as a breadcrumb trail, navigation, stock quote, etc. You can use AJAX concepts to add dynamic data to the page.

To add a Breadcrumb trail to SharePoint without editing every SharePoint template (or having the breadcrumb sit in a web part zone, which is just strange placement):

1) Create a server side web app that will get an XML structure of the breadcrumb using the URL as a parameter (this web app should sit in the SharePoint _layouts folder).
2) Edit the owsbrows.js file and create an onload function (attach to the onload event)
3) Create a XMLHTTP javascript call to the server side web app in the onload event. Pass the current page URL to the URL in this call
4) Format the returned xml into HMTL or DIV's
5) Using Javascript "pop" your formatted code onto the page using the DOM.

There *may* be a slight lag in the breadcrumb loading on the page, but it's generally unnoticeable if your server is fast enough. I'd publish the code, but there are so many variables it's best if you create it yourself. If you're not using CSS you may want to format the breadcrumb using tables, if you are, you should use DIV's. You may want to format the structure of the breadcrumb on the server instead of on the client. If you're using Team Sites in addition to Portal Areas, your code will need to take into consideration that Portal Area's have bucket web's (e.g. C1, C2) , which means you can't simply crawl up a web collection in your code, but on team (WSS) sites you can.

Comments

[mark kruger]

Brian, I'm working with a small college that has an existing web site. They are using sharepoint portal server as a web portal for students - sign on, email, class catalog and the like. I'm tasked with investigating how feasible it would be to use the portal server as a content management server for the "public facing" part of the site. Compared to a traditional "edit and publish" CMS, what are the pros and cons? It sounds like it was a lot more work than you expected.

[sezer]

CSS "Cascading Style Sheets" Lessons - web design lesson - - Web site : http://css-lessons.ucoz.com/index.html

[Milena]

http://monarho.com

[FIELD_NICKNAME]

FIELD_MESSAGE_larocac