Show 'Translated HTML' field value in proper formatting in a Service Portal Widget

[Onkar Pandav]

Hello,

I have some text in the 'Description' field of the 'Product Model [cmdb_model]' table.
Now, I want to show same field value in the service portal widget with proper formatting but it is showing value along with HTML tags.

Please see below screen shots.

Service portal widget value:

I was able to remove the tags but, I want that text should have same formatting as that of actual/backend field.
How to achieve that in the widget??

[Ravi Gaurav · Accepted solution]

Hello @Onkar Pandav 

Use the below code:-

<div class="panel-body">
<ul class="grid-list" role="list">
<li class="item-card-column" ng-repeat="item in data.accInfo">
<div class="short-desc">
{{item.short_description}}
</div>
<div class="row">
<div class="column1">
<img ng-src="{{item.image+'.iix'}}" style="width:-webkit-fill-available;" />
</div>
<div class="column2">
<div ng-bind-html="item.description"></div>
</div>
</div>
</li>
</ul>
</div>

Add client logic

function($scope, $sce) {
$scope.data.accInfo.forEach(function(item) {
item.description = $sce.trustAsHtml(item.description);
});
}

server

data.accSysId = $sp.getParameter("sysId");
data.accInfo = [];

var grInfo = new GlideRecord('cmdb_model');
grInfo.addQuery('sys_id', data.accSysId);
grInfo.query();

if (grInfo.next()) {
var accessory = {};
accessory.sysid = grInfo.getValue('sys_id');
accessory.name = grInfo.name.getDisplayValue();
accessory.model = grInfo.model_number.toString();
accessory.price = grInfo.cost.toString();
accessory.short_description = grInfo.getValue('short_description');
accessory.image = grInfo.getValue('picture');
accessory.description = grInfo.getValue('description'); // Raw HTML description
data.accInfo.push(accessory);
}

[Onkar Pandav]

Hi Tejas,
<pre> is also not working. Please see below screen shot.

[Juhi Poddar · Accepted solution]

Hello @Onkar Pandav 

Here is the updated script that will meet your requirement:

Server Script:

(function () {
 data.accSysId = $sp.getParameter("sysId");
data.accInfo = [];
var grInfo = new GlideRecord('cmdb_model');
grInfo.addQuery('sys_id', data.accSysId);
grInfo.query();
if (grInfo.next()) {
	var accessory = {};
	accessory.sysid = grInfo.getValue('sys_id');
	accessory.name = grInfo.name.getDisplayValue();
	accessory.model = grInfo.model_number.toString();
	accessory.price = grInfo.cost.toString();
	accessory.short_description = grInfo.getValue('short_description');
	accessory.image = grInfo.getValue('picture');
	accessory.description = grInfo.getDisplayValue('description');
	gs.addInfoMessage(accessory.description); //to debug only
	data.accInfo.push(accessory);
}
	
function decodeHTML(str) {
	var a = str.replace(/<\/?[^>]+(>|$)/g, ""); //Remove tags
	var b = a.replace(/&amp;/g, '&'); //Retain any ampersands that are just ampersands
	return b.replace(/&#(\d+);/g, function(match, dec) {
		return String.fromCharCode(dec); //Returns the special character from the decimal code representation and returns the entire decoded string.
	});
}
})();

HTML Script:

<div class="panel-body">
    <ul class="grid-list" role="list">
      <li class="item-card-column" ng-repeat="item in data.accInfo">
        <div class="short-desc"> {{item.short_description}} </div>
        <div class="row">
          <div class="column1">
            <img ng-src="{{item.image+'.iix'}}" style="width:-webkit-fill-available;"/>
          </div>
          <div class="column2">
            <div ng-bind-html="::data.accInfo[0].description"></div>
          </div>
        </div>
      </li>
    </ul>
</div>

Result:

Note:

• No need to add decodeHTML
• <div ng-bind-html="::data.accInfo[0].description"></div>  will render the description field value with same format

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps others find the solution more easily and supports the community!"

Thank You
Juhi Poddar

[Onkar Pandav]

Hey Ravi & Juhi,
Thank you so much. You guys are awesome!!

Appreciate your help!

[Juhi Poddar]

Hello @Onkar Pandav 

You are most welcome!

I am glad that I was able to help you resolve the issue.

Thank You

Juhi Poddar