JBoss.orgCommunity Documentation

JBoss Dashbuilder - Quick Start Guide

If you want to build the project and execute a quick demo, please, proceed as indicated:

  1. Prerequisites:

    This guide assumes you have Java JDK 1.6 (set as JAVA_HOME), a GIT client and Maven 3.0.5+ (set as MAVEN_HOME) in your system. The java and mvn commands must be added to the executable path as well.

  2. Download the project from the GitHub server:

    git clone https://github.com/droolsjbpm/dashboard-builder.git
  3. Open a terminal window, go to the scripts directory and type the following command:

    ./buildandrun.sh h2

    This command compiles, builds and runs the application. This procedure will take a few minutes (but only for the first time) because of the maven build process needs to download a lot of third-party libraries.

  4. Once the application is started, open a browser and type the following URL:


    The login screen will appear. Login as user root and password root. You'll gain access to the default workspace, called Showcase, which contains several sample dashboards as well as some administrative tools.

    The following users are available by default:

    You'll need to sing-in as superuser in order to be able to create and modify dashboards.

The purpose of this chapter is NOT to provide a full detailed explanation of the tooling, but to guide you through the key steps to get your first dashboards created. The following section will provide basic information about how to configure the system to retrieve information from existing databases or files, create new indicators and manage different dashboards.

For this guide, it's assumed the simple installation has been done, with the standard set of examples and user and role configuration. It's important to notice this configuration MUST NOT be used in production, since it provides default security credentials.


Please, read the previous chapters to figure out how to get the application up and running

The procedure to create a brand new dashboard is pretty simple as we will see in the following sections. That procedure is composed of 3 main stages:

  1. Get the data we want to manipulate.

  2. Create key performance indicators on top of such data.

  3. Create a new dashboard and drag&drop the new KPIs on it.

The first thing to do, after you have accessed the web application, is to create a data provider. On the left menu, go to 'Administration > Data providers' and once there, select the option 'Create new data provider'.

The purpose of data providers is to gather information from any system, either a database, a file or any other, and transform it to the internal in-memory representation for building dashboards. As you may guess there exists different data sources and therefore different ways to retrieve as we're going to see next.

Once the necessary data providers have been created, you can continue by adding a new Key Performance Indicator to an existing page. All dashboards are created by adding indicators and other types of panels to pages. A dashboard is a page with a mixture of different kind of panels placed into it. The following screenshot shows an example of a Sales Dashboard:

Pages can be created from scratch, or duplicating an existing one. Both options are explained in the following sections. Meanwhile we will assume the page already exists and we only want to add an indicator.

Indicators are a special type of panels, which are the widgets that can be placed within the page. To add a panel or indicator just click on the toolbar icon 'Add panel to the current page':

This will make a popup be shown with all the available panels:

To add a new 'Key Performance Indicator', click onDashboard > Key Perfomance Indicator. Drag the 'Create panel' option and drop it into any of the page regions. You will see that they are being highlighted while you move the mouse over them, then simply drop the panel.

Once dropped, the first step is to select the Data Provider you need to use, as configured before, to feed the charts and reports with data. Select any of the data providers and then you can start creating a new indicator.

Now, you must see the chart edition panel. It's an intuitive environment which helps you configure different type of charts and reports...

To finish the panel edition just close the panel edition window. If you want to get back again, just click on the right upper corner of the panel area and select the 'Edit content' menu option.

The system provides you with 3 types of chart displayers: bar, pie and line, and a special table displayer very useful to create tabular reports. The system also comes with 2 rendering engines: NVD3 (pure HTML5/SVG technology) and a Flash based one, Open Flash Chart 2. Each renderer has its own available features, so depending on the type of chart and renderer choosen you can end up with some display features enabled or disabled depending the case. For instance, the 'Paint area' feature is not available for OFC2 line charts.

