Change Additional Comments and Work Notes to HTML?

josh_tessaro · ‎06-17-2015

Our management and user base wants to be able to insert inline images into Additional Comments and work notes and have them display correctly in the journal (Activity log). This is something that our previous system did well and which is missing in ServiceNow.

I am looking for a way to do this as seamlessly as possible. I have followed this guide: Implementing HTML in Comments - ServiceNow Wiki, with both Work Notes and additional comments, however I am having some issues.

1. Things entered in the new fields are correctly transferring to the OOB comments and work_notes fields and displaying html formatting with the exception of images. which are not displayed at all.

2. When attaching a suggested KB it ends up in description instead of the correct field (comments or u_comments) as the expected comments field is no longer on the form. I have looked but cannot find the logic that controls where to insert the attached KB text.

Any suggestions on how to solve the above or to better accomplish our goals?

Thanks,

-Josh

josh_tessaro · ‎07-16-2015

The below was provided mostly by ServiceNow support:

Steps to Resolution:

1) Set the field in question (or create a custom field) to Type: HTML

2) In the dictionary for the field, create an attribute for HTML Sanitize and set the value to false.

3) Create a business rule that auto inserts code tags and sets the Style to display: block

4) [OPTIONAL] I created another onDisplay business rule that wiped out the field so the content of the field did not linger.

Additional details

2. add html_sanatize=false to the attributes of the new html field.

3. add on before business rule to field

function onBefore(current, previous) {


   //If no opening [code] tag found, wrap it.


   var note = current.work_notes + "";


   if (note.indexof("[code]") == -1) {


       var wrappedNote = "[code]" + note + "[/code]";


       note = wrappedNote;


   }




   // Clunky workaround to inject style attribute into image tags.


   var noteStyle = note.replace(/\<img style\=\"/g, "\<img style\=\"display\: block\; "); 


   if (note != noteStyle) {


       current.work_notes = noteStyle;


   }


}

4. you will find that HTML fields do not clear field contents after submit so you can create an onDisplay script to clear the filed:

current.field_name = '';

NOTE: At this time this will prevent the Additional Comments block form generating correctly in notifications

Edit: fixed .replace as per Leslie's suggestion.

View solution in original post

josh_tessaro · ‎07-16-2015

The below was provided mostly by ServiceNow support:

Steps to Resolution:

1) Set the field in question (or create a custom field) to Type: HTML

2) In the dictionary for the field, create an attribute for HTML Sanitize and set the value to false.

3) Create a business rule that auto inserts code tags and sets the Style to display: block

4) [OPTIONAL] I created another onDisplay business rule that wiped out the field so the content of the field did not linger.

Additional details

2. add html_sanatize=false to the attributes of the new html field.

3. add on before business rule to field

function onBefore(current, previous) {


   //If no opening [code] tag found, wrap it.


   var note = current.work_notes + "";


   if (note.indexof("[code]") == -1) {


       var wrappedNote = "[code]" + note + "[/code]";


       note = wrappedNote;


   }




   // Clunky workaround to inject style attribute into image tags.


   var noteStyle = note.replace(/\<img style\=\"/g, "\<img style\=\"display\: block\; "); 


   if (note != noteStyle) {


       current.work_notes = noteStyle;


   }


}

4. you will find that HTML fields do not clear field contents after submit so you can create an onDisplay script to clear the filed:

current.field_name = '';

NOTE: At this time this will prevent the Additional Comments block form generating correctly in notifications

Edit: fixed .replace as per Leslie's suggestion.

leslie8 · ‎07-16-2015

Great! You're so helpful.

I got this working. To work around the problem with notifications, I am going to create a new field for the purposes of showing images in the Activity Log, and I'm going to leave the original field alone so the notifications stay the same. Then in the BR I should be able to copy the contents of the message into both of those fields, one of them with no changes (to send in the notification) and the other one with the HTML style modifications (in order to display on the activity log).

leslie8 · ‎07-16-2015

I noticed that the code will only replace the first embedded image.

Here's a slight modification which will replace all of the images by utilizing a "global" replacement.

var noteStyle = note.replace(/\<img style\=\"/g, "\<img style\=\"display\: block\; ");

josh_tessaro · ‎07-16-2015

Thanks!

I had honestly not gotten that far in testing as I had stopped after noticing that the notifications die. I would be curious to hear more once you implement the two field approach and get it working.

Thanks for the correction on the replacement.

lberthold · ‎07-17-2015

Thanks Josh and Leslie!

I am trying to implement this workaround...but the following line is giving me errors when I try to save the business rule:

var noteStyle = note.replace("\<img style\=\"", "\<img style\=\"display\: block\; ");

I get the following error (the line of code is line 10)

WARNING at line 10: Bad escapement.

When I change the code to be the line that will replace all images,

var noteStyle = note.replace(/\<img style\=\"/g, "\<img style\=\"display\: block\; ");

I get this error:

WARNING at line 10: Unexpected escaped character '<' in regular expression.

WARNING at line 10: Bad escapement.

Any ideas?

Thanks!

Lori