Enhance Wiki Page Layout by adding a navgational Table of Contents

The content of wiki pages can get sometimes longer than it should be. The normal content length of publishing page or wiki pages should have a length that shouldn’t be longer than one or two screen. In this case a table of content can be useful to enhance the navigation on a single wiki page and give a brief overview about the content.

Released a new version of this table of content as a jquery plugin take a look at : Revised: Table of Contents for Wiki Pages

Adding Table of Content to the wiki page layout

The addition of a table of content to a wiki page layout is easy and can be accomplished by some little modification the wiki page layout. In this case I copied the default enterprise wiki page layout and added a placeholder div to the page layout.

[code lang=”html”]
<div class=”ms-descriptiontext ewiki-margin”>
<SharePoint:FormattedString FormatText=”<%$Resources:wss,wikidiff_lastmodifiedby%>” runat=”server”>
<SharePoint:FormField id=”modifiedFieldCtrl” ControlMode=”Display” FieldName=”Modified” runat=”server”/>
<SharePoint:UserField id=”editorFieldCtrl” ControlMode=”Display” FieldName=”Editor” runat=”server”/>
</SharePoint:FormattedString>
<PublishingWebControls:EditPageHyperLink id=”editPageLink” Text=”<%$Resources:cms,enterwiki_editpage%>” runat=”server”/>
</div>
<!– Table of Contents –>
<div id=”wiki-index”>
<div class=”toc”>Table of Contents</div>
</div>
<!– Table of Contents –>
<PublishingWebControls:EditModePanel runat=”server”>
<div class=”ms-descriptiontext”>
<b class=”ewiki-pagename-align”><SharePoint:FieldLabel FieldName=”FileLeafRef” runat=”server”/></b>
<SharePoint:FileField id=”PageNameInEditMode” CssClass=”ewiki-pagename-align” FieldName=”FileLeafRef” DisableInputFieldLabel=”true” runat=”server”/>
</div>
</PublishingWebControls:EditModePanel>
<pre>[/code]

The div with the id ‘wiki-index’ in the code above will be used to display the table of contents. What now is need some little bit of JQuery magic and a style definition for the table of contents box. The JQuery script will now parse the page content for all <h2> headlines and adds a hyperlink to the wiki-index box. In a second step the bookmarks will be added to the headings. The code and the style sheet will look like this and needs to be added on the page layout to the content placeholder with the ID PlaceHolderAdditionalPageHead:
The script:

[code lang=”javascript”]
$(document).ready(function(){
$(“.ms-bodyareacell h2”).each(function(){
$(“#wiki-index”).append(“<a href=’#”+$(this).text()+”‘>”+$(this).text()+”</a><br />”);
$(this).prepend(“<a name='”+$(this).text()+”‘></a>”);
})
});
[/code]

The style for the table of contents:

[code lang=”css”]
#wiki-index{
width: 250px;
border: 1px black dashed;
background-color: whitesmoke;
float: right;
margin-top: 60px;
margin-left: 10px;
padding: 10px;
padding-top: 0px;
}
#wiki-index .toc{
font-size: 1.1em;
font-weight: bold;
text-align: center;
padding: 5px;
}
[/code]

That’s all that needs to be done and the wiki page is enhanced with a nice table of content as seen below.

Table of Contents

Conclusion

Creating a table of contents for wiki pages can be accomplished easily with a simple JavaScript. This can enhance a lot of the usability of wiki pages. The author of a wiki page needs to do nothing than format the headlines the right way. Currently the script only covers a single level of headlines, but with some additional coding this can be accomplished too.

Download Enhanced Enterprise WIKI