gs.getMessage() is not working

[kpanchal]

My Portal Widget needs the French Translation and i'm using gs.getMessage for it but it is not working. But My portal is not showing French Translation. Please help, attached screenshot for the current output i'm getting and below is HTML and Script code.

HTML Code:

<div class="popular-topic-panel panel panel-default panel-wrapper b" ng-if="(data.popularTopics && data.popularTopics.length > 0) || data.options.show_empty_state === 'true'">
	<div class="popular-topic-heading panel-heading b-b">
		<h3 class="panel-title">{{data.widgetTitle}}</h3>
	</div>
	<div class="popular-topic-panel-body">
		<div class="popular-topic-empty-state" ng-if="data.options.show_empty_state === 'true' && (!data.popularTopics || data.popularTopics.length === 0)">
			<p class="popular-topic-empty-text">
				${We don't have any popular topics to show you yet.}
			</p>
		</div>
		<div class="popular-topic-body-container"
			ng-class="{'small': data.isSmall, 'no-icon': !data.icon, 'fixed': isFixed }" 
			ng-if="data.popularTopics && data.popularTopics.length > 0">
			
			<div class="popular-topic-body" ng-class="getClass()" ng-style="getStyle()"
				ng-repeat="topic in data.popularTopics">
				<a class="popular-topic-link" data-ng-attr-aria-label="{{data.widgetTitle}}, {{topic.topic}}"
					ng-href="{{topic.topicUrl}}" ng-keydown="c.keydownAction($event)">
					<img ng-src="{{topic.icon}}" alt="" />
					<div class="popular-topic-caption">
						<span class = "popular-topic-title" data-toggle="tooltip" title="{{topic.topic}}">
							{{topic.topic}}
						</span>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>

My Server Script is as below:

(function () {
	data.load_config = options.load_config;
	if(data.load_config === "async" && !input)
		return;
	var limit = options.topic_limit;
	var taxonomy = $sp.getTaxonomies();
	if (!taxonomy || taxonomy.length === 0) {
		return;
	}
	
	var session = gs.getSession();
	var popularTopicsDataKey = 'sn_ex_sp_popular_topics_data' + session.getLanguage() + gs.getUserID();
	var popularTopicsData = JSON.parse(session.getClientData(popularTopicsDataKey));
	if (popularTopicsData === null || popularTopicsData.length != limit) {
		data.popularTopics = new PopularTopicsUtil().getPopularTopics(taxonomy, limit, false);
		session.putClientData(popularTopicsDataKey, JSON.stringify(data.popularTopics));
	} else {
		data.popularTopics = popularTopicsData;
	}
	data.options = options;
	populateOptions(data);
})();

/**
 * Read and initialize the options
 * @Param {object} data - Data object
 *
 */
function populateOptions(data) {
	var CONST = {
		'HEX': 'hexcode',
		'NORMAL': 'normal',
		'SMALL': 'small',
		'TRUE': 'true',
		'FALSE': 'false',
		'DEFAULT_COLOR': '#FFFFFF',
		'DEFAULT_BORDER_OPTION': 'border-tertiary',
		'REGEX': /^#([0-9A-F]{3}){1,2}$/i
	};
	var option = data.options;
	data.isNormal = (option.display_size.toLowerCase() === CONST.NORMAL);
	data.isSmall = (option.display_size.toLowerCase() === CONST.SMALL);
	data.borderColor = option.border_color.toLowerCase();
	data.icon = option.icon.toLowerCase() === CONST.TRUE;
	data.isHex = (data.borderColor === CONST.HEX);
	data.hexcode = option.hexcode;
	var title = [option.widget_title];
	data.widgetTitle = gs.getMessage(title);

	if (data.isHex) {
		if (!CONST.REGEX.test(option.hexcode)) {
			data.borderColor = CONST.DEFAULT_BORDER_OPTION;
			data.isHex = false;
		}
	}
}

[Marcos Kassak]

Hi @kpanchal,

Below you can find other ways of using internalization in both Client and Server scripts:

Widget Internalization

You should check if your string is properly translated at the Message table (sys_ui_message). A record should be created for each language available and translated there.

https://docs.servicenow.com/bundle/vancouver-platform-administration/page/administer/localization/re...

 Also, I found this piece of your code a little bit odd, could you elaborate better?

var title = [option.widget_title];
data.widgetTitle = gs.getMessage(title);

The line var title = [option.widget_title]; creates an array with a single element. If option.widget_title is a string, then the title will be an array containing that string. If you intend to use gs.getMessage() to fetch a translated message, you should pass a string key to it, not an array. Change the line to:

var title = option.widget_title;
data.widgetTitle = gs.getMessage(title);

If option.widget_title is supposed to be an array and you want to fetch multiple translated messages, you'd need to loop through the array and call gs.getMessage() for each element.

[kpanchal]

Yes, from options schema

[Marcos Kassak]

I assume that widget_title is a string, so your code should look like this:

var title = options.widget_title;
data.widgetTitle = gs.getMessage(title);

[Alex Coope - SN · Accepted solution]

@kpanchal,

So, getMessage is expecting a string (not an object), and as such the API will look for a "key" matching the string parsed for a corresponding record in the [sys_ui_message] table. Whilst it's more efficient from a code perspective to send an object, doing this makes it extremely difficult to troubleshoot the issue (hence your challenge).

My suggestion would be to declare a string of the widget title and send that to gs.getMessage(). If you really really can't do that, then check that your translations in [sys_ui_message] for this string have a key that exactly matches the widget title.

For it to view after changing your session language, you very likely will need to perform a "cache.do" to force your browser to pull the latest strings from the server.

You might find my blog posts here and here helpful,

Many thanks,
Kind regards