Embedding Pentaho CDE dashboard in web application : this tutorial explains how you can embed Pentaho CDE dashboard into other web applications. because so many queries are posted on Pentaho community and other forums to find a solution for embedding CDE dashboards but there is not enough relevant solutions are provided.
So here we are demonstrating “creating a Pentaho dashboard with single Bar chart and importing this dashboard in a web application”, which is using require JS and running on Apache Tomcat server.
Pre-requisites for embedding pentaho CDE dashboard in web application
- Pentaho biserver 8
- Apache Tomcat 8
- Latest browser (maybe Mozilla Firefox 59.0.2, Google Chrome 0.3325.181 etc)
Note:
“Due to few bugs reported in Pentaho biserver 7 and 7.1 which may block you to ebbed CDE dashboards in other web applications. therefore better to use biserver 8”.
Steps to embed Pentaho CDE dashboard in web application
- First of all, start Pentaho biserver and launch Pentaho User Console (PUC). If you are beginner check out our tutorial for Getting started with Pentaho biserver.
- since server is started create Pentaho dashboard which we will embed with a web application. And this application is running on another server. If you are beginner Check out How to create Pentaho CDE dashboard
- Save your dashboard with name top-sales-revenue at the following location /public/ease2codeDemoDashboard/
- As we are embedding Pentaho CDE dashboard other than biserver, in this case, we need to configure “Cross-Origin Resource Sharing (CORS)” true for CDE and CDF both.
- Go to <<pentaho-server>>/pentaho-solutions/system/pentaho-cdf location and add following property in xml file
<settings> ... <allow-cross-domain-resources>true</allow-cross-domain-resources> ... </settings>
-
Same configuration for pentaho-server/pentaho-solutions/system/pentaho-cdf-dd/settings.xml, add below property just after <settings> tag
<allow-cross-domain-resources>true</allow-cross-domain-resources>
- Go to <<pentaho-server>>/pentaho-solutions/system/pentaho-cdf location and add following property in xml file
- Add cors-filter-2.4.jar to the <<pentaho-server>>/tomcat/lib directory.
download cors-filter-2.4.jar - Add below filter-mapping into the <<pentaho-server>>/tomcat/conf/web.xml file
<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.origins</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.allowed.methods</param-name> <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value> </init-param> <init-param> <param-name>cors.allowed.headers</param-name> <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> </init-param> <init-param> <param-name>cors.exposed.headers</param-name> <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value> </init-param> <init-param> <param-name>cors.support.credentials</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>cors.preflight.maxage</param-name> <param-value>10</param-value> </init-param> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
- Start Pentaho biserver (If server is already up, stop and start it again after configurations).
- Now create an web application including following files
- embed-cde-demo.html
- embedDashboard.js
- Create folder embedDemo in any location and create embed-cde-demo.html and embedDashboard.js file inside this directory.
- Copy below code for creating an embed-cde-demo.html file
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>ease2code.com</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/> <script type="text/javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js"></script> </head> <body> <div align="center"> <strong><h1> Ease2code - Embedding CDE Dashboards with RequireJs</h1></strong> </div> <p align="center"> This tutorial is created by BI team of ease2code.com. Below tutorial shows the Sales Revenue for different products </p> <div id="barchart" align="center"></div> <script data-main="scripts/main" src=" embedDashboard.js"></script> </body> </html>
- Now create embedDashboard.js file with below code
</pre> require([ "dash!/public/ease2codeDemoDashboard/top-sales-revenue.wcdf" ], function(ease2codeDemoDash) { // Create two instances of the same dashboard that use distinct DOM elements (new ease2codeDemoDash("barchart")).render(); });
- Now start your application server (here we are using other instance of Apache Tomcat server which is running on port 8085) and deploy the embedDemo project.
- here we are going to deploy embedDemo at <<apache-tomcat-8.0.41>>/webapps/ directory, now restart tomcat server and open http://localhost:8085/embedDemo/embed-cde-demo.html in the browser. You will find your dashboard on webpage as shown in below screenshot
we are open for your suggestions because it can help us to improve a bit more. ww.ease2code.com
Getting started with Pentaho biserver How to create Pentaho CDE dashboard
Speak Your Mind