Localization of Customer's Canvas

Usually, users are most comfortable with interfaces in their native languages. By default, Customer's Canvas includes localization files for the English (en) 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 Customer's Canvas source code, then you have the compiled version of Customer's Canvas. The CustomersCanvasTrial.exe and CustomersCanvasIISBin.zip packages contain the compiled version. Its translation is described in the Translating the Compiled Version section.

If you have made some changes to the Customer's Canvas source code (CustomersCanvasSrc.zip), 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.

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:
    JSON
    {
      "en": {
        "LeftToolbar": {
          "ADD_IMAGE": "Add image",
          "ADD_TEXT": "Add text",
          ...
        },
        ...
      },
      "ru": {
        "LeftToolbar": {
          "ADD_IMAGE": "Добавить изображение",
          "ADD_TEXT": "Добавить текст",
          ...
        },
        ...
      }
    }
    

    Here, you can see the two default translations, labeled "en" for English and "ru" for Russian. 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.
    JSON
    {
      "en": {
        ...
      },
      "ru": {
        ...
      },
      "de": {
      }
    }
    
  3. Start to translate by adding the "PROPERTY_NAME": "property value" strings to the translation.
    JSON
    "de": {
        "LeftToolbar": {
          "ADD_IMAGE": "Bild hinzufugen",
          "ADD_TEXT": "Text hinzufugen",
          "TEXT": "Text",
          "RICHTEXT": "Rich-Text",
          "IMAGE": "Bild",
          "SHAPE": "Form",
          ...
        },
        ...
    }
    
  4. Apply this new translation in clientConfig.json.

    "defaultLanguage": "de"

  5. The result is:

    The localized interface.

Translating the Source Files

Let us start with creating a new German localization:

  1. In the \src\SimplePolygraphy\Resources\SPEditor\Scripts\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.LeftToolbar.json. It has the following structure:
    JSON
    {
        "ADD_IMAGE": "Add image",
        "ADD_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.
    JSON
    {
        "ADD_IMAGE": "Bild hinzufugen",
        "ADD_TEXT": "Text hinzufugen",
        ...
    }
    
  4. Save the file and change its name accordingly to your language name. For German, it is de.LeftToolbar.json. The file should be saved in the same folder where its English analog is located.
  5. Translate all other localization files found in the first step.
  6. Rebuild the Customer's Canvas project.
  7. Apply the new translation in clientConfig.json:

    "defaultLanguage": "de"

See Also

Manual