Translated HTML won't show up in widget

[Miriam Berg]

Hi,

Looking at the OOB Widget "HTML", I can see in the Options Schema that the HTML field is added as a translated HTML field - but switching language and trying to add a translation changes the original version of the HTML instead of adding a translation. It's not showing any translation.

Options Schema:

[{

  "name": "html",

  "label": "HTML",

  "type": "translated_html",

  "default_value": " <b>hello</b>"

}]

Creating a new translated HTML field is letting me translate the HTML but when I cloned the HTML widget and changed the references to match the new field - again, the translation won't show up. My question is: how do i show the translated contents of an HTML field? The google searches i've done suggest that this should "just work"... but it doesn't.

New widget HTML:

<div>
   <div ng-if="!c.options.u_html" class="panel panel-default">
       <div class="panel-body">
           <b>${HTML Widget}</b><br>
           ${Ctrl + Click > Options to set HTML content}
       </div>
   </div>
   <div ng-if="c.options.u_html" ng-bind-html="c.u_html"></div>
</div>

New widget Client controller:

function ($scope, $sce) {
   var c = this;
   c.u_html = $sce.trustAsHtml(c.options.u_html);
   $scope.$watch('c.options.u_html',function(){
   c.u_html = $sce.trustAsHtml(c.options.u_html);
   })
}

Thanks in advance for suggestions/ideas/solutions!

BR /Miriam

[Miriam Berg]

Changing field type to Translated text immediately solved the problem (same code!), and retained the HTML formatting too. Feels like there's a bug with the Translated HTML field type that is doesn't show translations properly.

I feel like this is good enough, even though it would be easier to administer the Translated HTML field.

[ingaro]

Hi Miriam!

I am looking for same thing - could you please tell me where you changed the field type to Translated Text?  

IA

[Miriam Berg · Accepted solution]

Hi Anita,

A simpler way to translate the HTML would be to user ServiceNow's built-in message functionality.

In many places in ServiceNow you show a translated message by using dollar curly brackets ${ your text here }. So instead of trying to translate text in the HTML option (which doesn't work because it is stored in a JSON field) you wrap your text in dollar curly brackets, and translate it through System Localization > Messages.

For example, if you have a very simple HTML code today, that you entered in your "HTML" widget instance:

<p>Welcome</p>
<p>Add your comment</p>

You would translate it by using the same widget instance and just change the code to:

<p>${Welcome}</p>
<p>${Add your comment}</p>

And then make sure there are translations in System Localization > Messages for each separate message:

[ingaro]

Thank you Miriam! that worked brilliantly