Displaying html fields in widget - Service Portal

[jimnicholson]

Hey All,

I have a task with an HTML field, and I want to display the HTML as it shows on the screen, but when I return it to the widget, I just get the tags and no formatting.

Is there any way to transform this to show html?   Is this where I would use something like "ng-bind-html"?

Still fairly green when it comes to angular and widget development but learning on the fly.

Any help is greatly appreciated.

Thank you very much in advance,

Jim

[Anais Geisen · Accepted solution]

Hi,

Yes there is the bind html.

Here is an example of HTML code:

<div ng-bind-html="::data.desc" "></div> (where data.desc is your HTML field that you get in the server part)

and the client side:

function($scope, $sce) {

  /* widget controller */

  var c = this;

// Display HTML field

$scope.data.desc = $sce.trustAsHtml($scope.data.desc);

}

Please mark it helpful

Regards

[jimnicholson]

Thank you very much.

So just for my own sanity, and to be sure I understand, I have a field called "eng.task" in an array called "data.curEng"

So would I replace all the "data.desc" in your example with "eng.task" on both the client and html code side?   Do I can care about the data.curEng anywhere?

So html;

<div ng-bind-html="::eng.task"></div>

and client

function($scope, $sce) {

  /* widget controller */

  var c = this;

// Display HTML field

$scope.eng.task = $sce.trustAsHtml($scope.eng.task);

}

Thank you and I appreciate you time.

[Anais Geisen]

Would it be possible for you to show your server code to see exactly what you mean there?

Because in fact, in the server part, the variable 'data' is an array where you can stock and transport variables into client side (so HTML part too).

So if you have your field 'eng.task', you would do like this:

//HTML

<div ng-bind-html="::data.myvariable"></div>

// Server part

data.myvariable = eng.task;

and the client side:

function($scope, $sce) {

  /* widget controller */

  var c = this;

// Display HTML field

$scope.data.myvariable= $sce.trustAsHtml($scope.data.myvariable);

}

But if you say that you already have the variable in data.curEng, you can directly use this array.

Hope this will help you

Regards

[jimnicholson]

This was incredibly helpful, not just with the html piece but a couple other things as well.   Thank you so much for your time and assistance.