How to have a single localization file for your process forms and application pages

unai.gaston.caminos
Blog Categories: 

Context

I have several forms/pages that share the same strings that need to be localized.

Question

How can I avoid having to translate the same strings in each one of those forms/pages?
How can I "translate once, localize everywhere"?

Answer

Whether it be process forms or living application pages, in order to be able to display them in different languages, a localization asset is added: localization.json This is where the strings to be localized are listed, along with their various translations. (See Multi-language pages documentation for further information.)

However, if the same strings are used in several forms and/or pages, instead of having to repeat the same "string": "translation" in the localization.json file of each form/page, you may do the following:

1. Create a directory: TOMCAT_HOME/server/webapps/resources

2. Create the file: TOMCAT_HOME/server/webapps/resources/localization.js

This file will basically manage to override the default LocalizationService so the new strings may be injected in the configuration phase. (It does so by creating an angular Provider that will override the localizationFactory.)

angular.module('bonitasoft.ui.extensions').provider('localizationFactory',['localizationConfig', function localizationFactoryProvider(localizationConfig) {
        this.$get = [function localizationFactory() {
                return {
                        get:function(){
                                return localizationConfig.json
                                }
                };
        }];
}]);

3. Create the file: TOMCAT_HOME/server/webapps/resources/localizationStrings.js

This is where you will put all the strings that will be shared among the various forms and pages, for example:

  • "Terrific!!":
    • (es): "¡¡Tremendo!!"
    • (fr): "Terrible!!"
angular.module('bonitasoft.ui.extensions').constant('localizationConfig',{
 "json":{
    "es-ES": {
        "Terrific!!": "¡¡Tremendo!!"
    },
    "fr-FR": {
        "Terrific!!": "Terrible!!"
    }
  }
 });

4. Add 2 new Javascript - External type assets in the targetted forms/pages:

  • asset #1: /resources/localization.js
    Add asset #1
  • asset #2: /resources/localizationStrings.js
    Add asset #2

5. Export your forms/pages from UI Designer.

  • page #1:
    Export page #1
  • page #2:
    Export page #2

  • etc...

6. Import/deploy the forms/pages in your server.

Add page as resource

7. Visit your forms/pages and display them in different languages

You can now browse to your forms/pages and check the same string (e.g. "Terrific!!") is indeed localized everywhere.

  • page #1:
    Page #1 in English
    Page #1 in Spanish
    Page #1 in French
  • page #2:
    Page #2 in English
    Page #2 in Spanish
    Page #2 in French

There you go! Enjoy!

Now...

Sky is the limit!!
Il n'y a plus qu'à!
¡Hasta el infinito y más allá!

... with/avec/con Bonita!

Notifications