Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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