How to develop Dashboards for an Angular app? Francesco Corti - Pentaho User Meeting 2018 in Frankfurt

1. Adding Pentaho
Dashboards to Angular 5
applications
Let’s see it in action
Francesco Corti
#PUM18FrkCorti
fcorti.com
https://github.com/fcorti
1

2. #PUM182
Francesco Corti
• Alfresco Evangelist
• Author for Pack Publishing
• Pentaho User Group Italia founder
• Developer and blogger

3. #PUM183
I became father*
(for the first time)
three weeks ago
(*) If I did it, it is never
too late for everyone!

4. #PUM184
…but let’s start
from the
beginning

5. #PUM185
Last year I was
playing with
51

6. #PUM186

7. #PUM187

8. #PUM188
JS Frameworks are real
silver bullets for quick
web app development

9. #PUM189
How to develop
dashboards for
an Angular app?

10. #PUM1810
How to develop
dashboards for
an Angular app?
• Rapidly
• Low code
• Real BI app

11. #PUM1811
Lots of nice
solutions exist
Mainly libraries
They heavily
require
development

12. #PUM1812
Pentaho CTools
are so great in
terms of fast
development and
low code

13. #PUM1813
Pentaho Business
Analytics Platform
offers a real BI
solution

14. #PUM1814
Could be great to
use CTools
directly into an
Angular app

15. #PUM1815
Pentaho
Ctools give
the reliability
of a solid BI
tool and
framework
Francesco - 1971

16. 16
How to make them work together?

17. 17
+ =
+ =
1
2
#PUM18

18. 18
Can it really work?

19. 19
I needed an idea…

20. #PUM1820
<pentaho-dashboard>
npm package

21. #PUM1821
<pentaho-dashboard>
npm package
npm is:
1. The website
2. The registry
3. The Command
Line Interface
(CLI)

22. #PUM1822
<pentaho-dashboard>
npm package
npm is:
1. The website
2. The registry
3. The Command
Line Interface
(CLI)
An npm package
is a dependency
of an Angular
application

23. #PUM1823

24. #PUM1824
How
to
install?
Assuming
you have
your own
Angular app*
(*) And a Pentaho Business
Analytics Platform

25. #PUM1825
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package

26. #PUM1826
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package

27. #PUM1827
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package

28. #PUM1828
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package
Browser
Web appPentaho
CORS

29. #PUM1829
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package
Browser
Web appPentaho

30. #PUM1830
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package

31. #PUM1831
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package

32. #PUM1832
How
to
install?
1. Add the dependency
2. Setup the proxy
3. Include the JS script
4. Import the
PentahoDashboardModule
5. Install the package

33. #PUM1833
Well done
dad!

34. #PUM1834
How
to
use it?
Now that
the npm
package is
installed…

35. if (this.pentahoService.isLoggedIn()) {
this.pentahoService.logOut(null);
}
#PUM1835
The pentaho-dashboard package
PentahoDashboardService pentaho-dashboard component
• Login
• Logout
this.pentahoService.setUsername('admin');
this.pentahoService.setPassword('admin');
this.pentahoService.logIn(null); Typescript
Typescript
HTML
<pentaho-dashboard
id = 'dashboard1'
pentahoPath = '/public/sample1.wcdf'>
</pentaho-dashboard>

36. if (this.pentahoService.isLoggedIn()) {
this.pentahoService.logOut(null);
}
#PUM1836
The pentaho-dashboard package
PentahoDashboardService pentaho-dashboard component
• Login
• Logout
this.pentahoService.setUsername('admin');
this.pentahoService.setPassword('admin');
this.pentahoService.logIn(null);
<pentaho-dashboard
id = "dashboard1"
pentahoPath = "/public/sample1.wcdf"
[params] = "['param1']"
[masterHtmlElementIds] = "['htmlId']"
[setDefaults]="true">
</pentaho-dashboard>
Typescript
Typescript
HTML

37. if (this.pentahoService.isLoggedIn()) {
this.pentahoService.logOut(null);
}
#PUM1837
The pentaho-dashboard package
PentahoDashboardService pentaho-dashboard component
• Login
• Logout
this.pentahoService.setUsername('admin');
this.pentahoService.setPassword('admin');
this.pentahoService.logIn(null); Typescript
Typescript
HTML
<pentaho-dashboard
id = "dashboard1"
pentahoPath = "/public/sample1.wcdf"
[params] = "['param1']"
masterDashboardId = "dashboard2"
[masterDashboardParams] = "['param2']">
</pentaho-dashboard>

38. #PUM1838
Let’s see it
in action!
login

39. #PUM1839
Let’s see it
in action!
pentaho-dashboard
component

40. #PUM1840
Let’s see it
in action!
What about
controlling the
dashboard
parameters from the
Angular application?

41. #PUM1841
Let’s see it
in action!
Can we “link” two
dashboards in
the same page?

42. #PUM1842
Well done
dad!

43. #PUM1843
Tired?
(too much info?)
https://www.gitbook.com/book/fcorti/pentaho-dashboard-project/

44. #PUM1844
Tired?
(too much info?)
https://www.gitbook.com/book/fcorti/pentaho-dashboard-project/

45. #PUM1845
How
is it
licensed?

46. #PUM1846
How
is it
licensed?
I Open Source Free

47. #PUM1847
Ehi Pentaho…
Could you be
interested to keep
this project, make
it grow and
support it?

48. Adding Pentaho
Dashboards to Angular 5
applications
Thank you!
Francesco Corti
#PUM18FrkCorti
fcorti.com
https://github.com/fcorti
48