Creating a Pentaho Mobile Dashboard – Part 1

In this series we will take you through the steps to create a simple responsive and mobile dashboard using The CDE, Pentaho and Bootstrap.

We are going to assume you have already installed a copy of the Pentaho BI Server and the following Community Tools: CDF, CDE, CDA. Make sure all your CTools are up to date!

The Basics

We’ll start by creating a new CDE Dashboard. On the Pentaho Home Screen select File > New > CDE Dashboard. This will open up the CDE Editor.

Start by saving your new Dashboard to the Pentaho Repository. In the CDE screen, select the Save As option on the main menu and save your dashboard. Before we can start working with the Bootstrap framework we will have to set our dashboards to a Bootstrap Type. We can do this by clicking the Settings item in the main menu. At the bottom of this popup is an option called Dashboard Type. Select Bootstrap from the pulldown menu and click Save.

Dashboard Type

Understanding the Bootstrap Layout

Before we dive into creating our layout using Bootstrap we need to quickly discuss the differences between the original CDE layout engine (Blueprint CSS) and Bootstrap.

The first thing that we should mention is that unlike Blueprint CSS with its 24 total spans or columns, Bootstrap has 12. This means to create a simple 50% / 50% layout we we add two Bootstrap Columns with each span width set to 6.

Another interesting difference is the fact that nested columns should always add up to 12. What this means is that say we wanted to nest two columns at 50% width each within a parent column that has the span width of 6 we would set the two nested column widths to 6 each also (not 3 each as you might expect with the Blueprint CSS engine).

You can read more on the layout here http://getbootstrap.com/css/#grid

Now we have that out of the way we can crack on and create a simple 2×2 layout using Bootstrap Panels!

Start by adding two Rows to the dashboard one after the other. Next add two columns to each row. Set each columns Width property to 6. Add an HTML component to each column also.

Layout

The next step requires a a little HTML but don’t worry as its pretty straight forward. Select one of the HTML components that you added to the columns earlier. Copy and paste the following HTML.

<div class="panel panel-default">
<div class="panel-heading">Header Text</div>
<div class="panel-body">Panel Content!</div>
<div class="panel-footer">Footer Text</div>
</div>

If you save and preview your dashboard you should see a sample panel like the one below

Single Panel

Now copy and paste the HTML into the remaining HTML Components. Save and preview.

4x4 Panels

HTML Object IDs

Rendering Panel is all well and good but one last thing worth mentioning is that when / if we want to attach other CDE components like Charts and Selectors to these Panels, we must set an ID for the panel-body div.

Edit and of the HTML Components and add the following HTML in bold.

<div class="panel panel-default">
<div class="panel-heading">Header Text</div>
<div class="panel-body" id="myHTMLObjectID">Panel Content!</div>
<div class="panel-footer">Footer Text</div>
</div>

Now we are able to add components to the dashboard and attach them to the Panel Body / Content area via the ID myHTMLObjectID

If we wanted to attach a chart component to the Panel we need to make sure that the Panel Body div has a height set. You can do this with a CSS style like so:

<div id="myHTMLObjectID" style="height:300px;">Panel Content!</div>

Now when a chart is attached to the Panel Body it will take the height set.

Panel Height

A Simple Button

Now that we have our basic layout with panels we can go ahead and add a simple Bootstrap Button to our dashboard. In the next section we will write the javascript to make it do something

Add a new row above the existing rows in the dashboard. Next, add two columns to the new row and set the span width to 6 for each. Add a HTML Components to the columns.

Add the following HTML to the HTML Component in the first colum. Its the least we need to render a Bootstrap Button.

<button type="button" class="btn btn-default">Button Text</button>

This HTML will render the default Bootstrap Button pictured below

Default Button

The Bootstrap Button also has some extra options that we can configure by editing the CSS classes used. We can change options like the colour, size, icons and so on. Let’s make some changes to the existing button. Add the following HTML in bold

<button type="button" class="btn btn-primary btn-lg btn-block">
 <span class="glyphicon glyphicon-star"></span> Button Text
 </button>

Advanced Button

Drop Down Selector

Another useful component to render is the Bootstrap Drop Down Selector. This can be used to set the value of a dashboard parameter later on.

Select the second column next to the Button one and add the following HTML

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

You should see something like the picture below

Default Select

Just like the Button component in the previous we can set certain options for the Selector. Make the following changes in bold

<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-star"></span> Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

We should now be looking at a large primary button with a star icon like below.

Primary Button

Next Up!

In the next post in this series we will show you how to populate these selectors with options from a resultset and more!


Ivy Bootstrap Components

Get the Bootstrap Components Plugin!

About the author

Harris Ward is the Managing Director of Ivy Information Systems. He has been working in Open Source Business Intelligence for a number of clients developing solutions and providing training spanning 10 years

Comments

  1. Fabio

    Great post! I am always a bit wary of using CTools as I know very little of web techs and your post made me feel like trying it again!

    • admin

      Thanks Fabio. We’re really happy you liked the post!

  2. Sadakar

    Hi.. Thank you for nice description …
    How can we map dynamic values from SQL query to drop down list using Bootstrap drop down ?
    Not only the case of Dropdown, what ever the selectors supported by CDE, how do map them to CDE ? Any hint or a small example will be helpful..
    Thank you.
    Sadakar
    BI developer

    • admin

      Hi Sadakar.

      We will cover this in part two of this blog series. Coming next week!

      Cheers!

  3. sadakar

    Hi Ivy Guys,
    I’ve been trying to map sql query result set in bootstrap drop down but unable to finalize and fix yet…
    Have you done with this functionality ? Could you share the sample in Part-II of the this article continuation as as possible ?

    Thank you.
    Sadakar
    BI developer
    Open source Technologies.

  4. Leandro Guimaraes

    Same thing here, everything working! Just could not populate the dropdown using a sql query!

    Congratulations for your blog!!

  5. sadakar

    When will you release the next part of this tutorial ? I’ve mailed you guys asking about the plug-in details whether it’ll be a plugin for CDE components for free or need to purchase. ?

    Thank you.
    Sadakar
    BI developer

  6. Gaurav Ashara

    Hello,

    I tried to run above example but when i was going to add column in Layout its didn’t show me properties you show me in above image like span size instead of that we got Extra Small Devices,Small Device, Bootstrap Css class and more … So where can i specify Span size

    Thanks & Regards
    Gaurav Ashara

    • admin

      Since we wrote this post the CDE has been updated. Now set the same as you would with a span but instead set it on the devices

Leave a comment

Leave a Reply