Implement Multi-Lingual Support

By default, the Views service provides multi-lingual support for all newly created hybrid apps. It consists of the following elements:

  • localization of labels and titles of views and fields
  • localization of the contents of data bound fields for Progress Sitefinity data providers

To let you include multi-lingual support in your app, the Views service exposes a localization API. With it, you can register new languages in the service and switch between them programmatically.

This article contains the following information:

Localizing the Strings

Based on the currently applied language, the Views service picks the corresponding strings for labels and titles of views and fields and shows them in your app. You need to provide the localized strings manually.

  1. In the left-hand navigation bar, select Code to navigate to the code and resources of your app.
  2. After the Code tab has loaded your app, make sure that your app structure is expanded in the Project Navigator.
  3. Navigate to the cultures folder and expand it.
    This folder name refers to language cultures. The directory contains an en sub-folder whose name refers to the EN culture code (English). The app.json file inside contains the strings for the labels and titles of the views and fields in your app. The Views service populates this file automatically and re-generates it whenever you modify your app. Do not modify this file manually.
  4. Copy the en folder and paste it in the root of the cultures folder.
  5. Rename the newly created folder to a valid culture code. If you are using a data provider with multi-lingual support, make sure that this folder name matches the corresponding culture code in your data provider.
  6. Open app.json in the newly created folder and provide translation for the listed strings.
    The Views service will not re-generate this file when you modify your app and will not populate it with newly added strings. When you modify your views and fields, make sure to update the app.json files for all the cultures you have added manually to your app.

Localizing the Data Provider Contents

The Views service provides multilingual support only for Progress Sitefinity data providers. If you have enabled multi-lingual support for your Progress Sitefinity backend and have localized your content, the Views service picks up and shows the data for the current app culture and language currently.

Switching Languages Programmatically

You need to manually implement the logic that changes the culture and language of your app.

To be able to switch between the available languages and cultures, you need to register the newly added cultures first. Next, you need to provide a way to switch between them. If you register the available languages and switch between them at app start, you will ensure that all strings and data are available as early as possible.

  1. Verify that you have opened the code and resources for your app in the Code tab.
  2. In the Project Navigator, navigate to app.js and open it.
    The file is located in the root of your app.
  3. Scroll down to the bottom.
  4. Between the // START_CUSTOM_CODE_kendoUiMobileApp and // END_CUSTOM_CODE_kendoUiMobileApp lines, insert the following code:

    app.localization.cultures.push({
        name: "Bulgarian",
        code: "bg"
    });
    

    The value for code must match the name of the sub-folder in the cultures folder containing the localized strings for the language that you are adding.

  5. To switch the app to the newly registered language, add the following code:

    app.localization.set('currentCulture', 'bg');
    

    You can use this code to change the current language on app start based on the device location settings or you can let users select and apply a preferred language themselves.

Example: Switching Languages Based on Device Information

The following code shows how to handle the change of the app language with the Globalization plugin. You can call the Globalization plugin to check the current locale or preferred language for the device and then switch to it. If you handle this in an onDeviceReady event, this will ensure that the users will receive the localized version on app start.

You can place this code in your app.js file between the // START_CUSTOM_CODE_kendoUiMobileApp and // END_CUSTOM_CODE_kendoUiMobileApp. Note that the following example also registers an additional culture.

document.addEventListener("deviceready", customDeviceReady, false); // Creates an event listener for the deviceready event to ensure that Apache Cordova is initialized before calling the Globalization plugin
function customDeviceReady() {
    app.localization.cultures.push({ // Registers an additional culture
        name: "Bulgarian",
        code: "bg"
    });
    navigator.globalization.getLocaleName( // Calls the Globalization plugin
        function(locale) {
            if (locale.value == 'bg-BG') { // Checks if the current locale is Bulgaria with Bulgarian as the preferred language
                app.localization.set('currentCulture', 'bg'); //Sets the language of the app to Bulgarian
            }
        },
        function() {
            alert('Error getting locale\n'); 
        }
    );
}

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.