Creating a table of contents in a knowledge base article

[Suzanne Smith]

In the blog post, ServiceNow Knowledge Base template code for our Internal Process articles, servicenowkevin wrote about the Internal Process template we use here at ServiceNow and provided the code. Amber Pearson commented on the post and had some specific questions about the table of contents in the code. I'd like to share some additional details about how the the table of contents works in the template and hopefully answer Amber's questions at the same time!

Here's the code for the table of contents in our Internal Process template:

Here is the code in our Internal Process template that specifically creates the table of contents.

<!-- Open Table of Contents-->

<table class="tocTable" width="375">

<tbody>

<tr>

<td><a style="text-decoration: none;" name="toc"></a><span class="hd1">Content</span></td>

</tr>

<tr>

<td><a style="text-decoration: none;" href="#Overview"><span style="color: #646464;" color="#646464">1. Overview</span></a></td>

</tr>

<tr>

<td><a style="text-decoration: none;" href="#Roles"><span style="color: #646464;" color="#646464">2. Process Roles</span></a></td>

</tr>

<tr>

<td><a style="text-decoration: none;" href="#Process"><span style="color: #646464;" color="#646464">3. Process</span></a></td>

</tr>

<tr>

<td><a style="text-decoration: none;" href="#Procedure"><span style="color: #646464;" color="#646464">4. Procedure</span></a><br />           <a style="text-decoration: none;" href="#41"><span style="color: #646464;" color="#646464">4.1   Subtitle</span></a><br />           <a style="text-decoration: none;" href="#42"><span style="color: #646464;" color="#646464">4.2   Subtitle</span></a><br />           <a style="text-decoration: none;" href="#43"><span style="color: #646464;" color="#646464">4.3   Subtitle</span></a></td>

</tr>

<tr>

<td><a style="text-decoration: none;" href="#Info"><span style="color: #646464;" color="#646464">5. Additional Information</span></a></td>

</tr>

</tbody>

</table>

<!-- Close Table of Contents-->

Using hyperlinks and anchor tags with the table of contents

The table of contents uses hyperlinks pointing to anchors (sometimes called "bookmarks") so that readers can click an item in the contents and go directly to the corresponding section in the article.

The hyperlink is a word or group of words that readers can click to jump to another location within the article. The HTML <a> tag defines a hyperlink using the following syntax:

<a href="#id">Text to hyperlink</a>

The id is the unique name of the anchor and the Text to hyperlink is the hyperlinked text that can be clicked. For example, the following <a> tag appears in the table of contents code above:

<td><a style="text-decoration: none;" href="#Overview"><span style="color: #646464;" color="#646464">1. Overview</span></a></td>

This <a> tag makes the table of contents text entry "1. Overview" a clickable hyperlink to the Overview section (specified as href="#Overview") in the article.

The other half of the equation is "where are those clickable links going?" That would be to the anchors. The anchor syntax is easy:

<a name="id"></a>

Add the anchor to the beginning of the line or section to which readers are going to jump when they click the hyperlink. For example, in the Internal Process template code, the following anchor appears at the beginning of the Overview section:

<a name="Overview"></a>

Here is how the hyperlinked table of contents text and the anchor appear in the knowledge base article when you are editing:

Customizing the templates to suit your needs

If you are using the Internal Process template that servicenowkevin shared in the ServiceNow Knowledge Management User Group, you can change the table of contents text and anchors to whatever you need.

How about:

or even:

You can easily edit the text in the table of contents in edit mode.

To edit an anchor name, follow these steps:

1. Open the article to edit in edit mode.
2. Click the Source code button .
3. Navigate to the anchor tag.
4. Edit the anchor tag contents.
   
   
5. Click OK.
   

Additional information:

• For general information about writing knowledge base articles, see Creating Knowledge in the ServiceNow production documentation.
• For a short video about the using the Knowledge application, see Getting Started with ServiceNow Knowledge Base on the ServiceNow YouTube channel.
• For information about HTML anchor tags, see the Links in HTML Documents page on the World Wide Web Consortium (w3c) website.
  
• For information about the TinyMCE editor (used in the Knowledge application), visit the TinyMCE website at www.tinymce.com.