Localization of the file content

Introduction

Starting with version 7.11.3 you can add file content (.js, .css files, images, etc.) to the custom packages.

File content of packages is a number of any files used by the application. File content is static and is not processed by the web server (see “Client static content in the file system”). This increases application performance.

More information about file content can be found in the “Packages file content”.

Localization with configuration resources

To translate the resources it is recommended to use separate module with localizable resources created via internal Creatio tools in the [Configuration] section. The complete source code of this module is available below:

define("Module1", ["Module1Resources"], function(res) {
  return res;
});

To include localizable resources to the module that is defined in the file content of the package you need to define the module with resources. Example:

define("MyPackage-MyModule", ["Module1"], function(module1) {
  console.log(module1.localizableStrings.MyString);
});

Localization via i18n plugin

i18n is a plugin for AMD loader (for example, RequireJS) used for loading lcoalizable string resources. The source code of the plugin can be found in the https://github.com/requirejs/i18n storage. Documentation is available by the http://requirejs.org/docs/api.html#i18n link.

To localize file content with RequireJS i18n plugin, perform the following steps:

1. Add the plugin to the folder with the source code .js files: ..\Terrasoft.WebApp\Terrasoft.Configuration\Pkg\MyPackage1\content\js\i18n.js.

MyPackage1 – working folder of the MyPackage1 package ( see “Packages file content”).

2. Create the ..\MyPackage1\content\nls folder and put there one or several .js files with localizable resources. File names can be arbitrary. File content – AMD modules with objects of the following structure:

• The “root” field contains the key-value collection where the “key” is the name of a localizable string and the “value” is localizable string of the default language. The value will be used if the requested language is not supported.
• Fields with the names of standard cultures (for example, “en-US”, “de-DE”) and the boolean value. The value is true if the supported culture is enabled and false if it is disabled.

For example the added ..\MyPackage1\content\js\nls\ContactSectionV2Resources.js file with the following content:

define({
    "root": {
        "FileContentActionDescr": "File content first action (Default)",
        "FileContentActionDescr2": "File content second action (Default)"
    },
    "en-US": true,
    "ru-RU": true
});

3. In the ..\MyPackage1\content\nls folder, create folders with the names corresponding to the cultures of the localization files that will be put in these folders (for example, “en-US”, “de-DE”). For example, if the German and English culture are supported the folder structure will be following:

content
    nls
        en-US
        ru-RU

4. In each created localization directory put the same number of .js files as in the ..\MyPackage1\content\nls root folder. File content is the AMD modules with objects of the key-value collections, where the “key” is the name of a localizable string and the “value” is a string of the language corresponding to the name of the folder (the code of the culture).

For example, if the German and English culture are supported you need to create two ContactSectionV2Resources.js files. The content of the ..\MyPackage1\content\js\nls\en-US\ContactSectionV2Resources.js, file corresponding to English culture:

define({
    "FileContentActionDescr": "File content first action",
    "FileContentActionDescr2": "File content second action"
});

The content of the ..\MyPackage1\content\js\nls\de-DE\ContactSectionV2Resources.js, file corresponding to German culture:

define({
    "FileContentActionDescr": "Die erste Aktion des Dateiinhalts"   
});

5. Edit the bootstrap.js file.

• Connect the i18n plugin by specifying its name as the "i18n” alias in the RequireJS path configuration and specifying corresponding path to the plugin in the paths propertiy.
• For the plugin specify a culture that is current for the user. Set the object with the i18n property to the config property of the configuration object of the RequireJS library. Set the object with the locale property and the value received from the Terrasoft.currentUserCultureName (the code of the current culture) to the the object with the i18n property.
• For each file with localization resources set corresponding aliases and paths in the RequireJS path configuration. The alias must be a URL-path relative to the nls directory.

Example of the ..\MyPackage1\content\js\bootstrap.js file content:

(function() {
    require.config({
        paths: {            
            "MyPackage1-Utilities": Terrasoft.getFileContentUrl("MyPackage1", "content/js/Utilities.js"),
            "MyPackage1-ContactSectionV2": Terrasoft.getFileContentUrl("MyPackage1", "content/js/ContactSectionV2.js"),
            "MyPackage1-CSS": Terrasoft.getFileContentUrl("MyPackage1", "content/css/MyPackage.css"),
            "MyPackage1-LESS": Terrasoft.getFileContentUrl("MyPackage1", "content/less/MyPackage.less"),
            "i18n": Terrasoft.getFileContentUrl("MyPackage1", "content/js/i18n.js"),
            "nls/ContactSectionV2Resources": Terrasoft.getFileContentUrl("MyPackage1", "content/js/nls/ContactSectionV2Resources.js"),
            "nls/ru-RU/ContactSectionV2Resources": Terrasoft.getFileContentUrl("MyPackage1", "content/js/nls/ru-RU/ContactSectionV2Resources.js"),
            "nls/en-US/ContactSectionV2Resources":  Terrasoft.getFileContentUrl("MyPackage1", "content/js/nls/en-US/ContactSectionV2Resources.js")
        },
        config: {
            i18n: {
                locale: Terrasoft.currentUserCultureName
            }
        }
    });
})();

6. Use the resources by specifying the corresponding module of resources with the "i18n!” alias in the dependency array. For example, to use the FileContentActionDescr (see steps 2,4) string as a title for the new action in the [Contacts] section, add the following content to the ..\MyPackage1\content\js\ContactSectionV2.js file:

define("MyPackage1-ContactSectionV2", ["i18n!nls/ContactSectionV2Resources", 
    "css!MyPackage1-CSS", "less!MyPackage1-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.FileContentActionDescr
                }));
                return actionMenuItems;
            },
            onFileContentActionClick: function() {
                console.log("File content clicked!")
            }
        },
        diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/
    }
});