Community Dashboard Framework

Community Dashboard Framework (CDF) is a project that allows you to create friendly, powerful and fully featured Dashboards on top of the Pentaho Business Intelligence server. Former Pentaho Dashboards had several drawbacks from a developer's point of view.

The developing process was awkward, it used to require know-how of Web technologies and programming languages, and basically it was time-consuming.

CDF emerged as a need for a framework that overcame all those difficulties. The final result is a powerful framework.

Credits: Webdetails Team Lead - Pedro Alves ; Ingo Klose; Will Gorman; Nick Baker; Nick Goodman; Aaron Phillips; Ramaiz Mansoor; Sergio Ramazzina; Daniel Einspanjer; André Simões; Tom Barber

Main Features

  • Based on Open Source technologies;
  • Uses AJAX;
  • Features a life cycle with components interacting with each other;
  • Separates the logic (JavaScript) from the presentation (HTML, CSS);
  • Extensible, which gives the users a high level of customization;
  • Components library extendable by advanced;
  • Possibility for advanced users to insert their own snippets of JavaScript and jQuery code.

CDF Usage

  • Used as part of a Pentaho solution - the most common scenario;
  • In a standalone mode as an alternative to the Pentaho User Console;
  • Integrated with Portlets, PHP Apps, Intranet Portals and even Desktop Apps.


CDF offers Business Intelligence developers an easy and fast way to create dynamic Dashboards, which allows users to explore and understand large amounts of data, using a variety of charts and tables, and then "drill" to the exact data they want.

Check our demo. We can build a matching solution for your scenario too. Ask us for a quote.

CDF Usage

CDF brings together the reports, charts, and tables that the Pentaho Business Intelligence server provides into a cohesive framework, which the developer can use to create visually appealing and incredibly useful Dashboards using simple HTML and Javascript.

New components can be integrated into the framework, and a "MetaLayer" allows developers to save time and prevent copy-and-paste errors, by collecting business logic into well organized units that can be shared among dashboards.

This framework provides a standardized way to implement and publish dashboards to the Pentaho Business Intelligence Platform.

The main goal of this framework is to provide the user an easy and friendly way to build dashboards.

Technical Advantages

  • Enforces security via Pentaho's security model;
  • Separation between the HTML design and component definition;
  • No need to create JSP pages to deliver new Dashboards. The user doesn't need to have the knowledge to deal with that kind of technology;
  • Rich list of components: selectors, timeplot charts, tooltips, openstreet maps integration, etc;
  • Easy to design - it's all plain HTML, CSS and JavaScript;
  • No need to create Pentaho Action Sequences - in most cases, the components are configured using a friendly syntax;
  • The Dashboard objects can be easily reused. The behavior of Dashboard objects (components) is related to their parameters values, and so the user may use the same object on a different Dashboard, modifying only the values of one or two parameters;
  • Auto refresh and interaction between Dashboard objects. The user doesn't need to concern about interaction between components - the only thing the user must specify is which variable is bound to the object;
  • Portlet integration;
  • Build your own Dashboard component library. When a particular component with a specific behavior is being used in all your projects, just add it to your JavaScript library for further use.

The Component concept was born simply for building Dashboard objects. Therefore a Component is just a simple JavaScript object that encapsulate all the object properties and behavior.

But how much effort is necessary to make a component like this:

  • Have a different behavior before and after execution;
  • Interact with other Dashboard components;
  • At startup it's just a simple bar chart but that can be changed dynamically to a dial chart or even to a table;
  • Present results that change dynamically according to one or more parameter values?

The answer is: all of those can be accomplished with very little effort.

All components have a set of properties that are common to almost all of them. Those properties are the key for controlling their life cycle and behavior.

Component Properties


This property accepts a variety of values like timeplot, datepicker, etc.


This is the identifier of the component.


An array of parameters that are passed to this component.


For components where user input is required, this is where the input is stored for later use.

preChange / postChange

For selectors, before/after the input value is updated, this functions are executed. Useful for validating user input, for instance.

preExecution / postExecution

These functions are executed before/after the component is initialized or updated or presented to the user. If the preExecution returns false, the component is not updated.


An array that holds the variables that trigger the component update. This array is crucial in the iteration between components, because they can communicate using this together with their parameters. For example, if the selected value (parameter) of one selector changes, all the components that are "listening" on this parameter will react.


This is the id of the HTML object that will be replaced by the component's content result.


This is a flag. If set to false, the component will not execute at start. It will be updated as soon as one of his listeners has changed.

The premise around CDF is to reduce time and effort to make a new Dashboard. Following that objective, the Dashboard template concept was created.

