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 one package (hereafter 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 control panel knows the current locale, for example, “de_DE”, and it receives a view-plugin containing the above function, the control panel will do 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, inside 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, only 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 implies using one of the following view-plugins at a time:

• 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. The only thing required is to translate the strings from the view-plugin in the respective PO files. The control 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 will display. In this case, you need to update the JavaScript code and add translations as explained below.

The following process directs you through necessary steps 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. Inside 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, into 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/vpsDashboardPlug.js file, which is referred in metadata 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. Log in to the control panel as the administrator of the test customer selecting the proper language on 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 →