feature(REPORT-461761): Bold Reports 11.1 Release Changes

package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-sample-browser",
-  "version": "10.1.11",
+  "version": "11.1.10",
   "private": true,
   "dependencies": {
-    "@boldreports/react-reporting-components": "10.1.11",
-    "@boldreports/javascript-reporting-extensions": "10.1.11",
+    "@boldreports/react-reporting-components": "11.1.10",
+    "@boldreports/javascript-reporting-extensions": "11.1.10",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.8.3",

src/App.js

@@ -10,6 +10,15 @@ import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.repo
 import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
 import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';
 import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.en-US.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.fr-CA.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.de-DE.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.hi-IN.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.es-ES.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.nl-NL.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.ko-KR.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.he-IL.min.js';
+import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.ru-RU.min.js';
 import { MainContentSample, MainContentPreview } from './common/main-content/main-content';
 const samples = data.samples;
 

src/common/main-content/main-content.js

@@ -264,7 +264,7 @@ class MainContentPreview extends Component {
     });
   }
   setReportsHeight() {
-    if (location.href.includes('/preview') && location.href.includes('/external-parameter-report')) {
+    if (this.isExternalParameter()) {
       var style = document.getElementById('reports-style');
       if (!style) {
         style = document.createElement('style');
@@ -282,6 +282,13 @@ class MainContentPreview extends Component {
       document.getElementById('report-viewer').style.width = `100%`;
     }
   }
+  isExternalParameter() {
+    const externalParameterSamples = [
+      '/external-parameter-report',
+      '/multi-language-report'
+    ];
+    return externalParameterSamples.some(path => location.href.includes(path)) && location.href.includes('/preview');
+  }
   componentDidMount() {
     this.setReportsHeight();
   }

src/common/sidebar/sidebar.css

@@ -52,7 +52,7 @@
   width: 90px;
   margin: 8px;
   background-image: url('./../../assets/sidebar/portrait.png');
-  background-size: 100% 2000%;
+  background-size: 100% 2100%;
 }
 
 .ej-sidebar-content .ej-sb-toc .ej-sb-toc-card .ej-sb-toc-card-link{

src/controls/dynamic-logos.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import React, { Component } from 'react';
+import { Globals } from '../globals';
+
+class DynamicLogos extends Component {
+    render() {
+        if (this.props.content !== 'desc') {
+            return (
+                <BoldReportViewerComponent
+                    id="report-viewer"
+                    reportServiceUrl={Globals.ServiceURL}
+                    reportPath={'dynamic-logos.rdl'}
+                    toolbarSettings={Globals.TOOLBAR_OPTIONS}
+                    toolBarItemClick={Globals.EDIT_REPORT}>
+                </BoldReportViewerComponent>)
+        }
+        else {
+            return (
+                <div id="description">
+                    <p>The report uses parameter-driven logic to dynamically update company logos, names, and contact details without requiring changes to modifying the report layout using the <a href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/report-parameters/add/"
+                                                                                                target="_blank" rel="noreferrer">Report Parameters</a>.</p>
+                    <ul>
+                        <li>It supports scalable deployment across multiple <code>companies (A to E)</code>, enhancing reusability and reducing design overhead.</li>
+                        <li>Bold Reports <code>image</code> and <code>text</code> report items are bound to parameters, enabling seamless customization of both visuals and data.</li>
+                    </ul>
+                    <p>
+                        More information about the image report item can be found in this <a
+                            href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/image-manager/"
+                            target="_blank" rel="noreferrer">documentation</a> section.
+                    </p>
+                </div>
+            );
+        }
+    }
+}
+export default DynamicLogos;

src/controls/multi-language-report.js

@@ -0,0 +1,94 @@
+/* eslint-disable */
+import React, { Component } from 'react';
+import { Globals } from '../globals';
+const parameterSettings = {
+    hideParameterBlock: true
+}
+let didMount = true;
+let languagesList, languages;
+
+class MultiLanguageReport extends Component {
+    render() {
+        if (this.props.content !== 'desc') {
+            return (
+                <div id="r-w-container">
+                    <div id="r-w-sample-container">
+                        <ej-sample>
+                            <BoldReportViewerComponent
+                                id="report-viewer"
+                                reportServiceUrl={Globals.ServiceURL}
+                                reportPath={'multi-language-report.rdl'}
+                                toolbarSettings={{
+                                    customGroups: window.Globals.TOOLBAR_OPTIONS.customGroups,
+                                    toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Vertical 
+                                }}
+                                toolBarItemClick={Globals.EDIT_REPORT} parameterSettings={parameterSettings}>
+                            </BoldReportViewerComponent>
+                        </ej-sample>
+                    </div>
+                    <div id="r-w-property-container">
+                        <div id='spinner-container'></div>
+                        <div id="r-w-property-title" style={{display: "none"}}>Parameters</div>
+                        <div id="r-w-property-languages" className="parameter-property" style={{display: "none"}}>
+                            <div id="r-w-property-name-languages">Languages</div>
+                            <div id='r-w-property-value-category'>
+                                <input type="text" id="languages" />
+                            </div>
+                        </div>
+                        <input type="button" className="r-w-genearte e-control e-btn e-lib e-primary"
+                            id="update" onClick={this.loadReport} value="View Report" style={{display: "none"}} />
+                    </div>
+                </div>
+            )
+        }
+        else {
+            return (
+                <div id="description">
+                    <p>
+                        This demo showcases a Multi Language Report that allows users to view report in various languages using the React Bold Report Viewer. Select a language from the dropdown and click "View Report" to see the report content in the selected language.
+                    </p>
+                    <p>
+                        Ensure that the report is designed to support multiple languages and that the necessary localization resources are available.
+                    </p>
+                    <p>
+                        For detailed guidance on implementing localization, refer to the <a href="https://help.boldreports.com/embedded-reporting/react-reporting/report-viewer/localization/"
+                                                                                                                                        target="_blank" rel="noreferrer">documentation</a>.
+                    </p>
+                </div>
+            );
+        }
+    }
+    componentDidMount() {
+        ejs.popups.createSpinner({ target: document.getElementById("spinner-container") })
+        ejs.popups.showSpinner(document.getElementById("spinner-container"));
+        languagesList = [{ Name: "English", languageId: "en-US" }, { Name: "French", languageId: "fr-CA" }, { Name: "German", languageId: "de-DE" }, { Name: "Hindi", languageId: "hi-IN" }, { Name: "Spanish", languageId: "es-ES" }, { Name: "Dutch", languageId: "nl-NL" }, { Name: "Korean", languageId: "ko-KR" }, { Name: "Hebrew", languageId: "he-IL" }, { Name: "Russian", languageId: "ru-RU" }];
+        if(didMount) {
+            languages = new ejs.dropdowns.DropDownList({
+                dataSource: languagesList,
+                fields: {
+                    text: "Name",
+                    value: "languageId",
+                },
+                index: 0,
+                width: "180px",
+                height: "10px",
+                showClearButton: false
+            });
+            languages.appendTo('#languages');
+        }
+        ejs.popups.hideSpinner(document.getElementById("spinner-container"));
+        $("#r-w-property-title, .r-w-genearte").css("display", "block");
+        $(".parameter-property").css("display", "inline-flex");
+        didMount = false;
+    }
+    loadReport = () => {
+        const reportViewer = $("#report-viewer").boldReportViewer("instance");
+        const selectedLanguageId = languages.value.toString();
+        const selectedLanguage = languagesList.find(lang => lang.languageId === selectedLanguageId);
+        const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }];
+        reportViewer.model.parameters = parameters;
+        reportViewer.reload();
+        reportViewer.setModel({'locale': selectedLanguageId});
+    }
+}
+export default MultiLanguageReport;

src/globals.js

@@ -34,6 +34,8 @@ import PowerPointReport from './controls/powerpoint-report';
 import TranscriptReport from './controls/transcript-report';
 import CMRReport from './controls/cmr-report';
 import InfographicsReport from './controls/infographics-report';
+import DynamicLogos from './controls/dynamic-logos';
+import MultiLanguageReport from './controls/multi-language-report';
 import rdlcData from './rdlcData'
 
 window.React = React;
@@ -110,7 +112,9 @@ const SampleComponents = {
     PowerPointReport: PowerPointReport,
     TranscriptReport: TranscriptReport,
     CMRReport: CMRReport,
-    InfographicsReport: InfographicsReport
+    InfographicsReport: InfographicsReport,
+    DynamicLogos: DynamicLogos,
+    MultiLanguageReport: MultiLanguageReport
 }
 
 function onReportLoaded(args) {

src/samples.json

@@ -74,6 +74,7 @@
       "sampleName": "Sales Report",
       "basePath": "report-viewer",
       "directoryName": "sales-report",
+      "status": "Updated",
       "imageDetails": {
         "isLandscape": false,
         "index": 9
@@ -462,6 +463,34 @@
       "metaData": {
         "description": "This demo visualizes an Infographics Report that effectively presents student demographics, course interests, achievements, and study preferences in the React Bold Report Viewer."
       }
+    },
+    {
+      "routerPath": "dynamic-logos",
+      "sampleName": "Dynamic Logos",
+      "basePath": "report-viewer",
+      "directoryName": "dynamic-logos",
+      "status": "New",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 19
+      },
+      "metaData": {
+        "description": "This demo showcases a dynamic business report, where company-specific logos and content are updated automatically based on parameter selections in the React Bold Report Viewer."
+      }
+    },
+    {
+      "routerPath": "multi-language-report",
+      "sampleName": "Multi Language Report",
+      "basePath": "report-viewer",
+      "directoryName": "multi-language-report",
+      "status": "New",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 5
+      },
+      "metaData": {
+        "description": "This demo showcases a Multi Language Report that allows users to view report in various languages using the React Bold Report Viewer."
+      }
     }
   ]
 }

src/styles/index.css

@@ -345,7 +345,14 @@ ej-sidebar {
     margin: 20px;
 }
 
-#r-w-property-category, #r-w-property-subcategory, #r-w-property-startdate, #r-w-property-enddate {
+#r-w-property-name-languages {
+  font-size: 13px;
+  font-weight: 500;
+  margin-right: 39px;
+  margin-top: 8px;
+}
+
+#r-w-property-languages, #r-w-property-category, #r-w-property-subcategory, #r-w-property-startdate, #r-w-property-enddate {
   margin-left: 20px;
 }
 
@@ -389,7 +396,7 @@ ej-sidebar {
   right: 5px;
 }
 
-#category_hidden,#subcategory_hidden{
+#languages_hidden, #category_hidden, #subcategory_hidden{
   font-size: 13px;
 }
 
@@ -407,7 +414,7 @@ ej-sidebar {
   border-bottom: 1px solid #c8c8c8;
 }
 
-#category_hidden, #category_dropdown, #subcategory_hidden, #subcategory_dropdown,#startdate,#enddate {
+#languages_hidden, #languages_dropdown, #category_hidden, #category_dropdown, #subcategory_hidden, #subcategory_dropdown,#startdate,#enddate {
   background-color: #fafafa;
 }