Localization

To localize the classic Bold Reports^® React Report Designer, install the @boldreports/global package, refer the culture script files for your culture, and set the culture name to the locale property. Localization is the process of customizing the application for a given culture and locale, which involves much more than the simple translation of text. In the classic Report Designer, localized strings appropriate to each culture are stored in separate files and loaded according to the UI culture setting.

Use these steps to localize the Bold Reports^® Designer version less than v5.2.xx.

By default, the classic Report Designer displays strings in US English (en-US).

To render the static text with specific culture, refer the following corresponding culture script files and set culture name to the locale property of the classic Report Designer.

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 App.js or App.tsx file.

import React from 'react';
import './App.css';
//Report designer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.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/reportdesigner/ej.localetexts.fr-FR.min.js';
import '@boldreports/global/i18n/ej.culture.fr-FR.min.js';

declare let BoldReportDesignerComponent: any;

var designerStyle = {
  'height': '700px',
  'width': '100%'
};

function App() {
  return (
    <div style={designerStyle}>
    <BoldReportDesignerComponent
    id="reportdesigner_container"
    serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}
    >
    </BoldReportDesignerComponent>
    </div>
  );
}

export default App;

Open the App.js or App.tsx and assign the locale for classic Report Designer.

function App() {
  return (
    <div style={designerStyle}>
    <BoldReportDesignerComponent
    id="reportdesigner_container"
    serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}
    locale="fr-FR">
    </BoldReportDesignerComponent>
    </div>
  );
}

Localization

See also