diff --git a/package.json b/package.json index a166351..e78cdad 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 8223551..2352c5c 100644 --- a/src/App.js +++ b/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; diff --git a/src/assets/sidebar/portrait.png b/src/assets/sidebar/portrait.png index 7976bd4..cb3ae12 100644 Binary files a/src/assets/sidebar/portrait.png and b/src/assets/sidebar/portrait.png differ diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js index d534a82..09ca3bc 100644 --- a/src/common/main-content/main-content.js +++ b/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(); } diff --git a/src/common/sidebar/sidebar.css b/src/common/sidebar/sidebar.css index 6524831..52124a0 100644 --- a/src/common/sidebar/sidebar.css +++ b/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{ diff --git a/src/controls/dynamic-logos.js b/src/controls/dynamic-logos.js new file mode 100644 index 0000000..39d02f4 --- /dev/null +++ b/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 ( + + ) + } + else { + return ( +
+

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 Report Parameters.

+ +

+ More information about the image report item can be found in this documentation section. +

+
+ ); + } + } +} +export default DynamicLogos; \ No newline at end of file diff --git a/src/controls/multi-language-report.js b/src/controls/multi-language-report.js new file mode 100644 index 0000000..eff9a86 --- /dev/null +++ b/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 ( +
+
+ + + + +
+
+
+
Parameters
+
+
Languages
+
+ +
+
+ +
+
+ ) + } + else { + return ( +
+

+ 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. +

+

+ Ensure that the report is designed to support multiple languages and that the necessary localization resources are available. +

+

+ For detailed guidance on implementing localization, refer to the documentation. +

+
+ ); + } + } + 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; diff --git a/src/globals.js b/src/globals.js index 826b413..f48e6c0 100644 --- a/src/globals.js +++ b/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) { diff --git a/src/samples.json b/src/samples.json index 0674ff0..d7d3811 100644 --- a/src/samples.json +++ b/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." + } } ] } diff --git a/src/styles/index.css b/src/styles/index.css index b1812aa..2bd2a00 100644 --- a/src/styles/index.css +++ b/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; }