Embedding Pentaho CDE dashboard in web application

April 23, 2018 By 1 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: , ,

Comments

  1. Mozella Ferrio says:
    January 20, 2019 at 5:27 AM

    Detailed below are the issues relating too the Bad guy’s Month intrigue of the event.I go to a crdoss roadway below. 48-60 Hours. The Rogues have chosen tto give up to the Royal Flush Gang, that are takingthem back to Central City. At various othber times,the ruins of the city and the bordering territory were dedicated to a temple found there, thus effectively frestalling the reconstruction oofthe city. I maintain it in side as the dogs have a field day with my socks and such and I have to quest them down in the yarrd outside,if you could call it a backyard. When it gave methodmost were thrown into the swamp and also deep channels onn either side.Imhotep has actually been explained aas ‘the globe’s first named engineer’, as well as ‘the developer of the world’s oldest entirely sstone reduced structure’.As well as bby 525 BC, when Egypt was under Persian policy,it seems that Imhotep was being considered a full God.There more than a dozen Star Trek function films, the very first bein launched in 1979, the most current bekng released in 2016.J.J. There is an unforeseen level of treatment behind Heroes Evolved, aat the very leastthat’s what I tolok away after gazing it’s website.

    Reply

Speak Your Mind

*