Localize the file content

Level: advanced

Localize the file content using Configuration section

To translate file content to other languages using Configuration section, we recommend using a separate module. The localizable string lets you display module data in multiple UI languages. The localizable string value depends on the language selected in the user profile. You can configure a localizable string using Module Designer.

To localize the file content using Configuration section:

1. Create the module schema to add a localizable string. Instructions: Add a localizable string.

   View the example of a module schema that has a localizable string below.

   SomeModuleSchema

   define("SomeModuleSchema", ["SomeModuleResources"], function (res) {
       return res;
   });

2. Access the module that has a localizable string from another client module. To do this, add the module that has a localizable string as a dependency.

   SomeModule1Schema

   define("SomeModule1Schema", ["SomeModuleSchema"], function (someModuleSchema) {
       console.log(someModuleSchema.localizableStrings.SomeLocalizableString);
   });

Localize the file content using the i18n plugin

i18n plugin for an AMD loader, for example, RequireJS, lets you load the localizable strings. Learn more: Define an I18N Bundle (official RequireJS documentation).

To localize the file content using the i18n plugin:

1. Download the i18n.js file. Download (GitHub).

2. Add the i18n.js file to the directory of package whose file content to localize. For example, ..\Terrasoft.WebApp\Terrasoft.Configuration\Pkg\SomePackage\content\js, where SomePackage is a directory of a user-made package whose file content to localize.

3. Create the ..\SomePackage\content\nls directory to add localizable *.js files. You can add one or more files that have an arbitrary name.

   View the structural items of the localizable *.js files in the table below.

   Property	Description
   root property	Includes the "key-value" collection, where: "key" is the Code property value of a localizable string. "value" is the Value property value of a localizable string in the primary language. Creatio uses the specified value if the value in an additional language is omitted.
   List of supported language codes	Property names match the standard codes of supported languages. For example, en-US, de-DE. Set property value to true if the UI language in Creatio is enabled. Otherwise, set property value to false.

   View the example of the ContactSectionV2Resources.js file that includes localizable file content below.

   ContactSectionV2Resources.js

   define({
       root: {
           FileContentAction1: "Some description of file action 1",
           FileContentAction2: "Some description of file action 2",
       },
       "en-US": true,
       "de-DE": true,
   });

4. Create the directory for each supported language in the ..\SomePackage\content\nls directory. Set the directory name to the language code. For example, en-US, de-DE. This directory will store the relevant localization.

5. Add localizable *.js files.

   Number of files in each localization directory must match the number of files in the ..\SomePackage\content\nls directory. Each localizable *.js file includes the "key-value" collection, where:

   • "key" is the Code property value of a localizable string.
   • "value" is the Value property value of a localizable string.

   For example, if custom functionality supports English and German languages only, create two localizable *.js files.

   ..\SomePackage\content\nls\en-US\ContactSectionV2Resources.js

   define({
       FileContentAction1: "Some description of file action 1",
       FileContentAction2: "Some description of file action 2",
   });

   ..\SomePackage\content\nls\de-DE\ContactSectionV2Resources.js

   define({
       FileContentAction1: "Irgendeine beschreibung der datei aktion 1",
   });

   Since the value of the FileContentAction2 localization string is omitted for the German language, Creatio uses the "Some description of file action 1" value for the English language even though German UI language is enabled.

6. Connect the i18n plugin to the package directory.

   1. Open the ..\SomePackage\content\js\bootstrap.js file → path configuration object.
   2. Specify the name of package that includes the i18n.js file added.
   3. Specify the path to the i18n.js file.

   View the example of the bootstrap.js file below.

   ..\SomePackage\content\js\bootstrap.js

   (function() {
       require.config({
           paths: {
               ...,
               i18n: Terrasoft.getFileContentUrl("SomePackage", "content/js/i18n.js"),
               ...,
           },
           ...,
       });
   })();

7. Specify the current language culture of the user for the i18n plugin.

   1. Open the ..\SomePackage\content\js\bootstrap.js file.
   2. Add the config configuration object.
   3. Add the i18n configuration object to the config configuration object.
   4. Set the Terrasoft.currentUserCultureName global variable that stores the code of the current culture to the locale property.
   ..\SomePackage\content\js\bootstrap.js

   (function() {
       require.config({
           ...,
           config: {
               i18n: {
                   locale: Terrasoft.currentUserCultureName,
               },
           },
       });
   })();

8. Connect the localizable files to the package directory.

   1. Open the ..\SomePackage\content\js\bootstrap.js file → path configuration object.
   2. Add the configuration object for each supported language relative to the ..\SomePackage\content\nls directory.
   3. Specify the name of package that includes the localizable files added.
   4. Specify the path to the each localizable *.js file relative to the ..\SomePackage\content directory.
   ..\SomePackage\content\js\bootstrap.js

   (function() {
       require.config({
           paths: {
               ...,
               "nls/ContactSectionV2Resources": Terrasoft.getFileContentUrl(
                   "SomePackage",
                   "content/js/nls/ContactSectionV2Resources.js"
               ),
               "nls/de-DE/ContactSectionV2Resources": Terrasoft.getFileContentUrl(
                   "SomePackage",
                   "content/js/nls/de-DE/ContactSectionV2Resources.js"
               ),
               "nls/en-US/ContactSectionV2Resources": Terrasoft.getFileContentUrl(
                   "SomePackage",
                   "content/js/nls/en-US/ContactSectionV2Resources.js"
               ),
           },
           ...,
       });
   })();

9. Access the localizable resources from the client module. To do this, add the resource module as a dependency. The name of the resource module starts with the i18n! prefix.

   View the example that uses the FileContentAction1 localizable string as the heading for a new action in the Contacts section below.

   SomePackage-ContactSectionV2

   define("SomePackage-ContactSectionV2", ["i18n!nls/ContactSectionV2Resources", "css!SomePackage-CSS", "less!SomePackage-LESS"], function(resources) {
       return {
           methods: {
               getSectionActions: function() {
                   var actionMenuItems = this.callParent(arguments);
                   actionMenuItems.addItem(this.getButtonMenuItem({
                       "Type": "Terrasoft.MenuSeparator"
                   }));
                   actionMenuItems.addItem(this.getButtonMenuItem({
                       "Click": {
                           "bindTo": "onFileContentActionClick"
                       },
                       "Caption": resources.FileContentAction1
                   }));
                   return actionMenuItems;
               },
               onFileContentActionClick: function() {
                   console.log("File content clicked!")
               }
           },
           diff: /**SCHEMA_DIFF*/ [] /**SCHEMA_DIFF*/
       }
   });

---

See also

Operations with localizable resources

---

Resources

Define an I18N Bundle (official RequireJS documentation)

i18n plugin file (GitHub)