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.

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.

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

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

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.

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

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>

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

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.

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!

---

Get the Bootstrap Components Plugin!