Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF application

1,168 views

Published on

The integration between Alfresco and Pentaho exists since 2012, starting with a Community project (named A.A.A.R.) and continues today with dozens of successful installations and projects.

As a lot of developers know, Pentaho is an Open Source Business Intelligence platform, extremely flexible to develop your own reports, dashboards and analytics in general. Less developers know that Pentaho is also very easy to integrate with third-party applications. All of this, thanks to a powerful API and a clever use of a RequireJS (http://requirejs.org/) JavaScript file and module loader.

In this talk Francesco (inventor of the A.A.A.R. before and Alflytics - http://fcorti.com/alflytics/ today) and Pedro (VP Of Engineering for Pentaho Data Integration and Business Analytics Platform at Hitachi Vantara) will show in practice how to include all the Pentaho Dashboards into a generic ADF application, using some ADF Components that will be able to login, logout and show Pentaho resources.

Published in: Technology
  • Be the first to comment

Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF application

  1. 1. Embedding Pentaho Dashboards into an ADF application Francesco Corti - Pedro Vale
  2. 2. Learn. Connect. Collaborate. Pedro Vale Francesco Corti VP of Engineering for PDI and BA Platform Evangelist at Alfresco (proud) member of the Alfresco & Pentaho Community
  3. 3. Learn. Connect. Collaborate. Pentaho and Pentaho Dashboards • Pentaho is an Open Source Unified Data Integration and Analytics Platform – Data Integration – Business Analytics – Big Data – Internet Of Things • Acquired by Hitachi Data Systems in 2015, we are now Hitachi Vantara • Hitachi Vantara is strongly focused on an IoT offering, the Lumada Platform.
  4. 4. Learn. Connect. Collaborate. Pentaho and Pentaho Dashboards • A large Part of the Business Analytics section are Dashboards – interactive ways to analyze and visualize your data – End User Dashboards – Ability to compose content and create simple, templated dashboards (Dashboard Designer) – Custom built dashboards – Uniquely tailored, highly customized (CTools)
  5. 5. Learn. Connect. Collaborate. Pentaho and CTools • The CTools are a set of community-driven tools which are installed as a stack on top of the Pentaho BA server. The core CTools are: – CDF: Community Dashboard Framework – CDE: Community Dashboard Editor – CDA: Community Data Access layer – CCC: Community Charting Components – CGG: Community Graphics Generator
  6. 6. Learn. Connect. Collaborate. Pentaho and Embedding • The ability to embed Pentaho content in other applications has always been a primary concern for the platform. • The CTools dashboards provide several ways to embed dashboards in other applications • The latest, more efficient way is to consider a dashboard as a require.js module • You can then require the module from your own application and look at the dashboard as a javascript class that you can interact with
  7. 7. Let’s see it in action!
  8. 8. Learn. Connect. Collaborate. Embedding Pentaho Dashboards into an Angular application https://github.com/fcorti/pentaho-dashboard-project
  9. 9. Learn. Connect. Collaborate. Embedding Pentaho Dashboards into an Angular application https://fcorti.gitbooks.io/pentaho-dashboard-project/content/
  10. 10. Learn. Connect. Collaborate. Embedding Pentaho Dashboards into an Angular application https://www.npmjs.com/package/pentaho-dashboard
  11. 11. Learn. Connect. Collaborate. The pentaho-dashboard package this.pentahoService.setUsername('admin'); this.pentahoService.setPassword('admin'); this.pentahoService.logIn(null); 5 PentahoDashboardService pentaho-dashboard component <pentaho-dashboard id = 'dashboard1' pentahoPath = '/public/sample1.wcdf'> </pentaho-dashboard> if (this.pentahoService.isLoggedIn()) { this.pentahoService.logOut(null); } • Login • Logout HTML Typescript Typescript
  12. 12. Learn. Connect. Collaborate. How to use the pentaho-dashboard package into an ADF application? An Alfresco ADF application is a standard Angular (5) application
  13. 13. Learn. Connect. Collaborate. login.component.html Logging into Pentaho from an ADF application <adf-login ... (executeSubmit)='loginP($event)' > </adf-login> HTML The same credentials must exists in Alfresco and Pentaho (LDAP)!
  14. 14. Learn. Connect. Collaborate. Logging into Pentaho from an ADF application login.component.ts ... import { PentahoDashboardService } from 'pentaho-dashboard'; ... constructor(private pentahoService: PentahoDashboardService) { } ... Typescript
  15. 15. Learn. Connect. Collaborate. Logging into Pentaho from an ADF application login.component.ts loginP(event: any) { if (this.pentahoService.isNotLoggedIn()) { var u = event.values.controls['username'].value; var p = event.values.controls[’password'].value; this.pentahoService.setUsername(u); this.pentahoService.setPassword (p); this.pentahoService.logIn(null); if (this.pentahoService.isNotLoggedIn()) { ... } } ... Typescript Using the form’s fields Logging into Pentaho Managing login failure
  16. 16. Learn. Connect. Collaborate. dashboard1.component.html Adding a new component (page) for the dashboard <div> <pentaho-dashboard id = 'dashboard1' pentahoPath = '/public/sample1.wcdf'> </pentaho-dashboard> </div> HTML
  17. 17. Learn. Connect. Collaborate. Adding a new component (page) for the dashboard dashboard1.component.ts (simplest version) ... @Component({ selector: 'dashboard1', templateUrl: './dashboard1.component.html', styleUrls: ['./dashboard1.component.css'] }) export class Dashboard1Component { } Typescript
  18. 18. Learn. Connect. Collaborate. Adding a new component (page) for the dashboard dashboard1.component.ts ... import { PentahoDashboardService } from 'pentaho-dashboard'; @Component({ selector: 'dashboard1', templateUrl: './dashboard1.component.html', styleUrls: ['./dashboard1.component.css'] }) export class Dashboard1Component { constructor(private pentahoService: PentahoDashboardService) { if (this.pentahoService.isNotLoggedIn()) { ... } } } Typescript
  19. 19. Learn. Connect. Collaborate. Use cases: wherever you’d need BI into an Angular app BI app CRM ERP … Content, Process and BI app CRM ERP … Other… CRM ERP …
  20. 20. Embedding Pentaho Dashboards into an ADF application Francesco Corti - Pedro Vale Thank you! Q&A FrkCorti

×