Recommended
Recommended
More Related Content
Similar to Adding pentaho dashboards to angular 5 applications
Similar to Adding pentaho dashboards to angular 5 applications (20)
Recently uploaded
Recently uploaded (20)
Adding pentaho dashboards to angular 5 applications
- 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?
- 18. 18 Can it really work?
- 19. 19 I needed an idea…
- 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
- 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?
- 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