Localization

• 2-3 minutes to read

Usually, users are most comfortable with interfaces in their native languages. By default, the Design Editor includes localization files for the English (en), Spanish (es), French (fr), and Russian (ru) languages. You can set one of these languages as the default interface language by setting the defaultLanguage property in ~/Configuration/clientConfig.json. For example, for the English interface, set:

"defaultLanguage": "en"

To create your own translation, you will have to edit localization files. There are different sets of localization files for the compiled version and the source code. It is quite simple to check whether you have the compiled version or not.

If you have never edited the Design Editor's source code, then you have the compiled version. Thus, the CustomersCanvasServer.zip package contains the compiled version. Its translation is described in the Translating the Compiled Version section.

If you have made some changes to the Design Editor source code, built it on your own, and plan to keep up with your version, then you should perform a translation as described in Translating the Source Files and then rebuild the solution.

Note

To translate messages of the Design Editor preloader, you need to specify the preloader object in your language and pass it to loadEditor as described in the Preloader topic.

Translating the Compiled Version

Let us start with creating a new German localization:

1. Open the ~/Configuration/translations.json file. The file structure is as follows:

   {
     "en": {
       "Toolbox": {
         "IMAGE": "Add image",
         "TEXT": "Add text",
         ...
       },
       ...
     },
     "es": {
       "Toolbox": {
         "IMAGE": "Añadir una image",
         "TEXT": "Añadir un texto",
         ...
       },
       ...
     }
   }
   

   Here, you can see the two default translations, labeled "en" for English and "es" for Spanish. Each of them contains the "PROPERTY_NAME": "property value" pairs, where "PROPERTY_NAME" identifies an interface element and "property value" is the localized text for the element.

2. Add a new empty German translation to translations.json.

   {
     "en": {
       ...
     },
     "es": {
       ...
     },
     "de": {
     }
   }
   

3. Start to translate by adding the "PROPERTY_NAME": "property value" strings to the translation.

   "de": {
       "Toolbox": {
         "IMAGE": "Bild hinzufugen",
         "TEXT": "Text hinzufugen",
         "BOUNDEDTEXT": "Textblock hinzufugen",
         ...
       },
       ...
   }
   

4. Apply this new translation in clientConfig.json.

   "defaultLanguage": "de"
   

5. The result is:

   

Translating the Source Files

Let us start with creating a new German localization:

1. In the \src\design-editor\Widgets\<widgetname>\translations\ folder, find all files matching the en.*.json mask. These files contain the English localization.

2. Open a file, for example, en.Toolbox.json. It has the following structure:

   {
       "IMAGE": "Add image",
       "TEXT": "Add text",
       ...
   }
   

   Each localization file contains the "PROPERTY_NAME": "property value" pairs, where "PROPERTY_NAME" identifies an interface element and "property value" is the localized text for the element.

3. Translate the texts to German.

   {
       "IMAGE": "Bild hinzufugen",
       "TEXT": "Text hinzufugen",
       "BOUNDEDTEXT": "Textblock hinzufugen",
       ...
   }
   

4. Save the file and change its name accordingly to your language name. For German, it is de.Toolbox.json. The file should be saved in the same folder where its English analog is located.

5. Translate all other localization files found in subfolders of \src\design-editor\Widgets\

6. Rebuild the Design Editor solution.

7. Apply the new translation in clientConfig.json:

   "defaultLanguage": "de"