We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • 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 — a JSON file with labels for all the elements. For example, see our English localization file.

    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:

    Download a file from GitHub

    Use a file from our CDN

    Copy a link to the necessary localization file and set it as the localization:

    • English: https://cdn.flexmonster.com/loc/en.json
    • German: https://cdn.flexmonster.com/loc/de.json
    • Español: https://cdn.flexmonster.com/loc/es.json
    • Français: https://cdn.flexmonster.com/loc/fr.json
    • Italiano: https://cdn.flexmonster.com/loc/it.json
    • Português: https://cdn.flexmonster.com/loc/pt.json
    • Chinese: https://cdn.flexmonster.com/loc/zh.json
    • Ukrainian: https://cdn.flexmonster.com/loc/uk.json
    • Magyar: https://cdn.flexmonster.com/loc/hu.json
    • Dutch: https://cdn.flexmonster.com/loc/nl.json
    • Turkish: https://cdn.flexmonster.com/loc/tr.json
    • Thai: https://cdn.flexmonster.com/loc/th.json
    • Indonesian: https://cdn.flexmonster.com/loc/id.json

    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:

    Here we show the partially localized toolbar

    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:

    For all reports

    To set a localization for all reports, specify the localization property in the GlobalObject:

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

    Note If you want to save a report with a localization specified in the GlobalObject, see how to save the report with global configs.

    For a specific report

    To set a localization for a specific report, specify the localization property in the ReportObject:

    new Flexmonster({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      report: {
        localization: "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:

    For all reports

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

    For a specific report

    new Flexmonster({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      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 so localized elements are displayed 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:

    What’s next?

    You may be interested in the following articles: