Embedding Pentaho CDE dashboard in web application

April 23, 2018 By Leave a Comment

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

  1. Pentaho biserver 8
  2. Apache Tomcat 8
  3. 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

  1. 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.
  2. 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
  3. Save your dashboard with name top-sales-revenue at the following location /public/ease2codeDemoDashboard/
  4. 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.
    1. 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>

    2. 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>
  5. Add cors-filter-2.4.jar to the <<pentaho-server>>/tomcat/lib directory.
    download cors-filter-2.4.jar 
  6. 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>
  1. Start Pentaho biserver (If server is already up, stop and start it again after configurations).
  2. Now create an web application including following files
    • embed-cde-demo.html
    • embedDashboard.js
  3. Create folder embedDemo in any location and create embed-cde-demo.html and embedDashboard.js file inside this directory.
  4. 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>
  5. 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();

});
  6. 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.
  7. 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

Embedding Pentaho CDE dashboard in web application-ease2code.com

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

Filed Under: BI, Pentaho Tagged With: , ,

Speak Your Mind

*