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);
}

[Ravi Gaurav]

Hi @Onkar Pandav 

You can Use ng-bind-html to Render HTML .

Note the below is tested in PDI and its working:-

Replace the part where the Description value is displayed with the following:
<div ng-bind-html="data.description"></div>

Widget Server Script

In the widget’s server script, fetch the Description field value and ensure it is returned as part of the data object:
(function() {
var modelId = $sp.getParameter('sys_id'); // Replace with your logic to get the model's sys_id
var gr = new GlideRecord('cmdb_model');
if (modelId && gr.get(modelId)) {
data.description = gr.getValue('description');
}
})();

Widget Client Script

To render HTML safely, inject the $sce service into the client script:

(function() {
// Inject Angular's $sce service
angular.module('sn.$sp').controller('myWidgetCtrl', function($scope, $sce) {
$scope.data.description = $sce.trustAsHtml($scope.data.description);
});
})();

[Onkar Pandav]

Hi Ravi,

Thanks for the code, but unfortunately its not working.
Please see my code:

HTML:

<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">
            <pre>{{item.description}}</pre>
          </div>
        </div>
      </li>
    </ul>
</div>

Server script:

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');
	var desc = grInfo.description;
	accessory.description = decodeHTML(desc);
	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.
	});
}

No code in the Client controller.

[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);
}

[Community Alums]

Hi @Onkar Pandav ,

To display text exactly as it is written in HTML, including spaces and line breaks, use the <pre> tag; this stands for "preformatted text" and ensures the text is rendered with its original formatting preserved.

<pre>

your  text 
     here
  
  test               test

</pre>