How to translate text within a widget in the service portal?

[James Darcy]

To translate our service portal into French I have set the language of my profile to French and have been translating many parts successfully so that when I revert my language settings back to English the words also translate back. However, for this widget although I can translate the title of it I am not sure how to translate the text within it:

I have attempted to translate the contents (while my language settings are set to French) by pressing control and right-clicking on the widget and selecting the Widget in Editor option where I can translate the HTML like such:

This is fine when my language is set to French but as soon as I switch back to English I found that the text in my widget stays in French:

Is there some way that this text can be translated so that when I select the language of the user the text is in the correct language?  

Any help would be greatly appreciated.

[Thilo Grobe · Accepted solution]

Hi,

translation of content in Service Portal Widgets works best using the message functionality. This is also available when editing the HTML in the widget editor. Just put your text into the HTML like in the example below (english, if the base system language). 

<div class="panel-body">
   <p>${Some french text}</p>
   <p>${Some more french text}</p>
</div>

When a user looks at the widget with another language selected, the system looks for a matching translation in the messages table in your instance.

See here for more on the sys_ui_messages table:

https://docs.servicenow.com/bundle/london-platform-administration/page/administer/localization/refer...

[Josh Virelli]

Absolutely correct! To add to this, if you're inserting dynamic content from the server like a GlideRecord, wrap it in gs.getMessage(); and store it in the data object.

Example:

var gr = new GlideRecord('table');
gr.get('SYSIDOFRECORD');

data.title = gs.getMessage(gr.title);


And then in HTML, insert it with the {{}} angular syntax.

<h4>{{data.title}}</h4>

[Anubhav Srivas1]

Hey Josh,

I need to do something similar like this.

Can you please help.

I need to populate different contents when the language changes. i have written a catalog client script where i have used : ( g_lang ) to determine the language used and added the contents for different languages. see image : ed1,2,3,4.

But, that doesn't work for me as it should not sure why. I need to display the contents in comments ( the last line : check image ed 5 ) when selected "Yes" backed value =1.

I have attached the screenshot for reference. eg: when selected plan production impacted as Yes it should populate the  contents and same for all other languages as well. As of now only spanish works and other's don't. check image : ed5

[James Darcy]

Yes I wrote English text within the curly brackets (as my base language is English) but then by creating records in the sys_ui_message table using the format:

Key: English text

Language: French

Message: French translation of text

The translations started getting pick up according to the user's language settings.

So thank you for the help!!