Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF application
Download as PPTX, PDF2 likes1,842 views
The document provides an overview of embedding Pentaho dashboards into an Alfresco ADF application, highlighting the capabilities of Pentaho as a data integration and analytics platform. It discusses the use of community-driven tools (ctools) for creating and customizing dashboards, and outlines the process for integrating Pentaho dashboards into Angular applications, including login functionality and component creation. Additionally, it emphasizes use cases for business intelligence within various applications like CRM and ERP.
![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](https://image.slidesharecdn.com/2018-078f-180125162748/85/Alfresco-DevCon-2018-Embedding-Pentaho-dashboards-into-an-Alfresco-ADF-application-15-320.jpg)
![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](https://image.slidesharecdn.com/2018-078f-180125162748/85/Alfresco-DevCon-2018-Embedding-Pentaho-dashboards-into-an-Alfresco-ADF-application-17-320.jpg)
![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](https://image.slidesharecdn.com/2018-078f-180125162748/85/Alfresco-DevCon-2018-Embedding-Pentaho-dashboards-into-an-Alfresco-ADF-application-18-320.jpg)
Alfresco DevCon 2018 - Embedding Pentaho dashboards into an Alfresco ADF application
- 1. Embedding Pentaho Dashboards into an ADF application Francesco Corti - Pedro Vale
- 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. 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. 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. 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. 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. Let’s see it in action!
- 8. Learn. Connect. Collaborate. Embedding Pentaho Dashboards into an Angular application https://github.com/fcorti/pentaho-dashboard-project
- 9. Learn. Connect. Collaborate. Embedding Pentaho Dashboards into an Angular application https://fcorti.gitbooks.io/pentaho-dashboard-project/content/
- 10. Learn. Connect. Collaborate. Embedding Pentaho Dashboards into an Angular application https://www.npmjs.com/package/pentaho-dashboard
- 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. 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. 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. Learn. Connect. Collaborate. Logging into Pentaho from an ADF application login.component.ts ... import { PentahoDashboardService } from 'pentaho-dashboard'; ... constructor(private pentahoService: PentahoDashboardService) { } ... Typescript
- 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. 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. 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. 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. 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. Embedding Pentaho Dashboards into an ADF application Francesco Corti - Pedro Vale Thank you! Q&A FrkCorti