Community Dashboard Editor

Document created by Pedro Goncalves on Aug 10, 2017Last modified by Diogo Belem on Nov 9, 2017
Version 38Show Document
  • View in full screen mode


CDE allows the development and deployment of Pentaho Advanced Dashboards, it's a very powerful and complete tool, combining front-end with data sources and custom components in a seamless way.

 

Version: 16.01.22
License: MPLv2

CommunityCDE.gif

 

Overview

The Community Dashboard Editor (CDE), which is part of 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.

 

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 set up the different components that make up your dashboard: Visual Components (text boxes, 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.

 


 

Quickstart

 

ImagineLog into PUC and launch the CDESave the dashboard
The very first step to consider before starting to build your Dashboard is thinking about how it will look like and how it will behave. Draw a sketch on paper for future reference.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.Give the Dashboard a name and save it in the solution folder of your choice, and then close the Dashboard.

Edit the dashboard

Design the LayoutAdd the datasources
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.Select the Layout perspective and define the dashboard layout according to your sketch.Select the Datasource perspective and define the datasources that will feed your Dashboard.
Add and configure the componentsPreview your work

Select the Component perspective and add the components that make up your Dashboard:

the visual elements, the parameters, and eventually some scripts.

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.

 


 

Layout

Dashboard Layout depends on several standard technologies.

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

  • A rich set of classes which allow flexible layouts;
  • A predefined 24-column layout - providing 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 set up 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. For example, you can set up a background color for a certain element 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. All you need to do is create a new class into the CSS stylesheet and define its properties, and then just add this class in the desired element's CSS Class property field.

 

You're also able to use:

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

 


 

Datasources

Dashboards can be populated by a variety of sources, including:

  • 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 set up 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.

 

Below is the list of properties available in the datasource setup:

  • 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.

 


 

Components

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

 

Visual ComponentsParametersScripts
Those are the components that are displayed in your dashboard, including text boxes, tables, charts (pies, bars, timelines, etc.), selectors (radio buttons, date pickers), OLAP views, reports, etc.The parameters represent values that are shared by the components. The parameters are essential for the interaction.The parameters represent values that are shared by the components. The parameters are essential for the interaction.

 

Whether you need to add a visual component, a parameter or a script, you need to access the Component perspective (in the top right Menu).

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 set up the component.

 

 

Attachments

    Outcomes