Community Dashboard Framework

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


 

CDF is an Open Source framework that allows the creation of highly customizable dashboards on top of the Pentaho Business Intelligence server. CDF is based on web development standards such as CSS, HTML5 and JavaScript (leveraging some commonly used frameworks like jQuery or Bootstrap). Targeted at developers, CDF is an effective solution to combine Data with an appealing visualization layer.

 

Credits: Webdetails Team, Lead - Pedro Alves; Thomas Morgner; Daniel Einspanjer; Will Gorman; Sergio Ramazzina; Aaron Phillips; Pentaho Community

 

Version: 16.01.22

License: MPLv2

Available in: Marketplace


Overview

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.

 

Main Features

  • Based on open source technologies;
  • Uses AJAX;
  • Features a life cycle with components interacting with each other;
  • Separetes 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 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.

 


 

Concepts

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.

 


 

Components

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

 

typenameparameters
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.
parameterpreChange / postChangepreExecution / postExecution
For components where user input is required, this is where the input is stored for later use.For selectors, before/after the input value is updated, this functions are executed. Useful for validating user input, for instance.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.
listenershtmlObjectexecuteAtStart
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.

 

Templates

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.

 

template-dashboard.htmltemplate.htmltemplate-dashboard-mantle.html
This is the outermost 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.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.
default-dashboard-template.html
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 templates 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.

 


 

Advanced Concepts

 

Metalayer

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, which can be imported from the template files using a simple HTML script tag.

 

<script type="text/javascript"
  src="GetCDFResource?resource=/solution/path/MyMetaLayer.js">
</script>

 

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.

 

Storage

It is possible to maintain parameter states between different sessions. Instead of using simple parameters, objects inside the special namespace Dashboards.storage 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.

 

Example

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 Dashboards.storage.region;
  • Save the storage in the postChange function. The function may look like this:

 

function() {
  Dashboards.saveStorage();
  alert("You chose: " + Dashboards.storage.region);
}

Extending CDF

Thanks to the collaboration of Will Gorman, CDF has a modular and extensible library of components that can be extended by users. Using an object oriented approach, the key is to extend the BaseComponent class. The simplest component of them all is the TextComponent, which you can see in the example below.

 

var TextComponent = BaseComponent.extend({
  update : function() {
  $("#"+this.htmlObject).html(this.expression());
  }
});

 

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;

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

 


 

Step-by-Step Tutorials

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.

 

Attachments

    Outcomes