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.

Follow this steps to localize Bold Reports^® Designer version higher than v5.2.xx

By default report designer display strings in US English(en-US).

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

• ej.localetexts.fr-FR.min.js

1. Refer the ej.localetexts.fr-FR.min.js from node_modules in App.js or App.tsx file.

   import React from 'react';
   import './App.css';
   //Report Designer component styles
   import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';
   //Report Designer component dependent scripts
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
   //Report Viewer and Designer component scripts
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
   //Reports react base
   import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.fr-FR.min.js;
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/reportdesigner/ej.localetexts.fr-FR.min.js';
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/reportviewer/ej.localetexts.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;
   

2. Open the App.js or App.tsx and assign the locale for 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>
     );
   }