Using HTML in ServiceNow Fields
Using HTML to write messages to our users in ServiceNow tickets isn't easy. I was glad to discover it does remain possible. A welcome feature for IT business.
1 The Problem
ServiceNow is one of those Web applications which alter the text that you enter in its fields. Arguably, there's some sanitisation work to be done for an application to ensure its security. The need to make sure that HTML tags, CSS – or worse – JavaScript isn't interpreted without further ado is clearly a given. What's not so obvious, though, is why these applications also insist on reducing space.
It's especially surprising for applications which come from a computing environment and I'd consider ServiceNow to be clearly one of them. When we dump the output of a program where keeping indentation intact is essential to understand each other with the user, it is problematic that a parser decides to reduce sequences of white space to a single one. But with ServiceNow, there's a way around this.
2 The Code Tag
It is called code tag but we're not referring here to the HTML <code> tag, mind you. It's something specific to ServiceNow where the blocks look like [code] this [/code]. Such code blocks are made to interpret HTML – or at least some subset thereof. Unlike some rumours I'd been hearing, you can have multiple [code] blocks in a given field. They can be used in-line but also to enclose multiple lines. This is where you'd typically want to wrap up HTML <pre> tags to leave your text and spaces untouched, for instance to include code listings, program outputs or tabular data:
[code]
<pre>
this tabular data
will be left
untouched inside this
ServiceNow code block
</pre>
[/code]... or almost. Because strangely enough, ServiceNow will then decide to remove newlines, something it wouldn't even do outside [code] blocks. Using <samp> or <code> instead of <pre> doesn't help. You really need to add line breaks yourself and, even more strangely, it's something you have to do in HTML, by appending <br> to each of your lines. Adding newlines (\n) or carriage returns (\r) will not help either. It really seems to have to be the HTML <br>:
[code]
<pre>
this tabular data<br>
will be left<br>
untouched inside this<br>
ServiceNow code block<br>
</pre>
[/code]You're in for quite a challenge if you intend to display HTML listings – or anything that's remotely related to XML, for that matter – because ServiceNow will somehow try to interpret angle brackets. As a result, this will have an unexpected result:
[code]
<pre>
<table><br>
<tr><br>
<td>this</td> <td>tabular</td> <td>data</td><br>
</tr><br>
<tr><br>
<td>will</td> <td>be</td> <td>left</td><br>
</tr><br>
<tr><br>
<td>untouched</td> <td>inside</td> <td>this</td><br>
</tr><br>
<tr><br>
<td>ServiceNow</td> <td>code</td> <td>block</td><br>
</tr><br>
</table><br>
</pre>
[/code]What you really need to do, is to replace those angle brackets which shouldn't be interpreted by < and >. This applies then to <table>, <tr>, <td>, but not to <br>:
[code]
<pre>
<table><br>
<tr><br>
<td>this</td> <td>tabular</td> <td>data</td><br>
</tr><br>
<tr><br>
<td>will</td> <td>be</td> <td>left</td><br>
</tr><br>
<tr><br>
<td>untouched</td> <td>inside</td> <td>this</td><br>
</tr><br>
<tr><br>
<td>ServiceNow</td> <td>code</td> <td>block</td><br>
</tr><br>
</table><br>
</pre>
[/code]3 Beyond Code Tags
With these opportunities and constraints in mind, I'm envisioning a bit of JavaScript which would automatically wrap up all of your text between [code] blocks. It could even wrap it up between <pre> blocks, because having everything preformatted is often a good thing after all, even if it's just prose. And the same bit of JavaScript could then append <br> tags for each line.