Localization in Reporting for React

• Feb 03, 2021
• 2 minutes to read

In the React application you should import the localized JSON resources and use the CustomizeLocalization callback to call the LoadMessages method that loads localized strings. You can also use the UpdateLocalization method to substitute particular strings.

Obtain JSON Files from the Localization Service

1. Log into the DevExpress website.

2. Open the DevExpress Localization Service.

3. Select your target language, modify translations, and click the Download button. Refer to the Localization Service documentation topic for more information.

4. Unpack the downloaded executable file to get the satellite assemblies and json resources directory. This directory contains the following JSON files required to localize the reporting controls (where xx is a culture name):

File Name	Localization Strings
dx-analytics-core.xx.json	Shared Components: Query Builder, Data Source Wizard, Filter Editor, Expression Editor
dx-reporting.xx.json	Web Document Viewer, End-User Report Designer and other reporting-specific components

Tip

The component’s UI is built on DevExtreme widgets, so to localize the editors you should also use one of the approaches described in the following topic: DevExtreme - Localization. Specify web server’s thread culture to apply culture-specific formats to numbers and dates.

Localize the Application

1. Copy the dx-analytics-core.xx.json and dx-reporting.xx.json files (where xx is the culture identifier) to the root application folder.

2. Open the component file (App.js, if you create the React application from DevExpress template) and add the code that handles the CustomizeLocalization callback. The following code substitutes localizable strings used in Reporting UI with their German equivalents:

   App.js

   import React from 'react';
   import ko from 'knockout';
   import 'devexpress-reporting/dx-webdocumentviewer';
   import './App.css';
   
   import deCore from './dx-analytics-core.de.json'
   import deRep from './dx-reporting.de.json'
   
   class ReportViewer extends React.Component {
           // ...
   
           this.callbacks = {
           CustomizeLocalization: function (s, e) {
                   e.LoadMessages(deCore); 
                   e.LoadMessages(deRep); 
                   s.UpdateLocalization({
                       'Search': 'Suche',
                       'Search result': 'Suchergebnisse',
                       'Next Page': 'Nächste Seite',
                       'Export Options': 'Exportoptionen',
                       'The document does not contain any pages.': 'Keine Daten'
                   });             
               }
           };
       };
   
   
       render() {
           return (
           <div>
               <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
           </div>
           );
       }
       componentDidMount() {
           ko.applyBindings({
               // ...
               callbacks: this.callbacks
           }, this.refs.viewer);
       }
       componentWillUnmount() {
           ko.cleanNode(this.refs.viewer);
       }
   };
   
   function App() {
   return (<div style={{ width: "100%", height: "1000px" }}>
       <ReportViewer />
   </div>);
   }
   
   export default App;
   

3. Recompile the project and open the application in the browser (default URL is http://localhost:3000/).