Localize Dashboard Control for JavaScript Applications
- 3 minutes to read
You can localize your applications - update their UI to match certain culture and language settings:
- Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, and so on (localization).
- Format numbers, dates, and currencies according to specific culture settings (globalization).
Localize UI
To localize the user interface, add the component-specific JSON files that correspond to other cultures. For this, obtain a JSON object with the localization strings from DevExpress Localization Service. Modules to translate:
- Dashboard.Core
- Dashboard.Web
- DataAccess
- Web.Resources
Unpack a self-extracting archive and extract JSON resources. Add the dx-analytics-core.{lang}.json and dx-dashboards.{lang}.json files to your project. To translate the Text Editor‘s UI, you also need the dx-rich.{lang}.json file.
Pass the JSON object to the ResourceManager.setLocalizationMessages static method. Make sure that you apply localization before the Dashboard component is initialized and loaded.
Note
Since the Web Dashboard exports data on the server side, add satellite resource assemblies to your project to complete the localization process.
Refer to the following page to find all localizable strings: DashboardStringId
Localize Dates, Numbers, and Currencies
The Dashboard control for JavaScript applications supports both Intl and Globalize to format dates, numbers, and currencies.
Intl
The Web Dashboard uses Intl as a default way to apply culture-specific formatting. Intl is the short name used to refer to a particular ECMAScript Internationalization API object. The Web Dashboard supports this API out of the box. All you need to do is set the locale.
Globalize
Follow the instruction to import Globalize scripts: Use Globalize to Format Dates, Numbers, and Currencies.
Example
Follow the steps below to localize the Web Dashboard UI for the Spanish market (the es culture):
Unpack a self-extracting archive and extract json resources. Copy the dx-analytics-core.es.json and dx-dashboards.es.json files with the required locale to the application’s directory (for example, to the json resources folder).
Use the ResourceManager.setLocalizationMessages static method to load the localization strings. Call this method before the dashboard component is created.
Call the locale method and pass the locale as a parameter to apply culture settings.
The following code shows how to:
- import translated strings from JSON files;
- set the
eslocale; - localize the specified string at runtime (the Export To button’s caption in the dashboard title).
<head>
<!-- ...-->
<script>
window.onload = function () {
$.when(
// Localize the Web Dashboard UI for the Spanish market (the 'es' culture):
$.getJSON("json resources/dx-dashboard.es.json").then(DevExpress.Dashboard.ResourceManager.setLocalizationMessages),
$.getJSON("json resources/dx-analytics-core.es.json").then(DevExpress.Dashboard.ResourceManager.setLocalizationMessages)
).then(function () {
// Localize the specified string at runtime (the "Export To" button's caption in the dashboard title):
DevExpress.Dashboard.ResourceManager.setLocalizationMessages({ "DashboardStringId.ActionExportTo": "Custom Text for Export Button" });
// Apply culture-specific formatting:
DevExpress.localization.locale('es');
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
endpoint: "/api/dashboard"
});
dashboardControl.render();
});
};
</script>
</head>