Localization

The aps/i18n module provides methods to convert input data into the format required by the user’s locale.

Locales in the Platform

The provider can configure localization on the platform as follows.

  1. Make sure the necessary locales are declared on the platform:

    ../../../_images/locales1.png
  2. Allow locales for users:

    ../../../_images/user-interface-location.png
  3. Select a locale for each user administratively:

    ../../../_images/user-locale.png
  4. If the provider allows users to select a language, then the login panel provides a list of languages to choose:

    ../../../_images/user-login-selection.png

Date and Time Localization

The following methods transform the input string presenting the date and time in ISO format into the format specified by the user’s locale:

  • formatDate(date) - returns the date

  • formatDatetime(date) - returns date and time

  • formatTime(date) - returns time

In an aps/Grid column declared as a date or datetime type, the date or date and time are converted to the current locale format automatically.

Let us suppose that the system must store the date and time of object creation and this date and time must be also displayed in the list of objects using aps/Grid. The implementation steps are:

  1. In the respective APS type, declare a string property to store the creation date and time, for example:

    "date": {
       "type": "string",
       "title": "Creation date-time",
       "description": "Date and time when the server was provisioned"
    }
    
  2. When provisioning a new object, ensure the date and time are saved in the ISO format, for example:

    aps.app.model.newVPS.set("date", new Date().toISOString()); // Convert to ISO format
    when(store.put(getPlainValue(aps.app.model.newVPS)),
       function() {
          aps.apsc.gotoView("servers");
    });
    
  3. When presenting a list of objects using an aps/Grid widget, a column of the datetime type will display the date and time in the current locale format. If the column type is different from that, the column render must convert the date and time explicitly as in the following code:

    define([
       // ...
       "aps/i18n"
    ], function (/*...,*/ i18n) {
       var self;
       return declare(View, {
          init: function() {
             // ...
             return ["aps/Grid", {
                // ...,
                columns: [{
                   // ...,
                   {
                      field: "date",
                      type: "string",   // Other than *datetime*
                      name: "Created",
                      renderCell: function(raw, data) {
                         /* Display date and time in compliance with the locale */
                         return i18n.formatDatetime(data);
                      },
                      filter: {title: "Created"}
             }}];
          }
          //... Other methods if any
    );});
    

Once the above steps are done, ensure the package supports the locales described at Locales in the Platform.

Localization of Numbers

In different locales, the number format can be different. Usually, this concerns thousands and decimal separators, for example, the same number may look as follows in different locales:

  • In England - 1,234.5

  • In Germany - 1.234,5

  • In Russia - 1 234,5

To present numbers in the user’s locale correctly, convert them by the formatNum(value) method.

Currency Localization

ISO 4217 defines currency codes. To display a price in the current user locale, use the formatCurrency(value, currency) method, where the currency parameter is the currency code. For example:

["aps/Output", {
  label: "Price: ",
  value: i18n.formatCurrency(123, "USD")
}],

Example

RUN DEMO

require(["aps/load", "aps/i18n", "aps/ready!"],
    function(load, i18n) {
        "use strict";
        var currency = "USD";
        load(["aps/FieldSet", {
                title: "Order"
            },
            [
                ["aps/Output", {
                    label: "Resource",
                    value: "VPS, CentOS 6 (x86_64)"
                }],
                ["aps/Output", {
                    label: "RAM, MB: ",
                    value: i18n.formatNum(1024.123)
                }],
                ["aps/Output", {
                    label: "Price: ",
                    value: i18n.formatCurrency(123, currency)
                }],
                ["aps/Output", {
                    label: "Date: ",
                    value: i18n.formatDatetime("2016-04-11T14:51:45")
                }]
            ]
        ]);
});