Transform a CDE Dasboard to be loaded in a CDF only Pentaho Server

DISCLAIMER: Please be advised that is higly recommended to ALWAYS use CDE, and only apply this techniques as a last resource.

The Problem
I need to develop a Pentaho Dashboard with CDE, but my production environment doesn't have CDE installed and can't be installed. When developing a Dashboard with CDE we can see that 3 main pieces (files) are generated and can't be publish / executed in a CDF/CDA only Pentaho Server:

1. *.wcdf: Description file containing the Name, Description and some other information.
2. *.cdfde: Definition file containing all the elements, layout and styles of the dashboard.
3. *.cda: Definition file of the CDA sources.

The Environment

• Development Laptop with Pentaho 4.0.0 GA and latest CTools installed using the CTools Installer.
• Production Environment with Pentaho 4.0.0 GA and the latest relases of CDF and CDA.

The Findings
I decided to explore the option of building the dashboard with CDE (for simplicity) and then transform it into a CDF and publish it into the Production Environment, and the first step was to look at the generated html page produced when executing the CDE Dashboard in Pentaho. With background knowledge on CDF I clearly noticed that it generated a CDF structure in which you can see a layout HTML section and a component definition javascript section. Based on this I got into the conclusion that it is possible to transform a CDE to a CDF.

After some tests I realized that it was not going to be as simple as I thought, and the main reason is that the charts used in CDE are CCC, but CCC is only available within CDE and not in CDF. Searching for a solution I found Pedro Alves' post about integrating CDE in CDF.

The Solution Phase 1

1. Create a new Solution (Top level folder) in Pentaho User Console MyCompany, then create a new folder in the solution Dashboards and an aditional folder under that as files to have a directory structure like this:
• MyCompany
• Dashboards
• files
2. Place the company logo (in my case sw_logo.jpg) in the files folder.
3. Build the CDE Dashboard using custom CSS, the logo of the company, a table and bar chart (Sales Dashboard Temp). Those files should be placed in the files directory. Save the dashboard as Sales.
4. Execute the Dashboard in Pentaho User Console.
5. Get the HTML source code generated and save it as a file template.html in the same directory where the dashboard is.
6. Open with a text editor the file template.html and delete everything above  the tag <div class='container'> (do not delete the mentioned tag) and delete also the final </body> and </html> tags.
7. Create a new file named Sales.xcdf (Or how you named your Dashboard file) and add a structure similar to:
   <?xml version="1.0" encoding="UTF-8"?>
   <cdf>
       <title>Sales Dashboard</title>
       <author></author>
       <description></description>
       <icon></icon>
       <template>template.html</template>
     <style>clean</style>
   </cdf>
8. Refresh the Solution Repository and execute the newly created Dashboard.

The Solution Phase 2
Notice that when executing the newly created dashboard, some problems are encountered:

1. The Image and styles are not applied.
2. If using a CCC Chart in the Dashboard, an error will pop Object type ccc***** can't be mapped to a valid class.

To fix these problems follow the following steps:

• Open the template.html and styles.css (or how you named it) in a text editor.
• Look for the tag that includes your stylesheet (In my case <link rel="stylesheet" type="text/css" href="res/MyCompany/Dashboards/files/styles.css?v=1314758846169" />), this tag is invalid because the resource is not valid within CDF scope, change it to something like this:
  <link rel="stylesheet" type="text/css" href="GetCDFResource?resource=/MyCompany/Dashboards/files/styles.css" />
• Both in the stylesheet file (styles.css) and in the html file (template.html) replace any link wih the correct value using the GetCDFResource? entry type.
• url('sw_logo.jpg') will be changed to url('GetCDFResource?resource=/MyCompany/Dashboards/files/sw_logo.jpg')
• Follow the instructions in Pedro Alves' post about integrating CDE in CDF but instead of copying the files into any "random" location, create the following folder pentaho-solutions/pentaho-cdf/js/CCC and place there the files.
• Add the following lines at the top of the template.html file to include CCC into your dashboard:
  <script
  type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/svg.js"
  data-path="/pentaho/content/pentaho-cdf/js/CCC/">
  </script>
  <script type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/jquery.tipsy.js"></script>
  <script type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/protovis.js"></script>
  <script type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/tipsy.js"></script>
  <script type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/pvc-d1.0.js"></script>
  <script type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/protovis-implementation.js"></script>
  <script type="text/javascript" src="/pentaho/content/pentaho-cdf/js/CCC/ccc-implementation.js"></script>
  
• Refresh the Solution Repository and execute the modified Dashboard.

Using this techniques, it will be possible to convert almost any CDE dashboard, and I say "almost" because I haven't tested it with complex ones, in a CDF dashboard.

Please be aware that buy following this procedure, there is a change of deleting and changing some Pentaho system files/folders and can damage the installation so please create a backup and apply and test first in a Dev Environment.