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.

Let's talk.

Designing Dashboards

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

Layout

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.

Components

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

Datasources

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.

Dimensions

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.

Parameters

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

Scripts

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.