Localization

Localization is the process of customizing the application for a given culture and locale - involving much more than the simple translation of text. In web report designer, localized strings appropriate to each culture are stored in separate files and loaded according to the UI culture setting.

This section explains steps to localize Bold Reports^® Designer version less than v5.2.xx

By default classic report designer display 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

1. Run the below command, to install the @boldreports/global package

   npm install @boldreports/global --save

2. Refer the ej.localetexts.fr-FR.min.js and ej.culture.fr-FR.min.js 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;
   

3. 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>
     );
   }