04 Dec

Using Pentaho dashboards into an Angular application

During my investigations and experimentations, I was not able to find any working solution using Pentaho dashboards into a generic Angular application. The only project I found was a POC in Angular 1, not valid anymore, considering that Angular is today at its fifth version with major changes in the language and framework.

Angular is definitely one of the most appealing front-end technologies in the market and it is widely used by a lot of developers all over the world. To understand if Pentaho dashboards could be easily rendered in this framework, I started to play with both.

After some investigations and successful experimentations, things became more clear and I had the idea to develop a reusable package for the developers benefit. The result is the pentaho-dashboard-project hosted on GitHub.

The pentaho-dashboard-project contains a collection of Angular components and services to render the Pentaho dashboards, released as a npm package published into the public repository. The npm package is named pentaho-dashboard and can be used starting from here.

But things didn’t stop here. Another thing I enjoyed to experiment has been writing something into GitBook. GitBook is a modern and simple solution to documentation, digital writing and publishing. In this case, a full description of the composition of the package and some practical tutorials describe how to use the integration into an existing Angular application.

Do you want to see in practice what you can do? Take a look at the screenshot below.

Enjoy the pentaho-dashboard-project.

7 thoughts on “Using Pentaho dashboards into an Angular application

  1. Avatar

    Hi Francesco, first of all, thank you very much for your work. It’s amazing!!!.

    I was able to include all the dashboards created with CDE (wcdf). Now I’m trying to include some dashboards developed directly with CDF (xcdf) and I’m having some problems. You have tried to include xcdf instead of wcdf with your package?

    As a last resort i think to create an html page add it directly with cdf-embed.js
    but I do not think it’s the best idea, I like to have the dashboard code in Pentaho decoupled from the code.

    • Francesco Corti

      Hi Gonzalo,

      Good point… I did not try (this is the honest answer).
      Could be nice if we could extend the package to manage also this use case.
      If you find the solution, please share it and we could add this to the source code (of course, quoting you as a contributor).
      As alternative, if you could provide a working example of HTML/xcdf I could try to play a little bit with angular and see what is doable.


  2. Avatar

    Hi Francesco,

    I am trying to follow ur method of integrating pentaho dashboards into my angular application, previously I used iframes to load the url into my project.
    But now your method of integration is excellent, but I am unable to do that. I have installed the pentaho in my aws and got the path from AWS. Can you please explain me how it should be done ???????? thanks.

  3. Avatar

    Hi Francesco, you did a really great job and it’s wonderful you are sharing all this knowledge. However I am having a hard time to implement the solution since I have to use Angula 7 I don´t know if it´s compatible, I can not see properly what you are doing on the video that I found on youtube and I also when I try to acces “https://www.gitbook.com/@fcorti”, it tells me that “This page doesn’t exist”. Could you please help me?

    Best regards,


Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.