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!
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!
Thanks Fabio. We’re really happy you liked the post!
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
Hi Sadakar.
We will cover this in part two of this blog series. Coming next week!
Cheers!
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.
Same thing here, everything working! Just could not populate the dropdown using a sql query!
Congratulations for your blog!!
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
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
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
[…] needed to render the Bootstrap Button. If you are unsure of how to do this then take a look at the previous section. You will also have to add a Simple Parameter to the Dashboard. This is the parameter that we are […]