Viewing a dashboard dependant on a parameter
In this example you will learn how to control a Pentaho dashboard from one (or more) local parameters to the Angular component. The development is similar to the initial example and the only changes is on the HTML of the component.
1. Adding the dashboard2
component
To create a new component into your application, follow the same instructions described in paragraph 1 for the simpler example. Of course, replacing dashboard1
with dashboard2
.
2. Developing the Dashboard2Component
Once done, it's time to develop the dashboard2
component.
2.1. Developing the HTML
Edit the dashboard2.component.html
file into src/app/dashboard2
folder, as following.
<p>
<select id="externalHtmlElementId">
<option value="Classic Cars">Classic Cars</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Planes">Planes</option>
<option value="Ships">Ships</option>
<option value="Trains">Trains</option>
</select>
<pentaho-dashboard
id = "dashboard2"
pentahoPath = "/public/sample2.wcdf"
[params] = "['param2']"
[masterHtmlElementIds] = "['externalHtmlElementId']"
[setDefaults]="true">
</pentaho-dashboard>
</p>
As alternative you might want to have a button that will update the dashboard only when pressed. In this case the following HTML should be used.
<p>
<select id="externalHtmlElementId">
<option value="Classic Cars">Classic Cars</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Planes">Planes</option>
<option value="Ships">Ships</option>
<option value="Trains">Trains</option>
</select>
<button id="externalHtmlButtonId" type="button">Click Me!</button>
<pentaho-dashboard
id = "dashboard2"
pentahoPath = "/public/sample2.wcdf"
[params] = "['param2']"
[masterHtmlElementIds] = "['externalHtmlElementId']"
masterHtmlButtonId = "externalHtmlButtonId">
</pentaho-dashboard>
</p>
2.2. Developing the Typescript
Edit the dashboard2.component.ts
file into src/app/dashboard2
folder, as following.
import { Router } from '@angular/router';
import { PentahoDashboardService } from 'pentaho-dashboard';
...
constructor(
private router: Router,
private pentahoDashboardService: PentahoDashboardService) {
if (this.pentahoDashboardService.isNotLoggedIn()) {
this.router.navigate(['/login']);
}
}
3. Using the dashboard2
Once done, run the npm start
command from a terminal and open a browser at http://localhost:4200
. Clicking on the Dashboard2
link, this is what you are going to see.
To see the interaction between the HTML tag and the dashboard, try to change the upper filter and you will see the dashboard will change accordingly. The magic here is that the upper drop down menu is defined into the Angular component but manage and control the Pentaho dashboard.
Try to change the /public/sample2.wcdf
dashboard using Pentaho and refresh this page. You will see the application will change accordingly.