Localization of Bold Reports® React Report Viewer Classic

To localize the Bold Reports® React Report Viewer Classic, refer to the culture script files for the culture you need and set the culture name in the locale property of the Report Viewer Classic. Localization shows static text such as tooltips, the parameter block, and dialog text in a specific culture. For the French culture, refer to the following script files.

* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`
  • Run the following command to install the @boldreports/global package.
npm install @boldreports/global --save
  • Refer to the ej.localetexts.fr-FR.min.js and ej.culture.fr-FR.min.js script files from node_modules in the App.js file.
import React from 'react';
import './App.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-circulargauge.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-lineargauge.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-maps.min';
//Reports react base

import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

import '@boldreports/global/l10n/ej.localetexts.fr-FR.min.js';
import '@boldreports/global/i18n/ej.culture.fr-FR.min.js';
...
...

Initialize the locale property in the App.js file, as in the following code snippet:

 var locale = 'fr-FR';

 function App() {
     return (<div id="viewer" style={viewerStyle}>
     <BoldReportViewerComponent id="reportviewer-container"
     reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
     reportPath = { 'GroupingAgg.rdl' }
     locale = {locale}
     >
     </BoldReportViewerComponent>
     </div>);
   }

See also