After I’ve published the revised version of my table of contents script I got many request on “How to use” it. You asked for it and here it is the guide how to embed the script. I won’t provide a full featured step by step guide here. Instead, I will provide a small package of a page layout and a guide how to script embed directly. To make this work you need to have an Enterprise Wiki or Publishing page. The first part covers how to add a page layout containing the table of contents script. The second method shows how to add the script using code embedding. You also need to download the following file TableOfContents-PageLayoutPack that contains all the required files.
## Before you start
The zip file contains several files. All files in the folder “TableOfContents” needs to be added to the style library first. You will find this library in the root of your site collection.
First, create a new folder named “TableOfContents”.
Navigate to the newly created folder and Drag & Drop the files from the folder “TableOfContents” into the folder in the style library.
Right after the upload check in all the files so that they become visible to all the users of your web site. Now those scripts and style sheet files are ready to be used in Office 365 or on premise SharePoint. The base installation is now done.
Method 1 – Table of Contents in a page layout
The file TOC.aspx reference the previously uploaded files. To add this page layout, navigation to “Site Settings” in the root of your site collection and select “Master Pages and Page Layouts”.
Upload no the file to this library. Right after that you need to choose the correct content type for this newly added file.
In the dialog that shows up, select “Page Layout” (1). After that I would highly recommend to give the file a appropriate title like “Table of Contents”. This title will be used when you select the page layout on the article page.
The next thing the needs to be selected is the associated content type. First select the content type group named “Page Layout Content Types” and from the content type name select “Enterprise Wiki Page”.
After those selections you are ready to save the dialog. Finally, you need to make sure that you publish the toc.aspx file as a major version.
Change Page layout to “Table of Contents” Layout
Go to any of your wiki or publishing pages and edit the page. In the Ribbon right under the “Page”-Tab you will find on the page layouts. The new table of contents layout should listed there. After you switched the layout the table of contents shouldn’t be visible directly because the jQuery-plugin makes sure that it is only activated when the page is viewed and not during editing.
I did that because otherwise the page content will be missed up with extra html tags the script adds. All that needs to be done now is to add some additional headlines to your text.
Once you have published the page it should look like the following page.
Method 2 – Use table of contents with script embedding
The first method only works if you like to uselugin on a publishing page, but not on other pages such as team sites. The script can be embedded there too, but it has to be embedded on every single page. For this edit the page and select the “Insert” from the Ribbon and “Embed Code”.
Then you need to paste the following lines of code.
<link href="/Style Library/TableOfContents/sp.tableOfContents-1.0.css" type="text/css" rel="stylesheet">
The code above might need to be modified so that the path to the scripts and style sheets to your setup. After you have inserted the code and published the page. The table of content will be shown on the right side right above the page rating.
If you need some further advises. Please feel free to ask.