--- title: Using AngularJS with Pentaho Dashboard description: Using AngularJs with Pentaho for creating an interactive dashboard. image: https://blog.e-zest.com/hubfs/img-1.jpg --- [![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/) - [WORK](https://www.e-zest.com/our-work) - [SERVICES](https://www.e-zest.com/our-services) - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services) - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services) - [Digital Commerce](https://www.e-zest.com/digital-commerce-services) - [Digital Operations](https://www.e-zest.com/digital-operations) - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services) - [Digital Experience Design](https://www.e-zest.com/digital-experience-design) - [INSIGHTS](https://blog.e-zest.com/) - [CAREERS](https://www.e-zest.com/careers) - [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services) - [GENERATIVE AI](https://www.e-zest.com/generative-ai) - [Healthcare](https://healthcare.e-zest.com) - [Contact Us](https://www.e-zest.com/contact-us) - ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg) [BLOGS](https://blog.e-zest.com) #### Elevating Product Engineering with AI and ML As technology evolves and customer choices broaden, there is an increasing ... [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml) - ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg) [NEWS](https://blog.e-zest.com/news) #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024 We are delighted to announce that e-Zest – An Accion Labs Company has been ... [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024) - ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png) [CSR](https://blog.e-zest.com/csr) #### e-Zest Solutions supports Digital Pune Mission **Pune, India:** e-Zest Solutions, a leading digital technology innovation ... [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission) - [Work](https://www.e-zest.com/our-work) - [Services](https://www.e-zest.com/our-services) - [Insights](https://blog.e-zest.com) - [Careers](https://www.e-zest.com/careers) - [Enterprise Data](https://www.e-zest.com/enterprise-data-services) - [Generative AI](https://www.e-zest.com/generative-ai) - [Innovations](https://www.e-zest.com/innovations) - [Healthcare](https://healthcare.e-zest.com) - [About](https://www.e-zest.com/about-us) - [Contact](https://www.e-zest.com/contact-us) - [Blog](https://blog.e-zest.com/) - [News](https://blog.e-zest.com/news) - [CSR](https://blog.e-zest.com/csr) - [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/) - [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest) - [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638) - [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/) - [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate) [![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/using-angularjs-with-pentaho-dashboard#top) Hit enter to search or ESC to close Insights e-Zest members share technology ideas to foster digital transformation. - [Blog](https://blog.e-zest.com) - [News](https://blog.e-zest.com/news) - [Podcasts](https://www.e-zest.com/podcasts) - [Healthcare](https://blog.e-zest.com/healthcare) - [CSR](https://blog.e-zest.com/csr) - [Whitepaper](https://blog.e-zest.com/whitepaper) - [Playbook](https://blog.e-zest.com/playbook) - [Media Kit](https://www.e-zest.com/media-kit) # Using AngularJS with Pentaho Dashboard [Anuradha Bankar](https://blog.e-zest.com/author/anuradha-bankar) Oct 04, 2016 [Pentaho BI Platform](https://blog.e-zest.com/topic/pentaho-bi-platform) [Pentaho ETL](https://blog.e-zest.com/topic/pentaho-etl) [Angular.js](https://blog.e-zest.com/topic/angular-js) [CDA](https://blog.e-zest.com/topic/cda) [CDE](https://blog.e-zest.com/topic/cde) - - - - Pre Requisite: Knowledge of AngularJS is needed. Pentaho Community Dashboard Editor (CDE), which is a part of the Pentaho User Console (PUC), is a graphical tool for creating Interactive Dashboards. Being open source, Pentaho CDE allows complete customization and freedom to use external components within its editor. While working on a recent dashboard requirement, I wanted to use AngularJS in my dashboard. AngularJS is a very powerful JavaScript Framework. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and most widely used by thousands of developers around the world. It aims to simplify both the development and testing efforts. Below are the steps I followed to use AngularJS with Pentaho CDE: 1\. Create New Pentaho CDE Dashboard in Pentaho User Console 2\. Download and include Angular Min JS in Layout Tab in editor ![img-1.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-1.jpg?width=1024&name=img-1.jpg) You can also include additional JS, for example I have included “angular-ui.min.js” for UI components as shown above. 3. Add a row and include HTML in it as shown in the screenshot above. You can include html code here as below. ![img-2.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-2.jpg?width=750&height=319&name=img-2.jpg) Include ng-app and controller in above HTML as highlighted above \      \
4\. Include external JS “customJS” file in layout and define angular app and controller as shown below: ![img-3.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-3.jpg?width=750&height=161&name=img-3.jpg) ![img-4.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-4.jpg?width=750&height=200&name=img-4.jpg) 5. Now go to Components Tab in CDE editor and Add query component and call function defined in external JS that is included in CDE. In following screenshot, I have defined a Query Component and within its Post Execution function, I am calling “create\_custom\_table()” function defined in customJS Java Script file. ![img-5.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-5.jpg?width=750&height=267&name=img-5.jpg) ![img-6.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-6.jpg?width=644&height=258&name=img-6.jpg) 6\. In the customJS included in Layout tab of CDE editor, define a function that we have called within Query Component above. /\*Call AngularJS Controller Function from outside \*/ function create\_custom\_table(){ } 7. Within this function, access Angular scope and call Angular function /\*Call AngularJS Controller Function from outside \*/ function create\_custom\_table(){     console.log(this.select\_result);      var scope = angular.element(document.getElementById("level1")).scope();     scope.$apply(function () {         scope.getList(this.select\_result);     }); } 8\. Once we can access Angular scope, Angular directives can be used in html as needed. For example, I have defined a table that uses ng-repeat directive for loop within loop in code below. \                 \                   \                             \\                              \                                    \                  \               \  \ 9\. AJAX Call to fetch CDA Query output  For adding interactivity in dashboard, we often need to pass parameters to the SQL query during runtime. CDA is a Pentaho plugin designed for accessing data with great flexibility. CDA can be used as a standalone plugin on the Pentaho BI server or in combination with CDE. Open CDA file associated with the dashboard and select the data source as below: ![img-7.jpg](https://blog.e-zest.com/hs-fs/hubfs/img-7.jpg?width=750&height=99&name=img-7.jpg) Click on Query URL and get the HTTP URL as below: http://\:8080/pentaho/plugin/cda/api/doQuery?path=/public/Test/pentaho\_angular.cda&dataAccessId=query1¶mlevel1=1 You can make AJAX Call by calling CDA HTTP URL to get query output as a JSON output as shown below: var url = $scope.base\_url + '/pentaho/plugin/cda/api/doQuery?path=/public/Test/ Pentaho\_AngularJS\_Dashboard.cda&dataAccessId=query1¶m1=';      $http.get(url+id).success(function(data) {                          console.log(data.resultset);              $scope.level2Details = data.resultset;           }).error(function(data, status) {                     alert('get data error!');          });        Once Pentaho is integrated with AngularJS, you can add advanced visualization and interactivity and not restricted to only the components provided by Pentaho CDE. - - - ### Similar Blog [Fusion Chart Plugin for Pentaho BI Platform Say goodbye to those boring dashboards built using Open Source BI Tools. With Pentaho Fusion Chart Plugin, you can now use ... By Anuradha Bankar Oct 25, 2012](https://blog.e-zest.com/fusion-chart-plugin-for-pentaho-bi-platform/) [![Hichert chart in MicroStrategy](https://blog.e-zest.com/hubfs/img-1-10.png) Hichert chart in MicroStrategy **What is HICHERT®SUCCESS?**Prof Dr. Rolf Hichert wanted to make business communication most successful. He initiated the SUCCESS ... By Anuradha Bankar Jun 02, 2016](https://blog.e-zest.com/hichert-chart-in-microstrategy) [![Connecting to Magento API with Pentaho ETL (Spoon)](https://blog.e-zest.com/hubfs/workflow-1.jpg) Connecting to Magento API with Pentaho ETL (Spoon) Magentois a popular open-sourcee-commerce platform which is highly customizable and has all the features to build a shopping ... By Anuradha Bankar May 26, 2016](https://blog.e-zest.com/connecting-to-magento-api-with-pentaho-etl-spoon) [![Elasticsearch vs Graph Database](https://blog.e-zest.com/hs-fs/file-3419272691-jpg/blog-files/elastic-search-vs-graph-database.jpg) Elasticsearch vs Graph Database Recently, I worked on a project which involved building a genealogy portal to gather information about individuals and their ... By Anuradha Bankar Sep 24, 2015](https://blog.e-zest.com/elasticsearch-vs-graph-database/) [Sharding and Replication in MongoDB Sharding and Replication have become important tool in today’s application database design. We have couple of ongoing projects ... By Anuradha Bankar Jan 23, 2014](https://blog.e-zest.com/sharding-and-replication-in-mongodb/) ## Helping Organizations Thrive in the Digital Age [Contact Us](https://www.e-zest.com/contact-us) - [About](https://www.e-zest.com/about-us) - [Services](https://www.e-zest.com/our-services) - [Work](https://www.e-zest.com/our-work) - [Insights](https://blog.e-zest.com/) - [Healthcare](https://healthcare.e-zest.com/) - [Accion Labs](https://www.accionlabs.com/) - - - - - - Dallas - Detroit - Hannover - Vienna - London - Pune © 2025 e-Zest Solutions - [Privacy Policy](https://www.e-zest.com/privacypolicy) - [Cookie Policy](https://www.e-zest.com/cookie-policy) Contact us Contact us e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.