Formatting within Journal fields using HTML & [code]

[dylan_lindgren]

Most fields in ServiceNow store a single inputted text value. To view previous values one needs to go into the record's audit history. Journal fields are different, in that all previous values of this field are shown as distinct posts within the Activity Stream timeline. This allows them to be used as a method of communication with users and coworkers about the current record, and also as a log of the history of the record.

With journal fields, the content of notifications are commonly based on the newly updated value of the journal fields, and that they only accept input as plain-text. Out of box, there are two journal fields on the task table:

• Additional comments [comments]
• Work notes [work_notes]

Adding HTML code in Journal fields

As with most fields, if the new value contains HTML code it is escaped. For example, if you were to type the below valid HTML code in a journal field:

It would appear in the Activity Stream as follows:

The way this is done is by replacing any characters in a journal field that could be interpreted by a browser as HTML with it's HTML entity code.

For example, HTML tags make use of < and > to declare the start and end of a tag. ServiceNow replaces these with their HTML entity code &lt; (less than) and &gt; (greater than), meaning that when the browser reads the code it doesn't get processed as a literal < and >, and therefore does not mistakenly become a HTML element.

Using the [code] tag in Journal Fields

Text wrapped in [code] tags bypasses the escaping process described above, and will instead be rendered as HTML. For example, the same input used above, but wrapped in [code] tags:

Will appear in the Activity Stream as follows:

Note that the <blockquote> tags are now being interpreted as HTML elements, and are not being escaped. Also note that you can use multiple sets of [code] tags within a single journal entry.

Formatting styles in Journal entries

There are a number of HTML elements that you can use to add styles to your journal updates. Some examples are shown below:

Style	Tag(s)	Example Journal Entry
Italic	<em>	[code]This text is <em>italic</em>[/code]
Strikethrough	<strike>	[code]This text is <strike>strikethrough</strike>[/code]
Code (inline)	<code>	[code]Check the script include <code>KBKnowledgeBase</code>[/code]
Code (block)	<pre><code>	[code]<pre><code>function foo() {<br/>       console.log('bar');<br/> }</code></pre>[/code]
Blockquote	<blockquote>	[code]<blockquote>This is a quote</blockquote>[/code]
Hyperlink	<a>	[code]<a href="https://www.servicenow.com">ServiceNow.com</a>[/code]
Bullet points	<ul><li>	[code]<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>[/code]
Numbered lists	<ol><li>	[code]<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>[/code]
Header	<h3>	[code]<h3>This is a header</h3>This is normal.[/code]

The HTML elements shown above do not contain any styling information - that is left up to ServiceNow's CSS stylesheets, and the browser's user agent stylesheet. Therefore, as the styles rely on ServiceNow CSS, the way they are presented to users may change after future user interface upgrades.

The above examples show how the HTML elements are displayed in the Istanbul release of ServiceNow, running UI16. See kobby.adu-nti demo in Formatting the Journal Field with the [code] tag

[patricecooper]

It is really wonderful. And is very much useful always. Very much happy to gathering the information on HTML codes. And I got a clear idea of the Adding HTML code in journal field. It is cleared about importance of this. I have interest in these topics. And now I got a clear cut idea about this. Great pleasure that I have acquired some technical version related to the this. And is useful by the experience review that is being written as here. It is really a useful article. Thank you for this valuable tips being provided about this service. There are so many online resources available to clearing the doubts like these sections. They may include cheap essay writing service, freelance services etc.You can take them if you need some more clarification.

[bianca_vaccarin]

This is awesome and well laid out! In previous docs there has been a note that only one of these can be accomplished at a time. I'm glad to see that this is not the case and you can mark up journal fields much like a WYSWIG but instead with HTML and code.

[Community Alums]

I just shared this with the rest of my admin team. This could be really useful for polishing things.

[bianca_vaccarin]

It allows for more context for notes too! viva la knowledge!

[dhergert]

But bianca.vaccarini, this is literally the opposite of WYSIWYG.   If an app needs to interpret what was typed and renders something different than what you typed, its not WYSIWYG.

I still see some things left to be desired about this:

1. When doing journal posts, there is no way to 'preview' your code comments with all the embedded HTML. If you mess up something and mistype a URL or a double-quote, now you have to redo it and there is an erroneous comment left in your journal history forever.   And to add to that, if its wrong, you can't copy your previous comment because if it renders, you can't see the source.   You have to completely re-type it, introducing another opportunity for typos.
2. This does not work for non-journal fields, which often times its more important they have links because they contain instructions or reference material

It's 2017 and I am disappointed hyperlinks aren't made automatically clickable.   You should not have to put a code block and write out an HTML anchor tag to get a URL to be clickable.

[bianca_vaccarin]

Agreed. The experience isn't exactly an ideal one. I have sent your feedback over to our Design and Experience development team. They are collecting information for how they can improve the Activity Stream for future releases and this will help them prioritize their efforts.

[chadlockwood]

This is very useful when updating tasks from a workflow. For example, at the end of a workflow that grants access to a cloud-based tool, the RITM can be updated with a clickable link that the requestor can use to go directly to the tool.

Great write up, dylan.lindgren Thanks for laying this all out.

[kobby_adu-nti]

A cheat for this can be found here:

Formatting the Journal Field with the [code] tag

[abrieljohngabri]

Thanks so much for this! However I am wondering if I could put hex characters like this ✔ Would the same code tag still be useful? Thanks so much!

[dylan_lindgren]

Hi Abriel,

These types of special characters will already appear in Journal fields if you copy paste them in. However, if you're inputting the characters using their hex number or HTML code/name (as listed on this site) then yes, using [code] tags will ensure they come through to the browser as you intend, and will not appear as text within the activity stream.

Kind regards,

Dylan