Remove html tags from widget

[Ed Hefford]

Hi,

I've built a basic widget for my ESC portal, which queries a knowledge base and displays the articles in created order.

My HTML:

<br/>
<div class="my-items-container">
  <div class="widget-header">
    <h3 class = "title">
      ${Security Hub}
    </h3>
  </div>
  <div class = "my-items-body">
    <div ng-repeat="kb_knowledge in data.newsList"> 
      <div>
        <a href="#">{{kb_knowledge.short_description}}</a>
        <br/><br/>
      </div>
      <div>
        {{kb_knowledge.text}}
      </div>
      <hr>
    </div>
  </div>
</div>

My Server Script:

(function() {

	var newsRec = new GlideRecord('kb_knowledge');
	newsRec.addEncodedQuery('workflow_state=published^kb_knowledge_base.titleSTARTSWITHSecurity');
	newsRec.orderByDesc('sys_created_on');
	newsRec.setLimit(5);
	newsRec.query();
	data.newsList = [];

	while(newsRec.next()) {
		var temp = {};
		temp.sys_id = newsRec.sys_id;
		temp.short_description = newsRec.getValue('short_description');
		temp.text = newsRec.getValue('text');
		temp.author = newsRec.getValue('author');
		data.newsList.push(temp);
	}

})();

Where I'm calling the article content, it's displaying all html tags i.e. the below:

The kb_knowledge.text is the article body.

Ideally I want to strip the tags, and make it look like a normal article body including links etc.

Assuming its some kinda client script within the widget, but not sure.

Thanks

Ed

[Harsh Vardhan · Accepted solution]

You can use method  new GlideSPScriptable().stripHTML()  to remove the tag. 

update your server side script like below. 

(function() {

	var newsRec = new GlideRecord('kb_knowledge');
  newsRec.addEncodedQuery('workflow_state=published^kb_knowledge_base.titleSTARTSWITHSecurity'); 

	newsRec.orderByDesc('sys_created_on');
	newsRec.setLimit(5);
	newsRec.query();
	data.newsList = [];

	while(newsRec.next()) {
		var temp = {};
		temp.sys_id = newsRec.sys_id;
		temp.short_description = newsRec.getValue('short_description');
		var strPlain = new GlideSPScriptable().stripHTML(newsRec.getValue('text'));

		temp.text = strPlain;
		temp.author = newsRec.getValue('author');
		data.newsList.push(temp);
	}

})();

 Thanks,

Harsh

[Harsh Vardhan · Accepted solution]

You can use method  new GlideSPScriptable().stripHTML()  to remove the tag. 

update your server side script like below. 

(function() {

	var newsRec = new GlideRecord('kb_knowledge');
  newsRec.addEncodedQuery('workflow_state=published^kb_knowledge_base.titleSTARTSWITHSecurity'); 

	newsRec.orderByDesc('sys_created_on');
	newsRec.setLimit(5);
	newsRec.query();
	data.newsList = [];

	while(newsRec.next()) {
		var temp = {};
		temp.sys_id = newsRec.sys_id;
		temp.short_description = newsRec.getValue('short_description');
		var strPlain = new GlideSPScriptable().stripHTML(newsRec.getValue('text'));

		temp.text = strPlain;
		temp.author = newsRec.getValue('author');
		data.newsList.push(temp);
	}

})();

 Thanks,

Harsh

[S Goutham · Accepted solution]

Hi @Ed Hefford :

Try to putting your kb article text into data varibale

//Client Script
function($scope, $sce) { //inject $sce in client script
 var c = this;
$scope.data.text= $sce.trustAsHtml($scope.data.text);
}

 And in HTML side use this

<div ng-bind-html="::data.text"></div> (where data.text is the KB article body)

[Ed Hefford]

Hi @S Goutham & @Harsh Vardhan,

That worked thank you, both suggestions. I had to change to the following line in the html side:

<div ng-bind-html="data.text">

I have a nice working widget now. Thank you to you both for helping.