Widget Localization

Localization Workflow#

The Widget Framework does not provide you with a built-in facility for localizing your widgets. You can use whichever library or package is available for the framework that you choose to build your Web Component. For Workspaces Angular widgets, the ngx-translate library is used. The ngx-translate package uses .json file format for extracting strings.

The general steps to localise your widgets are as follows:

Write your widget in English.
Annotate the strings that you want to translate.
Extract the strings using a script provided by the localization library that you are using.
Pass this string file to a translation team, or other means of translation that works for your team.
Once translated, use the tools provided in the localization library of your choice to load these translation files for the correct locale.

note

Please ensure that any dependencies or services that are required for the localization of your widget is bundled into the Web Component build file. See Widget Development Overview for more details.

Supported Languages#

The Avaya Workspaces client supports the following languages:

Language	Locale Code
English (US)	en-us
German	de
French	fr
Italian	it
Spanish (Latin America)	es
Korean	ko
Japanese	ja
Russian	ru
Portuguese	pt_BR
Chinese (simplified)	zh-cn
Hebrew	he

Getting the current locale of Workspaces#

About this task#

You can retrieve the currently selected language of Avaya Workspaces using the Widget API. The getLocale method returns the locale code of the current language.

note

When you change the language in Workspaces using the dropdown menu under the language tab in Settings, the browser web page is refreshed. Any external widgets are also reinitialised, so the locale returned from getLocale() is always the current locale. You do not need to subscribe to any language update events as the locale cannot be changed without a page refresh.

Procedure#

Use the following code pattern to retrieve the locale:

var currentLocale = api.getLocale();

Implementing Right-to-Left Support#

About this task#

Since Neo provides support for Right-to-Left (RTL) localization, Avaya Workspaces need not have separate RTL CSS files for widgets. For this reason, the loading of RTL CSS files as part of external widget files is no longer supported. In special cases where Neo may not have a certain component and you want to ensure your custom component supports RTL, Avaya Workspaces uses a simple CSS mixin. A similar solution is suggested for external widgets.

Procedure#

Create the following mixin in your mixin CSS file:

@mixin rtl($root: false) {
  @if ($root) {
    [dir='rtl'] & {
      @content;
    }
  } @else {
    :host-context([dir='rtl']) & {
      @content;
    }
  }
}

Then, for any CSS class that requires custom CSS for RTL, use this mixin to apply stylings. The following example shows how to apply a right margin to the participant-avatar class if the client is in RTL:

@import 'mixins';

  .participant-avatar {
    margin-top: 8px;

    @include rtl {
      margin-right: 10px;
    }
  }