Internationalization in View-Plugins

Translation Strings

Similar to other view types, a view-plugin hooks the translation strings by means of the _() function. The PO files contain translations to certain languages. The difference is that a view-plugin, defined in the source package, provides tiles and other widgets to host views defined in other packages.

A host view must be able to identify the package that contains translations of a string. For this purpose, the _() function can explicitly specify the package ID using the following format:

_("text part 1  __key-1__ text part 2 __key-2__ final part", {
      "key-1": <value-1>,
      "key-2": <value-2>
   },
   "package APS ID"
);

Once a host view in the user panel knows the current locale, for example, “de_DE”, and it receives a view-plugin containing the above function, the user panel does the following for the host view:

1. It looks up for the received string in the respective PO file (i18n/de_DE.json in our example) in the package specified in the _() function.

2. Once the string is located as the value of a msgid line, the control panel substitutes the string with its translated value in the paired msgstr line.

3. Finally, the control panel substitutes all the keys by their values defined in the _() function.

Home Dashboard Specifics

As explained in home dashboard integration steps, you can define a view-plugin for the Home dashbaord using one of two approaches. When the basic method is used, there is no need to change anything in the JavaScript code. In this case, you only need to translate the strings into required languages in the respective PO files inside the source package and then rebuild the package.

Example

Practice your skills by modifying the Basic sample application package whose dashboard integration is explained in the Home Dashboard demo project. This project supposes that you use either of the following view-plugins:

• ui/plugins/vpsDashboardPlugin.js uses the Basic method. The view-plugin defines a special set of properties that allows the host view to build a tile displaying those properties. To localize this view-plugin, you do not need to edit it, only translate the strings from the view-plugin in the respective PO files. The user panel runs the translation mechanism to display the strings in the user’s language.

• ui/plugins/vpsDashboardPluginAdv.js is based on the Advanced method that allows the view-plugin to completely define its own widget that a host view displays. In this case, you need to update the JavaScript code and add translations as explained below.

The following process directs you through the steps necessary to internationalize a view-plugin based on the advanced method.

1. Unzip the Basic Sample Application package in a folder, for example, in basic1pdash/.

2. Find and open the ui/plugins/vpsDashboardPluginAdv.js file in a text editor.

3. In the init method, declare a variable referring to the view-plugin object. You will add this variable to the _() function and the system will be able to identify the package ID from it.

   init: function (mediator) {
      var self = this;
      // ...
   }
   

4. Include all strings which must be translated in the _() function. For example:

   instead of

   content: "Total: ${value} servers out of ${limit}"
   

   use

   content: _(
      "Total: ${value} servers out of ${limit}",
      self
   )
   

5. Replace the ui/plugins/vpsDashboardPlugin.js file, which in metadata is referred to as the view-plugin, with the updated ui/plugins/vpsDashboardPlugAdv.js file.

6. Add PO files for the required languages. For example, to add German, run:

   $ aps msgmake -l de_DE basic1pdash
   

7. Translate the strings in the PO files.

8. Deploy and provision the application for a test customer.

9. When you log in to the user panel as the administrator of the test customer, select the proper language in the login panel.

10. In the Home dashboard, you will find the tile presenting your application. Its strings must be translated into the user’s language.

← Internationalization in JavaScript

Internationalization in Notifications →