diff --git a/package.json b/package.json index 584ec01..7c6b8c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-samples", - "version": "10.1.11", + "version": "11.1.10", "scripts": { "test": "gulp test", "postinstall": "gulp copy", diff --git a/src/app/common/app.component.ts b/src/app/common/app.component.ts index 19f7fb1..ff25701 100644 --- a/src/app/common/app.component.ts +++ b/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; }`; } diff --git a/src/app/common/app.module.ts b/src/app/common/app.module.ts index ac1e1a2..7ced39f 100644 --- a/src/app/common/app.module.ts +++ b/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'; diff --git a/src/app/common/sidebar/sidebar.component.scss b/src/app/common/sidebar/sidebar.component.scss index 15ddcf8..aba7b0f 100644 --- a/src/app/common/sidebar/sidebar.component.scss +++ b/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 { diff --git a/src/app/components/dynamic-logos/dynamic-logos.component.css b/src/app/components/dynamic-logos/dynamic-logos.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/dynamic-logos/dynamic-logos.component.html b/src/app/components/dynamic-logos/dynamic-logos.component.html new file mode 100644 index 0000000..22f81d7 --- /dev/null +++ b/src/app/components/dynamic-logos/dynamic-logos.component.html @@ -0,0 +1,17 @@ + + + +
+

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/app/components/dynamic-logos/dynamic-logos.component.ts b/src/app/components/dynamic-logos/dynamic-logos.component.ts new file mode 100644 index 0000000..dd73e12 --- /dev/null +++ b/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'; + } + } + \ No newline at end of file diff --git a/src/app/components/multi-language-report/multi-language-report.component.css b/src/app/components/multi-language-report/multi-language-report.component.css new file mode 100644 index 0000000..fc24490 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/app/components/multi-language-report/multi-language-report.component.html b/src/app/components/multi-language-report/multi-language-report.component.html new file mode 100644 index 0000000..c035b3c --- /dev/null +++ b/src/app/components/multi-language-report/multi-language-report.component.html @@ -0,0 +1,34 @@ +
+
+ + +
+
+
+ + + +
+
+ +
+

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

+

+ 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/app/components/multi-language-report/multi-language-report.component.ts b/src/app/components/multi-language-report/multi-language-report.component.ts new file mode 100644 index 0000000..fe077b2 --- /dev/null +++ b/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 = (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"); + } +} \ No newline at end of file diff --git a/src/app/components/samples.json b/src/app/components/samples.json index a81c6a4..db2082c 100644 --- a/src/app/components/samples.json +++ b/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." + } + } ] } 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