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.

Adding pentaho dashboards to angular 5 applications

413 views

Published on

How to develop Dashboards for an Angular app?

Francesco Corti - Pentaho User Meeting 2018 in Frankfurt

  • Really nice work! Thanks for publishing not only the slidehare, but open sourcing the NPM package and the Gitbook.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Adding pentaho dashboards to angular 5 applications

  1. 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. 2. #PUM182 Francesco Corti • Alfresco Evangelist • Author for Pack Publishing • Pentaho User Group Italia founder • Developer and blogger
  3. 3. #PUM183 I became father* (for the first time) three weeks ago (*) If I did it, it is never too late for everyone!
  4. 4. #PUM184 …but let’s start from the beginning
  5. 5. #PUM185 Last year I was playing with 51
  6. 6. #PUM186
  7. 7. #PUM187
  8. 8. #PUM188 JS Frameworks are real silver bullets for quick web app development
  9. 9. #PUM189 How to develop dashboards for an Angular app?
  10. 10. #PUM1810 How to develop dashboards for an Angular app? • Rapidly • Low code • Real BI app
  11. 11. #PUM1811 Lots of nice solutions exist Mainly libraries They heavily require development
  12. 12. #PUM1812 Pentaho CTools are so great in terms of fast development and low code
  13. 13. #PUM1813 Pentaho Business Analytics Platform offers a real BI solution
  14. 14. #PUM1814 Could be great to use CTools directly into an Angular app
  15. 15. #PUM1815 Pentaho Ctools give the reliability of a solid BI tool and framework Francesco - 1971
  16. 16. 16 How to make them work together?
  17. 17. 17 + = + = 1 2 #PUM18
  18. 18. 18 Can it really work?
  19. 19. 19 I needed an idea…
  20. 20. #PUM1820 <pentaho-dashboard> npm package
  21. 21. #PUM1821 <pentaho-dashboard> npm package npm is: 1. The website 2. The registry 3. The Command Line Interface (CLI)
  22. 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. 23. #PUM1823
  24. 24. #PUM1824 How to install? Assuming you have your own Angular app* (*) And a Pentaho Business Analytics Platform
  25. 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. 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. 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. 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. 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. 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. 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. 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. 33. #PUM1833 Well done dad!
  34. 34. #PUM1834 How to use it? Now that the npm package is installed…
  35. 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. 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. 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. 38. #PUM1838 Let’s see it in action! login
  39. 39. #PUM1839 Let’s see it in action! pentaho-dashboard component
  40. 40. #PUM1840 Let’s see it in action! What about controlling the dashboard parameters from the Angular application?
  41. 41. #PUM1841 Let’s see it in action! Can we “link” two dashboards in the same page?
  42. 42. #PUM1842 Well done dad!
  43. 43. #PUM1843 Tired?
 (too much info?) https://www.gitbook.com/book/fcorti/pentaho-dashboard-project/
  44. 44. #PUM1844 Tired?
 (too much info?) https://www.gitbook.com/book/fcorti/pentaho-dashboard-project/
  45. 45. #PUM1845 How is it licensed?
  46. 46. #PUM1846 How is it licensed? I Open Source Free
  47. 47. #PUM1847 Ehi Pentaho… Could you be interested to keep this project, make it grow and support it?
  48. 48. Adding Pentaho Dashboards to Angular 5 applications Thank you! Francesco Corti #PUM18FrkCorti fcorti.com https://github.com/fcorti 48

×