Merge pull request #44 from SundaresanGunasekaran/master

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

Author: karthickthangasamy

assets/sidebar/portrait.png

@@ -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",

package.json

@@ -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;
   }
 

src/common/index.css

@@ -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';

src/common/index.js

@@ -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 {

src/common/sidebar/sidebar.css

@@ -0,0 +1,14 @@
+<div id="container"></div>
+<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>

src/controls/dynamic-logos/dynamic-logos.html

@@ -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
+    });
+});

src/controls/dynamic-logos/dynamic-logos.js

@@ -0,0 +1,32 @@
+<form>
+    <div id="r-w-container">
+        <div id="r-w-sample-container">
+            <ej-sample>
+                <div id="container"></div>
+            </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 class="r-w-property" id="r-w-property-category" style="display: none;">
+                <div class="r-w-property-name" id="r-w-property-languages">Languages</div>
+                <div class="r-w-property-value">
+                    <input type="text" id="languages" />
+                </div>
+            </div>
+            <input type="button" id="update" class="r-w-genearte e-control e-btn e-lib e-primary" value="View Report" style="display: none;" />
+        </div>
+    </div>
+</form>
+<div id="description">
+    <p>
+        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.
+    </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/javascript-reporting/report-viewer/localization/"
+                                                                                                                        target="_blank" rel="noreferrer">documentation</a>.
+    </p>
+</div>

src/controls/multi-language-report/multi-language-report.html

@@ -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});
+    });
+});

src/controls/multi-language-report/multi-language-report.js

@@ -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."
+      }
     }
   ]
 }