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.

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