Render HTML in Service Portal Comments widget

tchaikin
Giga Expert

I would like to modify the OOB comments widget on the ticket page to either:

- Display URLs in comments as links

or

- Render HTML in each comments box. 

I see that the value of the comments is already bound to this element, so I'm stumped as to how to make it actually render HTML.

<p ng-if="::(e.element != 'attachment')" ng-bind-html="::e.value"></p>

If anyone has any experience with this, please let me know what I might be missing here.

Thanks,

Todd

5 REPLIES 5

Cody Smith _ Cl
Tera Guru

Hello Todd,

 

Put your html in an Anchor tag to make a link, or just put it in the p tag if you want show the URL

<p ng-if="::(e.element != 'attachment')">
<a ng-bind-html="::e.value"></a>
</p>

 

<p ng-if="::(e.element != 'attachment')" ng-bind-html="::e.value">{{::e.value}}</p>

To render a webpage from a URL, use an iframe.

<iframe src="Your link here height="500px" width="500px"></iframe>

Here is the W3C info about iframes. 

 

If my answer was helpful, or solved your issue, please mark it as Helpful / Correct.
Thank you,
Cody Smith

tchaikin
Giga Expert

So you're saying it should be rendering as HTML? Because it isn't even if I use HTML tags in my comment.

find_real_file.png

Again - this is the default Comments widget in the portal, so I imagine I'm missing something.

tchaikin
Giga Expert

What I had to do was create a function which makes the value become true HTML.

I add this function to the Client Script:

$scope.toHtml = function(text) {
		text = text.replace(/&lt;/g,"<");
		text = text.replace(/&gt;/g,">");
		return $sce.trustAsHtml(text);
	}

And updated the HTML template line to:

<p ng-if="::(e.element != 'attachment')" ng-bind-html="toHtml(e.value.toString())"></p>

ezrawalgraf
ServiceNow Employee
ServiceNow Employee

This worked for me as well!! -thx