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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-samples",
-  "version": "10.1.11",
+  "version": "11.1.10",
   "scripts": {
     "test": "gulp test",
     "postinstall": "gulp copy",

src/app/common/app.component.ts

@@ -122,7 +122,7 @@ export class AppComponent implements OnInit {
       width: 100% !important;
     }
 
-    #external-parameter-report{
+    #external-parameter-report, #multi-language-report {
       height: auto !important;
     }`;
   }

src/app/common/app.module.ts

@@ -3,6 +3,15 @@ import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.repo
 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/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 { BrowserModule } from '@angular/platform-browser';
 import { NgModule, } from '@angular/core';

src/app/common/sidebar/sidebar.component.scss

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

src/app/components/dynamic-logos/dynamic-logos.component.html

@@ -0,0 +1,17 @@
+<bold-reportviewer id="dynamic-logos" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath"
+    (toolBarItemClick)="onToolbarItemClick($event)" (exportItemClick)="onExportItemClick()" [toolbarSettings]="toolbarSettings">
+</bold-reportviewer>
+
+<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/app/components/dynamic-logos/dynamic-logos.component.ts

@@ -0,0 +1,24 @@
+/**
+ * Dynamic Logos - This demo showcases a dynamic business report, where company-specific logos and content are updated automatically based on parameter selections.
+ */
+ import { Component } from '@angular/core';
+ import { Globals } from '../globals';
+ @Component({
+   selector: 'ej-sample',
+   templateUrl: './dynamic-logos.component.html',
+   styleUrls: ['./dynamic-logos.component.css']
+ })
+ export class DynamicLogosComponent {
+   // Specifies the report Web API service URL. It is used to process the reports.
+   public serviceUrl = Globals.SERVICE_URL;
+   // Specifies the path of the RDL report file
+   public reportPath: string;
+   public toolbarSettings = Globals.TOOLBAR_OPTIONS;
+   public onToolbarItemClick = Globals.EDIT_REPORT;
+   public onExportItemClick = Globals.EXPORT_ITEM_CLICK;
+
+   constructor() {
+     this.reportPath = 'dynamic-logos.rdl';
+   }
+ }
+

src/app/components/multi-language-report/multi-language-report.component.css

@@ -0,0 +1,77 @@
+#r-w-container {
+  height: 100%;
+  display: inline-flex;
+  width: 100%;
+}
+
+#r-w-sample-container {  
+  width: 70%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  border-right: 1px solid #D7D7D7;
+}
+
+#languages_hidden {
+  padding-left: 5px;
+}
+
+#r-w-property-container {
+  height: auto;
+  width: 30%;
+  position: relative;
+}
+
+#r-w-property-name-category {
+  margin-top: 5px;
+}
+
+#update{
+  font-size: 13px;
+  font-weight: 600;
+  display: block;
+  width: 100px;
+  height: 30px;
+  margin: 20px 0 0 124px;
+}
+
+#r-w-property-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 20px;
+}
+
+#r-w-property-languages {
+  display: inline-flex;
+  margin-left: 20px;
+  margin-right: 0px;
+}
+
+#r-w-property-name-languages {
+  font-size: 13px;
+  font-weight: 500;
+  margin-right: 39px;
+}
+
+#r-w-property-value-languages {
+  margin-top: -4px;
+ }
+
+#r-w-container #alert {
+  margin-top: 20px;
+  font-size: 14px;
+  padding: 10px;
+} 
+
+#languages_hidden, #languages_dropdown {
+  background-color: #fafafa;
+  font-size: 13px;
+}
+
+@media only screen and (max-width: 1080px) {
+  #r-w-property-name-languages {
+      display: none;
+  }
+  #update {
+      margin: 20px 0 0 20px;
+  }
+} 

src/app/components/multi-language-report/multi-language-report.component.html

@@ -0,0 +1,34 @@
+<div id="r-w-container">
+    <div id="r-w-sample-container">
+        <bold-reportviewer #multilanguagereport id="multi-language-report" [reportServiceUrl]="serviceUrl"
+            [reportPath]="reportPath" (toolBarItemClick)="onToolbarItemClick($event)"
+            (exportItemClick)="onExportItemClick()" [toolbarSettings]="toolbarSettings"
+            [parameterSettings]="parameterSettings">
+        </bold-reportviewer>
+    </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" class="r-w-property" style="display: none;">
+            <div id="r-w-property-name-languages">Languages</div>
+            <div id="r-w-property-value-languages">
+                <input type="text" id="languages" />
+            </div>
+        </div>
+        <input type="button" class="r-w-genearte e-control e-btn e-lib e-primary"
+            id="update" (click)="loadReport()" value="View Report" style="display: none;" />
+    </div>
+</div>
+
+<div id="description">
+    <p>
+        This demo showcases a Multi Language Report that allows users to view report in various languages using the Angular 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/angular-reporting/report-viewer/localization/"
+                                                                                                                        target="_blank" rel="noreferrer">documentation</a>.
+    </p>
+</div>

src/app/components/multi-language-report/multi-language-report.component.ts

@@ -0,0 +1,63 @@
+/**
+ * Multi Language Report - This demo showcases a Multi Language Report that allows users to view report in various languages.
+ */
+import { Component, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { DropDownList } from '@syncfusion/ej2-angular-dropdowns';
+import { createSpinner, showSpinner, hideSpinner } from "@syncfusion/ej2-angular-popups";
+import { Globals } from '../globals';
+
+@Component({
+  selector: 'ej-sample',
+  templateUrl: './multi-language-report.component.html',
+  styleUrls: ['./multi-language-report.component.css']
+})
+export class MultiLanguageReportComponent {
+    @ViewChild('multilanguagereport', { static: false }) multiLanguageReport;
+    // Specifies the report Web API service URL. It is used to process the reports.
+    public serviceUrl = Globals.SERVICE_URL;
+    // Specifies the path of the RDL report file
+    public reportPath: string;
+    public toolbarSettings: ej.ReportViewer.ToolbarSettings = {
+        customGroups: Globals.TOOLBAR_OPTIONS.customGroups,
+        toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Vertical 
+    };
+    public onToolbarItemClick = Globals.EDIT_REPORT;
+    public onExportItemClick = Globals.EXPORT_ITEM_CLICK;
+    public parameterSettings: any;
+
+    constructor(private http: HttpClient) {
+        this.reportPath = 'multi-language-report.rdl';
+        this.parameterSettings = { hideParameterBlock: true };
+    }
+    public languagesList: any = [{ 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" }];
+    public loadReport(): void {
+        const reportViewer = this.multiLanguageReport;
+        const selectedLanguageId = (<any>jQuery("#languages"))[0].ej2_instances[0].value;
+        const selectedLanguage = this.languagesList.find(lang => lang.languageId === selectedLanguageId);
+        const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }];
+        reportViewer.widget.model.parameters = parameters;
+        reportViewer.widget.reload();
+        reportViewer.widget.setModel({'locale': selectedLanguageId});
+    }
+    ngAfterViewInit(): void {
+        createSpinner({target: document.getElementById("spinner-container")});
+        showSpinner(document.getElementById("spinner-container"));
+        $(".e-spinner-pane").css("background-color", "rgba(0, 0, 0, 0.4)");
+        const languages: DropDownList = new DropDownList({
+            dataSource: this.languagesList,
+            fields: {
+                text: "Name",
+                value: "languageId",
+            },
+            index: 0,
+            width: "180px",
+            showClearButton: false
+        });
+        languages.appendTo('#languages');
+        hideSpinner(document.getElementById("spinner-container"));
+        $("#r-w-property-title").css("display", "block");
+        $(".r-w-property").css("display", "inline-flex");
+        $(".r-w-genearte").css("display", "block");
+    }
+}

src/app/components/samples.json

@@ -81,6 +81,7 @@
       "sampleName": "Sales Report",
       "basePath": "report-viewer",
       "directoryName": "sales-report",
+      "status": "Updated",
       "imageDetails": {
         "isLandscape": false,
         "index": 9
@@ -495,6 +496,36 @@
       "metaData": {
         "description": "This demo visualizes an Infographics Report that effectively presents student demographics, course interests, achievements, and study preferences in the Angular Bold Report Viewer."
       }
-    } 
+    },
+    {
+      "routerPath": "dynamic-logos",
+      "className": "DynamicLogosComponent",
+      "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 Angular Bold Report Viewer."
+      }
+    },
+    {
+      "routerPath": "multi-language-report",
+      "className": "MultiLanguageReportComponent",
+      "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 Angular Bold Report Viewer."
+      }
+    }
   ]
 }