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 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 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 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 the Translating Source Files section and then rebuild the solution.

Translating Compiled Version

Let us start with creating a new, German, localization:

  1. Open the ~/Configuration/translations.json file. The file structure is as following:
    JavaScript
    {
      "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:
    JavaScript
    {
      "en": {
        ...
      },
      "ru": {
        ...
      },
      "de": {
      }
    }
    
  3. Start translating by adding the "PROPERTY_NAME": "property value" strings to the translation:
    JavaScript
    "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 ~\Configuration\clientConfig.json:

    "defaultLanguage": "de"

  5. The result is:

    Localized interface.

Translating 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:
    JavaScript
    {
        "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:
    JavaScript
    {
        "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 to the same folder where its English analog is located.
  5. Translate all other localization files found on the first step.
  6. Rebuild the Customer's Canvas project.
  7. Apply new translation in ~\Configuration\clientConfig.json:

    "defaultLanguage": "de"

See Also

Manual