Skip to content

Commit e6d037f

Browse files
SundaresanGunasekarankarthickthangasamy
SundaresanGunasekaran
authored and
karthickthangasamy
committed
feature(REPORT-461761): Bold Reports 11.1 Release Changes
1 parent a8e9c39 commit e6d037f

File tree

12 files changed

+259
-4
lines changed

12 files changed

+259
-4
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-samples",
3-
"version": "10.1.11",
3+
"version": "11.1.10",
44
"scripts": {
55
"test": "gulp test",
66
"postinstall": "gulp copy",

‎src/app/common/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export class AppComponent implements OnInit {
122122
width: 100% !important;
123123
}
124124
125-
#external-parameter-report{
125+
#external-parameter-report, #multi-language-report {
126126
height: auto !important;
127127
}`;
128128
}

‎src/app/common/app.module.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@ import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.repo
33
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
44
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
55
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
6+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.en-US.min.js';
7+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.fr-CA.min.js';
8+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.de-DE.min.js';
9+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.hi-IN.min.js';
10+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.es-ES.min.js';
11+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.nl-NL.min.js';
12+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.ko-KR.min.js';
13+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.he-IL.min.js';
14+
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/l10n/ej.localetexts.ru-RU.min.js';
615

716
import { BrowserModule } from '@angular/platform-browser';
817
import { NgModule, } from '@angular/core';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
width: 90px;
5656
margin: 8px;
5757
background-image: url('./../../../assets/sidebar/portrait.png');
58-
background-size: 100% 2000%;
58+
background-size: 100% 2100%;
5959
}
6060

6161
.ej-sb-toc-title {

‎src/app/components/dynamic-logos/dynamic-logos.component.css‎

Whitespace-only changes.

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<bold-reportviewer id="dynamic-logos" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath"
2+
(toolBarItemClick)="onToolbarItemClick($event)" (exportItemClick)="onExportItemClick()" [toolbarSettings]="toolbarSettings">
3+
</bold-reportviewer>
4+
5+
<div id="description">
6+
<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/"
7+
target="_blank" rel="noreferrer">Report Parameters</a>.</p>
8+
<ul>
9+
<li>It supports scalable deployment across multiple <code>companies (A to E)</code>, enhancing reusability and reducing design overhead.</li>
10+
<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>
11+
</ul>
12+
<p>
13+
More information about the image report item can be found in this <a
14+
href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/image-manager/"
15+
target="_blank" rel="noreferrer">documentation</a> section.
16+
</p>
17+
</div>

‎src/app/components/dynamic-logos/dynamic-logos.component.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Dynamic Logos - This demo showcases a dynamic business report, where company-specific logos and content are updated automatically based on parameter selections.
3+
*/
4+
import { Component } from '@angular/core';
5+
import { Globals } from '../globals';
6+
@Component({
7+
selector: 'ej-sample',
8+
templateUrl: './dynamic-logos.component.html',
9+
styleUrls: ['./dynamic-logos.component.css']
10+
})
11+
export class DynamicLogosComponent {
12+
// Specifies the report Web API service URL. It is used to process the reports.
13+
public serviceUrl = Globals.SERVICE_URL;
14+
// Specifies the path of the RDL report file
15+
public reportPath: string;
16+
public toolbarSettings = Globals.TOOLBAR_OPTIONS;
17+
public onToolbarItemClick = Globals.EDIT_REPORT;
18+
public onExportItemClick = Globals.EXPORT_ITEM_CLICK;
19+
20+
constructor() {
21+
this.reportPath = 'dynamic-logos.rdl';
22+
}
23+
}
24+

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
#r-w-container {
2+
height: 100%;
3+
display: inline-flex;
4+
width: 100%;
5+
}
6+
7+
#r-w-sample-container {
8+
width: 70%;
9+
overflow-y: hidden;
10+
overflow-x: hidden;
11+
border-right: 1px solid #D7D7D7;
12+
}
13+
14+
#languages_hidden {
15+
padding-left: 5px;
16+
}
17+
18+
#r-w-property-container {
19+
height: auto;
20+
width: 30%;
21+
position: relative;
22+
}
23+
24+
#r-w-property-name-category {
25+
margin-top: 5px;
26+
}
27+
28+
#update{
29+
font-size: 13px;
30+
font-weight: 600;
31+
display: block;
32+
width: 100px;
33+
height: 30px;
34+
margin: 20px 0 0 124px;
35+
}
36+
37+
#r-w-property-title {
38+
font-size: 15px;
39+
font-weight: 600;
40+
margin: 20px;
41+
}
42+
43+
#r-w-property-languages {
44+
display: inline-flex;
45+
margin-left: 20px;
46+
margin-right: 0px;
47+
}
48+
49+
#r-w-property-name-languages {
50+
font-size: 13px;
51+
font-weight: 500;
52+
margin-right: 39px;
53+
}
54+
55+
#r-w-property-value-languages {
56+
margin-top: -4px;
57+
}
58+
59+
#r-w-container #alert {
60+
margin-top: 20px;
61+
font-size: 14px;
62+
padding: 10px;
63+
}
64+
65+
#languages_hidden, #languages_dropdown {
66+
background-color: #fafafa;
67+
font-size: 13px;
68+
}
69+
70+
@media only screen and (max-width: 1080px) {
71+
#r-w-property-name-languages {
72+
display: none;
73+
}
74+
#update {
75+
margin: 20px 0 0 20px;
76+
}
77+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<div id="r-w-container">
2+
<div id="r-w-sample-container">
3+
<bold-reportviewer #multilanguagereport id="multi-language-report" [reportServiceUrl]="serviceUrl"
4+
[reportPath]="reportPath" (toolBarItemClick)="onToolbarItemClick($event)"
5+
(exportItemClick)="onExportItemClick()" [toolbarSettings]="toolbarSettings"
6+
[parameterSettings]="parameterSettings">
7+
</bold-reportviewer>
8+
</div>
9+
<div id="r-w-property-container">
10+
<div id='spinner-container'></div>
11+
<div id="r-w-property-title" style="display: none;">Parameters</div>
12+
<div id="r-w-property-languages" class="r-w-property" style="display: none;">
13+
<div id="r-w-property-name-languages">Languages</div>
14+
<div id="r-w-property-value-languages">
15+
<input type="text" id="languages" />
16+
</div>
17+
</div>
18+
<input type="button" class="r-w-genearte e-control e-btn e-lib e-primary"
19+
id="update" (click)="loadReport()" value="View Report" style="display: none;" />
20+
</div>
21+
</div>
22+
23+
<div id="description">
24+
<p>
25+
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.
26+
</p>
27+
<p>
28+
Ensure that the report is designed to support multiple languages and that the necessary localization resources are available.
29+
</p>
30+
<p>
31+
For detailed guidance on implementing localization, refer to the <a href="https://help.boldreports.com/embedded-reporting/angular-reporting/report-viewer/localization/"
32+
target="_blank" rel="noreferrer">documentation</a>.
33+
</p>
34+
</div>

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Multi Language Report - This demo showcases a Multi Language Report that allows users to view report in various languages.
3+
*/
4+
import { Component, ViewChild } from '@angular/core';
5+
import { HttpClient } from '@angular/common/http';
6+
import { DropDownList } from '@syncfusion/ej2-angular-dropdowns';
7+
import { createSpinner, showSpinner, hideSpinner } from "@syncfusion/ej2-angular-popups";
8+
import { Globals } from '../globals';
9+
10+
@Component({
11+
selector: 'ej-sample',
12+
templateUrl: './multi-language-report.component.html',
13+
styleUrls: ['./multi-language-report.component.css']
14+
})
15+
export class MultiLanguageReportComponent {
16+
@ViewChild('multilanguagereport', { static: false }) multiLanguageReport;
17+
// Specifies the report Web API service URL. It is used to process the reports.
18+
public serviceUrl = Globals.SERVICE_URL;
19+
// Specifies the path of the RDL report file
20+
public reportPath: string;
21+
public toolbarSettings: ej.ReportViewer.ToolbarSettings = {
22+
customGroups: Globals.TOOLBAR_OPTIONS.customGroups,
23+
toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Vertical
24+
};
25+
public onToolbarItemClick = Globals.EDIT_REPORT;
26+
public onExportItemClick = Globals.EXPORT_ITEM_CLICK;
27+
public parameterSettings: any;
28+
29+
constructor(private http: HttpClient) {
30+
this.reportPath = 'multi-language-report.rdl';
31+
this.parameterSettings = { hideParameterBlock: true };
32+
}
33+
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" }];
34+
public loadReport(): void {
35+
const reportViewer = this.multiLanguageReport;
36+
const selectedLanguageId = (<any>jQuery("#languages"))[0].ej2_instances[0].value;
37+
const selectedLanguage = this.languagesList.find(lang => lang.languageId === selectedLanguageId);
38+
const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }];
39+
reportViewer.widget.model.parameters = parameters;
40+
reportViewer.widget.reload();
41+
reportViewer.widget.setModel({'locale': selectedLanguageId});
42+
}
43+
ngAfterViewInit(): void {
44+
createSpinner({target: document.getElementById("spinner-container")});
45+
showSpinner(document.getElementById("spinner-container"));
46+
$(".e-spinner-pane").css("background-color", "rgba(0, 0, 0, 0.4)");
47+
const languages: DropDownList = new DropDownList({
48+
dataSource: this.languagesList,
49+
fields: {
50+
text: "Name",
51+
value: "languageId",
52+
},
53+
index: 0,
54+
width: "180px",
55+
showClearButton: false
56+
});
57+
languages.appendTo('#languages');
58+
hideSpinner(document.getElementById("spinner-container"));
59+
$("#r-w-property-title").css("display", "block");
60+
$(".r-w-property").css("display", "inline-flex");
61+
$(".r-w-genearte").css("display", "block");
62+
}
63+
}

0 commit comments

Comments
 (0)