diff --git a/assets/sidebar/portrait.png b/assets/sidebar/portrait.png index 7976bd4..cb3ae12 100644 Binary files a/assets/sidebar/portrait.png and b/assets/sidebar/portrait.png differ diff --git a/package.json b/package.json index bdbbc92..a7b14d1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "javascript-samples", - "version": "10.1.11", + "version": "11.1.10", "description": "", "author": "", "license": "ISC", @@ -39,8 +39,8 @@ }, "dependencies": { "@babel/polyfill": "7.2.5", - "@boldreports/javascript-reporting-controls": "10.1.11", - "@boldreports/javascript-reporting-extensions": "10.1.11", + "@boldreports/javascript-reporting-controls": "11.1.10", + "@boldreports/javascript-reporting-extensions": "11.1.10", "codemirror": "5.58.2", "hasher": "1.2.0", "jquery": "3.6.0", diff --git a/src/common/index.css b/src/common/index.css index 215ddb4..52f1db0 100644 --- a/src/common/index.css +++ b/src/common/index.css @@ -311,6 +311,12 @@ ej-sidebar { background-color: rgba(0, 0, 0, 0.4); } +#r-w-property-languages { + font-size: 13px; + font-weight: 500; + margin-right: 39px; +} + #r-w-property-name-category{ margin-top: 5px; } @@ -387,14 +393,14 @@ 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; font-size: 13px; } @media only screen and (max-width: 1080px) { - #r-w-property-name, #r-w-property-name-category { + #r-w-property-name, #r-w-property-name-category, #r-w-property-languages { display: none; } diff --git a/src/common/index.js b/src/common/index.js index ad74045..9b34534 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -10,6 +10,15 @@ import * as hasher from 'hasher'; 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'; import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.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'; //globals import './../controls/globals'; diff --git a/src/common/sidebar/sidebar.css b/src/common/sidebar/sidebar.css index 903dca9..5d6b0a9 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-title { diff --git a/src/controls/dynamic-logos/dynamic-logos.html b/src/controls/dynamic-logos/dynamic-logos.html new file mode 100644 index 0000000..ca376a8 --- /dev/null +++ b/src/controls/dynamic-logos/dynamic-logos.html @@ -0,0 +1,14 @@ +
+
+

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

+
\ No newline at end of file diff --git a/src/controls/dynamic-logos/dynamic-logos.js b/src/controls/dynamic-logos/dynamic-logos.js new file mode 100644 index 0000000..ec2ea80 --- /dev/null +++ b/src/controls/dynamic-logos/dynamic-logos.js @@ -0,0 +1,14 @@ +/** + * Dynamic Logos - This demo showcases a dynamic business report, where company-specific logos and content are updated automatically based on parameter selections. + */ + $(function () { + $("#container").boldReportViewer({ + // Specifies the report Web API service URL. It is used to process the reports. + reportServiceUrl: window.Globals.SERVICE_URL, + // Specifies the path of the RDL report file + reportPath: 'dynamic-logos.rdl', + toolbarSettings: window.Globals.TOOLBAR_OPTIONS, + toolBarItemClick: window.Globals.EDIT_REPORT, + exportItemClick: window.Globals.EXPORT_ITEM_CLICK + }); +}); diff --git a/src/controls/multi-language-report/multi-language-report.html b/src/controls/multi-language-report/multi-language-report.html new file mode 100644 index 0000000..020f41b --- /dev/null +++ b/src/controls/multi-language-report/multi-language-report.html @@ -0,0 +1,32 @@ +
+
+
+ +
+ +
+
+
+ + + +
+
+
+
+

+ This demo showcases a Multi Language Report that allows users to view report in various languages using the JavaScript 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. +

+
\ No newline at end of file diff --git a/src/controls/multi-language-report/multi-language-report.js b/src/controls/multi-language-report/multi-language-report.js new file mode 100644 index 0000000..a377d66 --- /dev/null +++ b/src/controls/multi-language-report/multi-language-report.js @@ -0,0 +1,42 @@ +$(function () { + $("#container").boldReportViewer({ + // Specifies the report Web API service URL. It is used to process the reports. + reportServiceUrl: window.Globals.SERVICE_URL, + // Specifies the path of the RDL report file + reportPath: 'multi-language-report.rdl', + toolbarSettings: { + customGroups: window.Globals.TOOLBAR_OPTIONS.customGroups, + toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Vertical + }, + toolBarItemClick: window.Globals.EDIT_REPORT, + exportItemClick: window.Globals.EXPORT_ITEM_CLICK, + parameterSettings: { hideParameterBlock: true } + }); + const 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" }]; + ejs.popups.createSpinner({ target: document.getElementById("spinner-container") }); + ejs.popups.showSpinner(document.getElementById("spinner-container")); + const 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"); + $(".r-w-property").css("display", "inline-flex"); + $("#update").on("click", function () { + const reportViewer = $("#container").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}); + }); +}); \ No newline at end of file diff --git a/src/controls/samples.json b/src/controls/samples.json index e420aac..15c5ae9 100644 --- a/src/controls/samples.json +++ b/src/controls/samples.json @@ -71,6 +71,7 @@ "sampleName": "Sales Report", "basePath": "report-viewer", "directoryName": "sales-report", + "status": "Updated", "imageDetails": { "isLandscape": false, "index": 9 @@ -458,6 +459,34 @@ "metaData": { "description": "This demo visualizes an Infographics Report that effectively presents student demographics, course interests, achievements, and study preferences in the JavaScript 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 JavaScript 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 JavaScript Bold Report Viewer." + } } ] }