ServiceNow: Using HTML in Additional Comments and Work Notes

The “Additional Comments” and “Work Notes” fields in ServiceNow are displayed as plain text by default. Anything entered into these fields is treated as literal text. This considerably impairs the readability and structure of entries, especially when it comes to links, lists, tables, and other formatting.

However, ServiceNow provides a built-in mechanism for this purpose, albeit somewhat hidden: the [code] tag. Content wrapped in this tag is treated as HTML and rendered accordingly in both the “Additional Comments,” which are visible to the caller, and the “Work Notes,” which are visible only internally. This makes the otherwise plain text fields significantly more readable.

Using the [code] Tag

Any text between an opening [code] tag and a closing [/code] tag is interpreted as HTML and rendered accordingly.

[code]
 
<strong>This text is displayed in bold.</strong>
 
[/code]

Without the [code] tag, the same input would display the literal string <strong>This text is displayed in bold.</strong>.

Verifying That the [code] Tag Is Enabled

Whether the [code] tag is interpreted depends on the glide.ui.security.allow_codetag system property. If content wrapped in a [code] tag is not rendered, check this property:

1. Navigate to sys_properties.list in the instance.
2. Search for the property glide.ui.security.allow_codetag.
3. Confirm that its value is true, which is the default.

Practical Examples

Links

It is possible to paste a bare URL into the “Additional Comments” or “Work Notes” field, although this is not particularly readable. To provide a genuine hyperlink with a meaningful label, the anchor element can be used:

[code]
 
<a href="https://support.example.com/kb/12345">View the knowledge article</a>
 
[/code]

Accessibility Note:

The purpose of a link should be clear from either the text of the link itself or from the context in which it appears. For example, the link “View the knowledge article” clearly indicates where it leads. However, the link “KB0012345” only does so when the surrounding text provides an explanation, such as “Follow the steps in KB0012345 to reset your password.” Generic text such as “click here,” or a pasted URL on its own, should be avoided. For more details, see Understanding Success Criterion 2.4.4: Link Purpose (In Context).

Bold Text

To ensure that critical information is not overlooked within a longer comment, that information can be formatted in bold:

[code]
 
<p><strong>Action required:</strong> Please restart the service.</p>
 
[/code]

Highlighted Text

To draw attention to important information, highlighted text can be used:

[code]
 
<p>This is <mark>important information</mark>.</p>
 
[/code]

Headings

To add hierarchy and structure to an entry, a heading can be used:

[code]
 
<h3>Summary</h3>
 
<p>Below is a brief summary of the work carried out.</p>
 
[/code]

Blockquotes

To set off quoted text, such as a message from another person or an excerpt from a related record, a blockquote can be used:

[code]
 
<p>The following message appeared on the health dashboard of the provider:</p>
 
<blockquote>The service was unavailable between 09:00 and 09:20.</blockquote>
 
[/code]

Code Blocks

To make commands, log entries, or source code easier to read, a code block can be used:

[code]
 
<p>Please use the following command to restart the web server:</p>
 
<pre><code>systemctl restart nginx</code></pre>
 
[/code]

Tables

To present tabular data, tables can be used:

[code]
 
<table border="1" cellpadding="4" cellspacing="0" style="border-collapse: collapse">
  <caption>
    Status of the production web servers
  </caption>
  <thead>
    <tr>
      <th scope="col">Server</th>
      <th scope="col">Status</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>PROD-WEB-01</td>
      <td>Available</td>
      <td>None</td>
    </tr>
    <tr>
      <td>PROD-WEB-02</td>
      <td>Unavailable</td>
      <td>Restart scheduled</td>
    </tr>
  </tbody>
</table>
 
[/code]

Accessibility Note:

When using tables, it is important to ensure that they include meaningful headers and a caption to describe their purpose. Marking header cells with <th> and a scope attribute programmatically associates them with the data cells in their row or column. This enables assistive technology to announce which headers apply as the user moves through the table. The caption, on the other hand, provides a brief description of the table’s content. For more details, see Understanding Success Criterion 1.3.1: Info and Relationships.

Combining Plain Text and HTML

It is possible to mix plain text and code blocks within the same comment. However, only the content inside the [code]...[/code] tags is rendered as HTML; the surrounding text continues to be treated as plain text:

Below is an overview of the current state of the work:
 
[code]
<ul>
  <li><strong>Database migration:</strong> Completed</li>
  <li><strong>API development:</strong> In progress</li>
  <li><strong>Full testing:</strong> Pending</li>
</ul>
[/code]
 
Please let me know if you have any questions.
 
[code]
Kind regards,<br/>
Stefan Kühnel
[/code]

Conclusion

The [code] tag is a subtle but useful feature. It repurposes the plain-text “Additional Comments” and “Work Notes” fields so that they can carry links, headings, blockquotes, code blocks, and tables alongside plain text. This provides a variety of additional formatting options, improving readability and creating a more professional impression.