Article

How to use: Table of Content – jQuery Plugin

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”.

Folder - TableOfContents

Folder – TableOfContents -in Style Library

Navigate to the newly created folder and Drag & Drop the files from the folder “TableOfContents” into the folder in the style library.

Files inside Style Library

Files inside 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”.
Add Table Of Contents page layout
Upload no the file to this library. Right after that you need to choose the correct content type for this newly added file.

ContentType Page Layout

ContentType Page Layout

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”.

Associated Content Type

Associated Content Type

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.

Table Of Contents in Action

Table Of Contents in Action

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”.

Embed Script

Embed Script

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">
<script src="/Style Library/TableOfContents/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/Style Library/TableOfContents/sp.tableOfContents-1.0.js" type="text/javascript"></script>
<script src="/Style Library/TableOfContents/TableOfContents.conf.js" type="text/javascript"></script>

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.

Download

TableOfContents-PageLayoutPack

Additional Readings

30 Comments

  1. Hi
    Thanks for these n00b-safe instructions – it works like a charm 🙂
    However: in our enterprise wiki the “Rate Page” and “Taggging” boxes are at the bottom of the wiki page. Your ToC adds above that, which does not look as cool as in your screenshots.
    Maybe this has nothing to do with the ToC feature – but how can I move ToC, Rate & Tagging to the top right corner like you did?

      • Hi Stefan,
        First, thanks for the TOC JQuery plugin. Works as advertised!
        Just following-up on the comment regarding the positioning of the ToC, Rating and Tagging. In our SharePoint farm, some Site Collections display your ToC along with the Rating and Tagging on the top right of the page while other Site Collections, at the bottom of the page. This has obviously nothing to do with your solution but I was just wandering if you had an idea why this happens.
        Thanks
        /Alain

  2. Hi,

    I have tried to follow the instructions above (Method 2) but in my case script doesn’t work at all – no any error messages just nothing. Do you have ideas – why?

    • Have you check that all the referenced files exists in the locations I provided in the explanation?

      /Stefan

  3. I am trying to follow this guide, but get stuck at the Page Layout.
    My Wiki is a subiste.
    I followed all the steps, but then when I add a page to the Wiki and change the layout, the TOC but it does not show up as a Layout option?
    Not does it show up as a layout on the “home” site of the wiki.

    • What kind of site template is your site based on ?

      /Stefan

      • My Main / Parent Site is a Team Site.
        The Sub Site is an Enterprise Wiki

        • So you don’t see the Table of contents Page Template to select? Have you checked on the enterprise wiki page under “Look and Feel” > Page Layouts and Site Templates if the available page layouts have been limited to enterprise wiki page layouts?

          /Stefan

          • I found out where to add the TOC to page layouts 🙂
            Indeed under Site Settings, Look and feel, Page Layouts and site Templates it was not added to the list.
            I have now added it to that list, unfrotunately it still does not show up as a possible page layout.
            I have the following three options
            1)Enterprise Wiki > Basic Page
            2)Project Page>Basic Project Page
            3)Redirect Page

  4. Hi Stefan,
    I encountered the same problem: I can’t see the Table of Contents Page template to select while editing the page. However, under Look and Feel> Page Layouts and Site Templates it is visible and I added them to the available page layouts list already.

  5. Hi Stefan, thanks for the work. I got one problem: after choosing Page Layout -> Table of Contents, an error pops up. Sharepoint 2010 here. Can you help please?

    Die Assembly Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c konnte nicht geladen werden. Stellen Sie sicher, dass die Assembly kompiliert wurde, bevor Sie auf die Seite zugreifen.

    • Hi Hagel,

      sorry but the page layout works only in SharePoint 2013 and not SharePoint 2010. You can try to change the Version from 15.0.0.0 to 14.0.0.0.

      /Stefan

  6. I’ve tried Method 2 and adjusted the Code to the following, but it doesn’t work. Any idea?

    • Hi,

      I think this is caused by the minified version of the table of contents script. You can download the un-minified version from Revised: Table of Contents for Wiki Pages.

      You need then add the file to the style library and overwrite the existing one with the same name.

      /Stefan

  7. Hi,

    Big up to you for this great work !

    After few test, the first method is working like a charm !
    Unfortately, the second one does’nt work…

    Do you know if it’s possible (for a n00b like me) to have this script in a floating/sticky box ?

    Thank’s a lot !
    /Nikolas

    PS : sorry for my poor english, i’m french…

    • Thank you for your feedback and pointing me to the problems with the second method. When I find time I will look into it.

      To your second question. About the sticky box. In future you will be able to use something like “`position: sticky“`. In the mean time I would recommend to use a tool such as [StickyJS](http://stickyjs.com).
      PS: I’m from Austria 😉

      • Thanks for reply and for the link !
        I will see if i enable to merge these two scripts, and post here the result if you want.

        Bye bye neighbor ! 😉

  8. Hi Stefan,
    I can see the Table of content page layout in the list, but choosing it does Nothing. When I double check if still selected as the current layout, it is. My Entreprise Wiki is a sub site of our IT site, the IT site being within a site collection. I uploaded all the files at the IT Site level since it is the root site for our Entreprise wiki. I couldn’t see the Style Library at the Entreprise Wiki level anyways. The aspx file been uploaded at the root site (e.g. IT Site) level too. Can you give me some hints to troubleshoot this ?

    • Not sure but Style Library is part of the publishing feature and have to be there. If it is not then you might have a trouble with your Enterprise Wiki template.
      What you can check is if publishing Infrastructure and Features are enable. Maybe someone delete this library manually. Never tried if this is possible.

      /Stefan

      • Hi Stefan,
        Finally, this was an error of mine. I created the folder named TableOfContent with the missing “s”. Fixed this an the ToC started working. One thing though, it seems that Under certain conditions, the ToC breaks , shows a dotted line, then resume but with an unproperly applied style (e.g. I see bullets). Unfortunately, I don’t know if I can send you a screenshot. I first thought that it broke after a certain number of headers, but it varies from a page to another. I also made sure that my tags were properly nested and they were looking good. Most pages are fine, only the more loaded ones freak out. Any clues to look at ?

  9. If you want to use Method 2 then you should add somewhere on your page a next code:

    The ToC will be add into it.
    Also if your site is a sub-site then you should write the extended path to your Style Library/TableOfContents scripts.
    example:
    <script src="/sites/DocumentRepositories//Style%20Library/TableOfContents/sp.tableOfContents-1.0.js” type=”text/javascript”>

  10. Thank you Stefan for you plugin!
    this code was truncated too

    • code was truncated
      script src=”/sites/DocumentRepositories/YOUR-SITE-NAME-HERE/Style%20Library/TableOfContents/sp.tableOfContents-1.0.js” type=”text/javascript”

  11. I think the issue with method 2 is that you need to place a in your wiki page. It needs that in order to place the TOC.

  12. sorry my comment did not show up. You need to place a div tag with the class of ewiki-slink.

  13. Thank you very much Stefan! I have installed it successfully using the first method.

  14. Hi Stefan,

    I used the second method, but nothing, it didn’t show anything (in blank). I checked the source code of the page, and I verified the url are valid and I got the resources (js, css, etc).

    I don’t know where it’s the problem. Could you help me?

    The sample code source it’s like this:

    ​Ejemplo​​​​​En esta página se enalzarán los informes agrupados por años.​Año 2016​​Informes de producción semanal​​​Ejemplo 3​​​​​​​false,false,1

Comments are closed.