Main Objectives

  • Avoid repeating the same content (Navigation bar, JavaScript libraries, layout, etc) to every Dashboard;
  • Avoid the creation of a template file for every solution folder by using a default template.

Template File Types

The templates are present in the pentaho-solutions directory, under system/pentaho-cdf .

There are a few types of template files used by CDF framework below.


This is the outer-most template. Usually contains the common layout, header and the navigation bar - all the necessary JavaScript libraries are included automatically.


If this file is present in a solution folder, the Dashboards generator will interpret it and present the contents to the user. All components will be rendered according to the life-cycle described in the components section.


On the supplied samples, this template contains the header and all the necessary JavaScript libraries. The navigation menu was excluded since mantle already has its own navigation approach.


When no template is present in the current solution folder, this template is presented to the user. It can be used to present a content navigation page.

Two questions are raised here:

How can we choose between the template-dashboard-mantle and the template-dashboard?

The answer is simple: just use the style tag in the xcdf file or call RenderHTML with the template request argument (example: template=mantle ). For xcdf files the default template to be used is specified in solutions/system/pentaho-cdf/plugin.xml .

Can I modify the templates?

Of course, that's the purpose of template files.

Documenting Projects

As a consequence of the CDF structure, it can be used to make documentations of project implementations.

The CDF documentation found in the Pentaho server is an example that can easily be extended to other scenarios.

The following are some advanced concepts related to the Community Dashboard Framework:


MetaLayer is a concept introduced by Daniel Einspanjer that allows you to:

  • Separate presentation and logic;
  • Reuse logic.

Metalayers are simply JavaScript files that live in the solution folder. They can be imported from the template files using the following command:

<script type="text/javascript"

More than one file can be included. Using this method, a developer can leave only HTML design in the template.html file and put all the components definition in the MetaLayers.

This same method can be used to include other types of files from the solution directory, like images, CSS resources, etc.


It is possible to maintain parameter states between different sessions. Instead of using simple parameters, objects inside the special namespace can be saved and restored using the functions described here.

This works on a per user base, and the developer needs to be aware that everything saved will be loaded for every Dashboard, so if too much is stored it may cause performance penalty.


Suppose that you have a selector that fires the change of a parameter named region. In order to make this selector persistent, all you need is to do the following:

  • As parameter replace region with;
  • Save the storage in the postChange function. The function may look like this:
function() {
  alert("You chose: " +;

Extending CDF

Thanks to the collaboration of Will Gorman, CDF has a modularized and extensible library of components that can be extended by users.

Using an object oriented approach, the key is to extend the BaseComponent class. Here's the simplest component of them all, the TextComponent :

var TextComponent = BaseComponent.extend({
    update : function() {

Having this defined, when CDF reads a component with type="textComponent" it will automatically use the supplied definition.

The best resource for additional information on this subject is CDF source.

  • vDashboards.saveStorage() : Saves the contents of the object;
  • vDashboards.loadStorage() : Reloads the object (this is done automatically at Dashboard render time, only useful when undoing certain operations);
  • Dashboards.cleanStorage() : Empties the entire storage of that user.

As the main developers of this community project, we understand that sometimes it isn't easy to achieve exactly what we want.

To allow users to get the full benefit of CDF we've prepared a set of documentation - a step by step tutorial from "how to start" to the hidden features of this framework.

By doing so you will:

  • Have the source - so that you can see how everything is built;
  • Get free updates made to the tutorial for 1 year;
  • Get a refund guarantee if you're not happy with the result;
  • Contribute with open-source development.

Check our demo. We can build a matching solution for your scenario too.


Are the tutorials a replacement for the CDF documentation?

No, they aren't. They complement each other.

I want to learn to design dashboards with CDE. Why should I buy the CDF tutorials?

CDE uses CDF as the Dashboard engine. In that sense, CDE and CDF are closely related. The understanding of CDF concepts is a great help for understanding and using CDE.

Wondering who can provide you a fitting dashboard design? Consider Webdetails.

After using the tutorials, I have some suggestions/issues/questions. Which is the best channel to send you this information and help with the product development?

The best communication channels are the Pentaho Community Forums and the #pentaho channel on Freenode.

After installing the tutorials, I don't see the dashboards / I only see a blank page / I only get the processing window which runs continuously. What is wrong?

There are some options:

  • Make sure you followed the instructions you received;
  • Make sure the Pentaho version where you installed the tutorial is compatible with the tutorial itself;
  • Make sure you installed the tutorials in your root solution folder, not under bi-developers ;
  • If you're still in troubles, look for errors in the Pentaho logs for a clue.

Wondering who can provide you a fitting dashboard design? Consider Webdetails.

Recommend this article:

Registered in Portugal. NIF 508 528 283