|
Knowledge articles can grow so extensive that you may lose track of their contents. Here, it would be helpful to have navigation aids at the beginning of the article (for example, a table of contents) to navigate to the relevant part with one click. Unfortunately, OOTB the rich text editor does not offer the possibility to do this, but you can enable the respective buttons or write the necessary HTML code yourself. This article will demonstrate how to do it. |
|
Targets of local navigation jumps are called "anchors" and there are two options for implementing them.
(1) Activate and use the corresponding button in the editor toolbar
For fields of type "HTML", content editing is done in a so-called rich text editor and ServiceNow uses TinyMCE, one of the best-known open source projects, for this purpose. This editor has a lot of configuration options and features which can be greatly expanded by the many plugins. Basically, the configuration of the offered buttons in the toolbar can be controlled via the following system properties:
- glide.ui.html.editor.v4.enabled_plugins
That system property specifies all additional TinyMCE plugins that should be loaded. - glide.ui.html.editor.v4.toolbar.valid.buttons
That property lists all valid buttons which can be used for further configuration of the toolbars. The buttons are defined via the loaded TinyMCE plugins and thus result from the values specified in the previous system property. - glide.ui.html.editor.v4.toolbar.line1 / glide.ui.html.editor.v4.toolbar.line2
These system properties have stored all provided buttons in a comma-separated list. Using the pipe char will create a button group. The "anchor" value must be entered at the desired position to provide the corresponding functionality.
After this is accomplished, the anchor icon will be offered in the toolbar for most of the HTML based fields:
However, in the rich text editor of the "Article body" field of knowledge articles the anchor icon is still missing. In addition, the arrangement of the icons here is quite different from the HTML fields in other tables.
This is due to the fact that all settings can be defined individually for each field, which will override the global settings.
To change the behavior of the "Article body" field, open the corresponding Dictionary entry in the "Advanced" view (a respective link for that is offered in the "Related Links" section):
At Dictionary field "Attributes" the configuration format differs from the one for system properties, however the basic principle is the same. Place the anchor icon at the desired location and then save the dictionary entry.
With the help of the new anchor icon, you can place anchor based jump targets wherever you want:
(2) Write the necessary HTML code yourself
If you cannot find a system administrator to enable the anchor icon you can also the underlying HTML code by yourself. An anchor is defined as:
<a name="ANCHORNAME"></a>
The attribute value ANCHRORNAME has to be replaced, and the complete HTML tag can be placed wherever you want:
<h1><a name="chapter1"></a>Chapter 1</h1>
After defining jump targets, it is now time to create the links that will allow you to jump there.
To do this, simply select the text or image and then click on the link icon in the toolbar or press the key combination CTRL+K. However, instead of a normal URL, the name of the jump target is entered with a prefixed hash character:
After saving the form and selecting "View Article" you can try the recently created link:
How can we link to an anchor in another text section without having the reader to open that section first?
We are using collapsed fields (like the Instructions for employees field in the screenshot below and want to be able to link to anchors in the collapsed fields.
