Search results
PDF

Localization of Bold Reports React Report Viewer

Localization of React Report Viewer 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.

* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`

Refer this CDN links for Localization and Culture to get the Localization and Culture scripts for available Culture Code.

  • 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>);
   }