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.

results matching ""

    No results matching ""