A dashboard is basically a page with some KPIs placed on it (plus some other additional widgets as we will see later on). There are two different ways of creating a page:

Starting as a blank page:

Duplicating an existing page:

You will find these icons at the top of the page, in the administration bar:

To create a new page, click on the 'Create new page' icon:

A form will be shown to fill in some parameters:

Most of these properties will be discussed in the chapter about 'Customing look'n'feel'. After creating the page, you might realize the page is still not accessible from the left menu but you can see it in the combo list in the administration toolbar:

If you want this page to be shown in the left menu, you can click on 'Edit content' and then add the newly created page to the list of options displayed in the menu.

Repeat until the page has all the content and panels required. After dropping the panels into the right regions and configuring them, you might be able to create dashboards that look like the following one:

As you can see, a dashboard is usually composed by one or more instances of the following panel types:

The 'Filter & Drill-down' panel allows for the quick definition of dynamic forms that will allow us to navigate troughout the data displayed by the dashboard. Once an instance of the 'Filter & Drill-down' panel is dropped on the oage we just have to select the 'Edit content' option from the panel menu. After that, a popup window similar to the following will be displayed:

This is a filter configuration panel where we can set the filter behaviour. Let's focus first on the middle bottom part of the screen: the Data provider's property table, which lists the properties of ALL the data providers referred by the KPIs on the page. For example, if we are building a sales dashboard and all its KPIs are built on top of the same data provider called 'Sales dasboard demo' then the system lists all the data properties of the 'Sales dashboard demo ' provider. Hence, only the properties we select as 'Visible' will be part of the filter form. Aditionally, we can enable the drill-down feature for each property. If enabled then the system will redirect to the target page when the property is selected on the filter form. Below is an screenshot of the filter panel of the 'Sales dashboard demo'.

As you can see the form is composed by all the visible properties selected. For each property the system reads its configuration by asking the underlying data provider. For label type properties a drop-down list is displayed, containing as options all the disctinct values of the data provider's column. When the user submits a change on the filter form then the following operations are carried out by the dashboard visualization engine:

When we talk about security we refer to the ability to define authorization policies in order to grant or deny users access to a given resource. Therefore, we first have to define who are the target users and what are the resources we want to protect. As resources we have the following:

  • Workspace: A set of pages with a shared look and feel. It may contain one or more dashboards.

  • Page: A combination of panels spread all over the screen and tidy up according to a given layout. A dashboard is basically a page used for monitoring a set of indicators.

  • Panel: A reusable and configurable graphical component ready to be embedded and used. f.i: a KPI panel, a tree menu panel or an HTML panel.

As of users, the application doesn't own a user repository. Users are managed outside the application. This means the login itself is delegated to the application server. After login, the application server pass to the application both the id of the user and the roles he/she has. The full list of available roles are defined into the application's WEB-INF/web.xml file.

Let's see next how to define custom authorization policies to grant/deny access to a workspaces, pages or panels instances per role.

To wrap up, it's worth to mention that thanks to the permission system we can build a workspace structure with several pages, menus and panels and start defining what pages and panels within a page will be visible for each role. We can also define special kind of users and give them restricted access to certain tooling features or even restricted access to a page subset. The chances here are infinite.

There exist three types of graphic resources.

You can handle all these components from the administration console, under the node 'Graphic resources' and create/modify them in order to fully customize the look and feel of your dashboards.

Each graphic resource is packaged in a file. Zip file which content varies depending on the type of component. Nonetheless, the structure of the management screen is the same regardless of the type of the resource being handled. As we can see on the screen, the upload form is composed by two fields:

Each zip comes with a definition file which name varies depending on the type:envelope.properties, skin.properties or layout.properties. This property file have two distinct parts:

The easiest way to create a brand new skin, envelope or page layout is to download an existing one, unzip/modify it and finally upload the new zip as a new resource. The management of graphic resources can be carried out by a graphical designer who shall not require the presence of a technician to do their job.