Localization of Bold Reports® React Report Viewer Classic

Localization of React Report Viewer Classic allows you to localize the static text such as tooltip, parameter block, and dialog text based on a specific culture. To render the static text with specific culture, refer to the following corresponding culture script files and set culture name to the locale property of the Report Viewer Classic.

* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`
  • Run the below 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 shown like in below 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>);
   }