Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
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.
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.
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 the necessary localization file and set it as the localization:
Copy a link to the necessary localization file and set it as the localization:
https://cdn.flexmonster.com/loc/en.json
https://cdn.flexmonster.com/loc/de.json
https://cdn.flexmonster.com/loc/es.json
https://cdn.flexmonster.com/loc/fr.json
https://cdn.flexmonster.com/loc/it.json
https://cdn.flexmonster.com/loc/pt.json
https://cdn.flexmonster.com/loc/zh.json
https://cdn.flexmonster.com/loc/uk.json
https://cdn.flexmonster.com/loc/hu.json
https://cdn.flexmonster.com/loc/nl.json
https://cdn.flexmonster.com/loc/tr.json
https://cdn.flexmonster.com/loc/th.json
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.
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.
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.
Localization is set using a URL to the localization file. You can set a localization for all reports or for a specific report:
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.
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 }, });
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", componentFolder: "node_modules/flexmonster/", global: { localization: { "toolbar": { "connect": "Relier", "open": "Ouvrir", "save": "Sauvegarder", "export": "Exporter", } } }, report: { // Report configs } });
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.
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.
A localization file translates only the component’s text elements. Further localization can be configured right in your report:
"MM/dd/yyyy"
.