Setting Multiple Languages¶

By default, the app language will try to match the navigator language of the user's mobile phone. If no match can be found, the first language in the array will be used as the default language.

Add New Locale (Optional)¶

1. To add a new locale, we recommend starting from the English version. Copy the "en-US.json" file under the folder src/assets/i18n.
2. Next, translate the value to the target language in the file you just copied. For any new terms you wish to include in your information model, you will need to first add a new key-value pair. See Translate Your Information Model for more information.

3. Save the file using the standardized language codes, e.g. jp.json. For more examples, see https://stackoverflow.com/a/36042028.

   Note

   This value will be used to compare against the navigator language provided by user's mobile phone. Please use the widely accepted language codes.

4. Add language selections to the APP by modifying this file - app.languages.ts under the folder src/assets/app.

   Note

   If no matched language locale can be found, the first language in the array will be used as the default language.

Translate Your Information Model¶

To support translations for any custom terms in your information model, you will need to first add new key-value pairs. Each Title in the information model should have a corresponding entry in the json files under src/assets/i18n.

For example, to translate a new UI Component Model called Smart Mode, you can:

1. In your information model file, type INFORMATION_MODEL.SMART_MODE in the title field.

   "NEW_UI_COMPONENT": {
     "type": "button-group",
     "title": "INFORMATION_MODEL.SMART_MODE",
   

2. Go to your locale files. We'll use "en-US.json" in this example.

3. Find the object INFORMATION_MODEL and add SMART_MODE with the target language as the value.

   "INFORMATION_MODEL": {
     "SMART_MODE": "Smart Mode",
   

   Note

   • Using INFORMATION_MODEL as prefix is just to group the translated terms together as an object, you can organize naming scheme freely.
   • Currently we only support i18n on the title and the text in the information model.
   • If you find the translation is not changed successfully, you can try to do the following remove commands and then reinstall the dependencies and platforms.

4. Remove platform

   ionic cordova platform rm android
   ionic cordova platform rm ios
   

5. Remove plugins and platforms

   rm -rf plugins
   rm -rf platforms
   

6. Reinstall project dependencies

   ionic cordova platform add android
   ionic cordova platform add ios
   

Have more questions? Submit a request