Community Dashboard Editor
CDE and the technology underneath it (CDF, CDA and CCC) allows the development and deployment of Pentaho Dashboards in a fast and effective way.

Community Dashboard Editor (CDE) was born to simplify the creation, edition and rendering processes of the CTools Dashboards. CDE is a very powerful and complete tool, combining front end with data sources and custom components in a seamless way.

Credits: Webdetails Team, Lead - Pedro Alves; Cees van Kemenade; Aaron Phillips


The Community Dashboard Editor (CDE), which is integrated in the Pentaho User Console (PUC), is a graphical tool for creating, editing and previewing Pentaho Dashboards.

Creating Dashboards

The Files and the Settings menu allow you to create, save and rename Dashboards.

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

Designing Dashboards

For the design of your Dashboard, CDE offers three perspectives:


Design the layout of your Dashboard, from scratch or from a template - while defining the layout you can apply styles and add HTML elements as text or images.


Add and configure the different components that make up your dashboard: Visual Components (textboxes, tables, charts, etc.), Parameters and Scripts.


Define the data sources used by the components.

Previewing Dashboards

The Preview option is the shortcut for testing the look&feel and behavior of your Dashboard as you're working.

Dashboard Layout depends on several standard technologies

Besides, CDF incorporates Blueprint, a CSS framework which aims to cut down on your development time. Blueprints offers:

  • A rich set of classes which allows flexible layouts;
  • A predefined 24-column layout - allows an easy way for building the dashboard layout;
  • Cross browser compatibility;
  • Good mobile rendering.

Designing the Layout

A dashboard layout can be created by a simple combination of rows and columns along with some HTML blocks and possibly some images.

You do all this in the Layout perspective. On the top left area you have a main toolbar that allows you to add, move or delete the different building blocks: rows, columns, spaces, HTML blocks and images.

As you build the layout you will see the structure of nested rows and columns below the toolbar. If you select one of the elements on that structure, the properties area on the right is refreshed. This is where you can configure the element as you wish.


You can assign the width of a column with the following properties:

  • Span size, where you will draw the components;
  • Prepend size and Append size to keep some space between columns.

While these properties are specified in Blueprint units, the height for the rows has to be supplied in pixels. Because of Blueprint, in every row the sum of Prepend size, Append size and Span size must be 24!

Look and Feel

In the Layout perspective you may also provide some look and feel properties, as for example a background color, and style for the corners of rows and columns. Besides, if you add a CSS resource, you can apply any of the styles defined there to any of the elements in your layout by typing it in the CSS Class property.

  • HTML to describe Web pages;
  • CSS to control the style and layout;
  • JavaScript to add interactivity;
  • jQuery to simplify all those tasks.

Dashboards can be Populated by a variety of sources:

  • Databases;
  • Mondrian cubes;
  • Pentaho Metadata;
  • XML files;
  • Scripting - you can define an ad-hoc datasource (for example a small table), just by typing a piece of code;
  • Kettle transformations - Kettle allows you to get data from other sources, as for example Excel sheets or Web services.

The datasources can be parametrized, which makes your data totally versatile.

Adding Datasources to a Dashboard

In the Datasources perspective you can define the origin of the data that will be used to populate your dashboard.

Basically, you have to specify where the data comes from and how it looks like.

This is how you do it:

  • From the left menu, expand the category where your data belongs. For example, if you have to query a Mondrian cube, expand the category MDX Queries;
  • From the list of datasource types, click the one that fits your needs, for example MDX over mondrianJndi. A new datasource will be added in the pane located in the middle of the screen. When you select a datasource the right pane displays its properties - it's where you define the datasource.
  • name of the data source: The name must be descriptive because you will need it when defining a component that uses it;
  • query: This is where you type the query (SQL, MDX, etc. depending on the kind of datasource);
  • JNDI name or JDBC parameters: host, user, etc.;
  • column configuration: This property allows you to rename columns returned by the query, or create new calculated columns;
  • output options: This property allows you to reorder or keep a subset of the columns returned by the query.

The components are the central elements of a dashboard,
there are three different kinds:

Visual Components

The components that are displayed in your dashboard. Examples of visual components are textboxes, tables, charts (pies, bars, timelines, etc.), selectors (radio buttons, date pickers), OLAP views, reports, etc.


Represent values that are shared by the components. The parameters are essential for the interaction.


Pieces of JavaScript code that let you customize the look and feel or behavior of other components.

Adding and Setting up Components

Whether you need to add a visual component, a parameter or a script, you need to access the Component perspective.

From the left menu, expand the category where your component belongs. For example if you want to add a Date input component, expand the category Selects - from the list click the one that interest you.

A new component will be added in the pane, located in the middle of the screen. When you select a component, the right pane displays its properties - it's where you define the component.

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


Follow these simple steps

1 Imagine

Think of how your Dashboard will look like and how it will behave. Draw a sketch on paper for future reference.

2 Log into the Pentaho User Console, and launch the CDE

You can launch the editor from the PUC home page, from the PUC menu (File > New > CDE Dashboard), or by clicking on the CDE icon in the PUC toolbar.

3 Save the dashboard

Give the Dashboard a name and save it in the solution folder of your choice, and then close the Dashboard.

4 Edit the dashboard

Refresh the console by clicking F5 (or the keyboard shortcut Ctrl + R), find the Dashboard, right-click it and select Edit. The Dashboard editor will appear.

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

5 Design the Layout

Select the Layout perspective and define the dashboard layout according to your sketch.

6 Add the datasources

Select the Datasource perspective and define the datasources that will feed your Dashboard.

7 Add and configure the components

Select the Component perspective and add the components that make up your Dashboard: the visual elements, the parameters, and eventually some scripts.

8 Preview your work

Click on Preview regularly to see how your work is progressing. Repeat steps 5-8 until you are satisfied with your final dashboard. Don't forget to save your work from time to time.

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


What does CDE mean?

CDE stands for Community Dashboard Editor.

I'd like to add a SQL query. Which datasource should I select?

SQL query or SQL over sqlJdbc/Jndi?

You should definitely choose the options inside the SQL Queries category, based on CDA. The Legacy Datasources are there just for compatibility reasons.

I want to configure a datasource but I don't understand the properties. Is there a documentation somewhere?

The CDE datasources (not the Legacy ones!) rely on CDA. For understanding the different properties just take a look at the CDA documentation.

Is CDE free?

CDE is released under the MPLv2 license.

How do I add a bubble chart in CDE?

There is no Bubble components in CDE, but you can add a Protovis component with your customized code. In the same way, you can add any kind of Protovis chart not implemented by CCC.

How do I edit an old dashboard with CDE?

You can not. You have to edit the xcdf files directly.

How do I format the legends in my charts?

The legend properties (color, font, etc.) as well as many other chart features can be changed or setting by defining CCC extension points. You can find this property in the Advanced Properties tab. For more on extension points read the CCC documentation.

I want to add a kind of component not implemented by CDE. Should I contract Webdetails for developing it?

Sure you can! But there is an alternative: CDE is open in the sense that it allows you to develop your own custom components.

Recommend this article:

Registered in Portugal. NIF 508 528 283