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

unai.gaston.caminos

Tuesday, March 17, 2020 - 09:08

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!!"
    }
  }
 });