Fixing SharePoint’s Wiki by adding a home button and repairing the breadcrumb

It has been less than a week since we released our free SharePoint Infuser and we are already at our third blog posting.

Today we are fixing something that has been bothering us for a long time, which is the lack of proper navigation in the SharePoint Wiki, particularly the lack of a ‘home’ button and the fact that the Breadcrumb navigates to allitems.aspx. Grrrrrr.

So, in order to fix this we use SharePoint Infuser to insert the appropriate JavaScript into every Wiki Page in one go. Similar workarounds have been available for a while, but they need to be applied to each wiki page separately, which isn’t a scalable solution.

We are using Chris Chapman’s article on how to add buttons to the Wiki Toolbar as a starting point, we then add some JQuery magic to locate the appropriate breadcrumb link and set its URL to the wiki home page in a way that works across different languages as this page is not always called ‘home.aspx’.

Follow the steps outlined below to implement the changes on your Wiki:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.

2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.

3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.

4. Copy the script at the end of this posting and paste it into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.

5. Click the Save button and navigate to any Wiki page.

Note that the script below works without modification on a ‘Wiki Page Library’. In order to make it work on a ‘Wiki Site’ change the ‘wikiHome’ variable to ‘../’ or whatever the equivalent of ‘home.aspx’ is in your language.

<!\-\- Load the JQuery Libraries that ship with Infuser -->

<script type="text/javascript" src="/\_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

function addWikiHomeButton()

    {

// \\*\\* Are we on a wiki page?

if($("table.ms-wikitoolbar").length > 0)

        {

// Wiki home page that works across multiple languages

var wikiHome = ".";

// Fix the breadcrumb title

            $("span\[id$=PlaceHolderTitleBreadcrumb\_ContentMap\] a:last").attr("href", wikiHome);

// make copies of the layout cells for the wiki toolbar

var $tdSeparator = $("table.ms-wikitoolbar tbody tr td.ms-separator:first").clone();

var $tdToolbar = $("table.ms-wikitoolbar tbody tr td.ms-toolbar:first").clone();

var $tdLastCell = $("table.ms-wikitoolbar tbody tr td.ms-toolbar\[width\]:last").clone();

var $parent = $("table.ms-wikitoolbar tbody tr td.ms-toolbar\[width\]:last").parent();

// remove the last TD element (padding)

            $("table.ms-wikitoolbar tbody tr td.ms-toolbar\[width\]:last").remove();

// now build a link

var $select = "<a href='" \+ wikiHome + "' class='ms-toolbar'>Wiki Home<a>";

// add a separator pipe, append the link and then the padding

            $parent.append($tdSeparator).append("<td class='ms-toolbar' nowrap>" +

            $select + "</td>").append($tdLastCell);

        }

    }

    jQuery.event.add(document, "ready", addWikiHomeButton);

</script>