Localizing the component

This article describes how to localize Flexmonster’s text elements.

Note The approach described in this guide can be used for customizing the text elements in the component.

Overview

The default language in the component is English. You can translate the text elements into any other language using a localization file, which is a JSON file with labels for all the elements. Refer to the English localization file to see which text elements in the component can be localized.

Our component comes with predefined localization files; you can also create a custom localization file with a full or partial translation.

Сheck out the demo with localized Flexmonster.

Predefined localizations

Flexmonster ships with ready-to-use localization files for some languages. The localization files are located in the node_modules/flexmonster/localizations/ folder. We also provide these files on our GitHub or via our CDN:

If you notice any mistakes in our localization files, please report them to our tech team or create a pull request on GitHub with the correct translation.

Custom localization

If there is no localization file for the necessary language or you want to customize the existing localization, create your localization file:

Step 1. Download a localization file to use as a template. We recommend using the English localization file, but you can choose any of the available files.

Step 2. Rename the downloaded file if needed.

Step 3. Open the file and translate the text elements into the necessary language or modify the existing translation. For example, see how the grid labels are translated into French:

{
  // Other translations
  "grid": {
    "blankMember": "(blanc)",
    "dateInvalidCaption": "Date invalide",
    "dateNullCaption": "null",
    "grandTotal": "Somme finale",
    "reportInformation": "Rapport d'informations",
    "total": "Total",
    "totals": "Totaux"
  },
  // Other translations
}

Step 4. Set the localization.

Feel free to share a localization file for a new language with the community by creating a pull request on GitHub. Our team will highly appreciate your contribution and mention the localization on our website.

Partial localization

Your localization can be partial if you do not need to translate or customize all the text elements.

To create a partial localization file, follow the steps for creating a custom localization but translate only the necessary elements. Once you are finished with the file, set it as the localization.

In the following example, we localize some labels in the Toolbar into French:

"toolbar": {
  "connect": "Relier",
  "open": "Ouvrir",
  "save": "Sauvegarder",
  "export": "Exporter",
}

Once the partial French localization is applied, the Toolbar will look as follows:

As you can see, the untranslated elements have their original values.

Set a localization

Localization is set using a URL to the localization file. You can set a localization for all reports or for a specific report:

new Flexmonster({
  container: "pivotContainer",
  global: {
    localization: "https://cdn.flexmonster.com/loc/fr.json"
  },
  report: {
    // Report configs
  },
});

new Flexmonster({
  container: "pivotContainer",
  report: {
    localization: "https://cdn.flexmonster.com/loc/fr.json",
    // Other configs
  },
});

Localization as an inline JSON

You can use an inline JSON object to define a localization. For example, this approach is suitable for partial localization.

Localization as an inline JSON can be set for all reports or for a specific report:

new Flexmonster({
  container: "pivotContainer",
  global: {
    localization: {
      "toolbar": {
        "connect": "Relier",
        "open": "Ouvrir",
        "save": "Sauvegarder",
        "export": "Exporter",
      }
    }
  },
  report: {
    // Report configs
  }
});

new Flexmonster({
  container: "pivotContainer",
  report: {
    localization: {
      "toolbar": {
        "connect": "Relier",
        "open": "Ouvrir",
        "save": "Sauvegarder",
        "export": "Exporter",
      }
    }
    // Other configs
  },
});

Note The untranslated elements will default to their English values.

Check out an example of the partial localization set as inline JSON on JSFiddle.

Display non-Latin characters correctly

If you are using localization with non-Latin characters, ensure you have set UTF-8 encoding for your page. This is required to display the localized elements correctly in the component.

Further localization

A localization file translates only the component’s text elements. Further localization can be configured right in your report:

• Translate a field’s name by defining the caption property in the mapping.
• Format numbers according to a country's standard. For example, you can set a national currency symbol or override a default decimal separator.
• Format date and time according to a country’s standard. For example, you can override the default date pattern with "MM/dd/yyyy".

What’s next?

You may be interested in the following articles:

• Saving and restoring the report
• Changing themes
• Customizing the Toolbar
• Applying conditional formatting