The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Displaying html fields in widget - Service Portal

jimnicholson
Kilo Guru

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

1 ACCEPTED SOLUTION

Anais Geisen
Tera Expert

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


View solution in original post

7 REPLIES 7

Anais Geisen
Tera Expert

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


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.


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


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.