diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0c10394..bb0005a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -39,7 +39,7 @@
id = "dashboard2"
pentahoPath = "/public/sample2.wcdf"
[params] = "['param2']"
- masterHtmlElementId = "externalHtmlElementId">
+ [masterHtmlElementIds] = "['externalHtmlElementId']">
diff --git a/src/app/pentaho-dashboard/package.json b/src/app/pentaho-dashboard/package.json
index 95c91d9..365339b 100644
--- a/src/app/pentaho-dashboard/package.json
+++ b/src/app/pentaho-dashboard/package.json
@@ -1,6 +1,6 @@
{
"name": "pentaho-dashboard",
- "version": "1.0.1",
+ "version": "1.0.2",
"description": "Pentaho dashboards library for Angular.",
"main": "index.js",
"scripts": {
diff --git a/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts b/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts
index fd987a4..a08e5df 100644
--- a/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts
+++ b/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts
@@ -24,8 +24,8 @@ export class PentahoDashboardComponent implements AfterViewInit {
@Input('masterDashboardParams')
private masterDashboardParams : string[] = [];
- @Input('masterHtmlElementId')
- private masterHtmlElementId : string = null;
+ @Input('masterHtmlElementIds')
+ private masterHtmlElementIds : string[] = [];
constructor(private pentahoDashboardService: PentahoDashboardService) {
}
@@ -39,8 +39,8 @@ export class PentahoDashboardComponent implements AfterViewInit {
if (this.masterDashboardId != null) {
this.pentahoDashboardService.renderDashboardDependingOnDashboard(this.pentahoPath, this.id, this.params, this.masterDashboardId, this.masterDashboardParams);
}
- else if (this.masterHtmlElementId != null) {
- this.pentahoDashboardService.renderDashboardDependingOnHtmlElement(this.pentahoPath, this.id, this.params, this.masterHtmlElementId);
+ else if (this.masterHtmlElementIds != []) {
+ this.pentahoDashboardService.renderDashboardDependingOnHtmlElement(this.pentahoPath, this.id, this.params, this.masterHtmlElementIds);
}
else {
this.pentahoDashboardService.renderDashboard(this.pentahoPath, this.id);
diff --git a/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts b/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts
index 3656281..8756183 100644
--- a/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts
+++ b/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts
@@ -130,13 +130,13 @@ export class PentahoDashboardService {
path: string,
htmlId:string,
params: string[],
- masterHtmlElementId: string) {
+ masterHtmlElementIds: string[]) {
var dashboardScriptElement = this.createDashboardScriptElement();
var jsCode = "";
jsCode += this.getJsCodeRequireStart(path);
- jsCode += this.getJsCodeForDashboardDependingOnHtmlElement(htmlId, params, masterHtmlElementId);
+ jsCode += this.getJsCodeForDashboardDependingOnHtmlElement(htmlId, params, masterHtmlElementIds);
jsCode += this.getJsCodeRequireEnd();
dashboardScriptElement.innerHTML = jsCode;
@@ -183,13 +183,15 @@ export class PentahoDashboardService {
private getJsCodeForDashboardDependingOnHtmlElement(
htmlId:string,
params: string[],
- masterHtmlElementId:string):string {
+ masterHtmlElementIds: string[]):string {
var jsCode = ", function(Dashboard) { ";
jsCode += "var currentDashboard = new Dashboard(\"" + htmlId + "\"); ";
jsCode += "currentDashboard.render(); ";
- jsCode += "var htmlElement = document.getElementById(\"" + masterHtmlElementId + "\"); ";
- jsCode += "htmlElement.addEventListener(\"change\", function() { currentDashboard.fireChange(\"" + params[0] + "\", this.value); }); ";
+ for (let i in masterHtmlElementIds) {
+ jsCode += "var htmlElement" + i + " = document.getElementById(\"" + masterHtmlElementIds[i] + "\"); ";
+ jsCode += "htmlElement" + i + ".addEventListener(\"change\", function() { currentDashboard.fireChange(\"" + params[i] + "\", this.value); }); ";
+ }
jsCode += "} ";
return jsCode;