Description

This article explains how to internationalise a string inside a UI Script, when that UI Script is being used as a dependency for a Service Portal widget.

The documented getMessage(messageKey, callback) method is not available on Service Portal, so instead we will use the i18n Angular module.

Please make sure you have followed the proper steps for creating a widget dependency and a Service Portal complaint UI Script by following these documentations first:

Procedure

UI Script

Add a UI Script as a widget dependency.
Create a function in the UI Script which accepts i18n as a parameter.
Then you can use the getMessage(messageKey, callback) method from i18n to internationalise any strings that are defined in the sys_ui_message table.

Example:

function translateAlert(i18n) {
  text = 'Request Cancelled';    // message key

  i18n.getMessage('Request Cancelled', function(response) {
    alert(response);             // translated string
  });
}

Client Script (Widget)

In the Client Script section of the widget, add i18n as a service.
Then call the function defined in the UI Script and pass the i18n service to it.

Example:

function(i18n) {         // added i18n as a service
  /* widget controller */
  var c = this;

  translateAlert(i18n);  // passing i18n service to the function in UI Script
}

Applicable Versions

Helsinki and above

Additional Information

Please note, that i18n.getMessage(messageKey, callback) is an asynchronous function, so something like the following example will not work:

function translateAlert(i18n) {
  text = 'Request Cancelled';
  translatedText = '';          // will store the response

  i18n.getMessage('Request Cancelled', function(response) {
    translatedText = response;  // try to store the response
  });

  console.log(translatedText);  // will print an empty string, expected the translated string
}

In order to understand why this happens and how to get around this, please refer to the following links:

Notifications