![bootstrap]()
In this post I would like to share how to develop a Bootstrap text field in a Pentaho dashboard. Pentaho and Bootstrap are long time friends and various solutions are available in the web (for example Diethard Steiner blog) or directly in the Pentaho Marketplace (for example the Ivy Bootstrap Component). In this post I would like to share “my” solution for this purpose, not because I think this is “better” or “worst”, but because I used it with satisfaction. My purpose was to develop a Bootstrap dashboard using as much as possible the standard CDE components, with the minimum impact and dependency.
About Bootstrap
I would prefer not to describe in detail what Bootstrap is but, in few words, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Have you ever seen Bootstrap in action? Yes, for sure, for example in Twitter website or Delicious web site.
Want to understand better what Bootstrap is? Take a look to the official website.
Description of the environment
Coming to our use case, I start the description of the solution from the development environment. Below a brief description of it.
- Linux Ubuntu 14.04 LTS. Nothing more and nothing less than a vanilla installation.
- Java v1.7.0_60. If you want to know how to install it, take a look here.
- Pentaho Business Analytics Platform Community Edition v5.2.
Developing the empty Bootstrap dashboard
The first task of our goal is to develop an empty dashboard with Bootstrap support. To develop this task, Pentaho B.A. Platform has everything we need.
Let’s start creating a new CDE dashboard using the File menu in the Pentaho desktop. Below a screenshot describing it.
![create_bootstrap_dashboard]()
Now that the CDE dashboard is in opened, let’s save it with the Bootstrap support. To develop this, simply access to the settings menu. Below a screenshot describing it.
![settings_bootstrap_dashboard]()
To complete the task, in the Layout Panel you get after saving the dashboard, let’s develop the simple structure described in the screenshot below.
![boostrap_dashboard_layout]()
As you can see, the structure is composed by an initial row with two columns and each column contains a sub-row; the one called ‘field1’ where we are going to set up an example of default text field and a row called ‘field1Bootstrap’ where we are going to set up the Boostrap text field.
Save the dashboard and everything is ready for the next task.
Developing the Bootstrap text box
Now that we have an empty Bootstrap dashboard, let’s define a standard text field of the CDE tools. To develop this task, let’s access to the Components Panel and define a Text Input Component (you can choose the components from the ‘Selects’ menu on the left).
The Text Input Component should be defined with defaults in the way is described in the screenshot below. Please, note that the components is going to be rendered in the ‘field1’ row so on the left of the resulting dashboard.![boostrap_dashboard_cpomponents_1]()
Now that the default Text Input Component is developed, let’s define another Text Input Component with few differences. Below a screenshot describing it.
![boostrap_dashboard_cpomponents_2]()
Please, note that the differences are two: of course the different HtmlObject (that is going to render the field in the right side of the dashboard) and the Post Execution property. The Post Execution property is defined with the cose described below.
function f() {
$('#' + this.name).addClass('form-control');
$('#' + this.name).removeAttr('value');
$('#' + this.name).attr('placeholder','Enter value here');
}
This javascript code retrieves the HTML object using JQuery and add a new attribute class="form-control", remove the attribute value and add another attribute placeholder="Enter value here". This HTML manipulation is useful to make the <input> tag generated from the CDE Tools, compliance with the Bootstrap syntax. To understand more about the Bootstrap syntax, please take a look here for the input tag.
As you can easily understand, this is the first and only customization requested to make the CDE Tools compliance with the Bootstrap syntax.
The final result
Now that the Bootstrap dashboard is developed, let’s save it and see the preview. Below a screenshot with it.
![boostrap_dashboard_preview]()
As you can see, on the left we have the standard text field of the CDE tools and on the right the same text field, but compliance with Bootstrap look&feel. All the development and interactions are the same because you are working with a Pentaho standard component.
Goal reached!
About the strategy and the solution
I think we are agree that this approach could be followed to develop all the Bootstrap look&feel for all the available components of the CDE Tools. In some cases this is quite tricky and probably limited, but in all of my past developments I did not find relevant limits. In other words, this approach works fine for the most common needs!
Conclusion
In this post I share how to develop a Bootstrap text field in a Pentaho dashboard using the standard components of the CDE tools. Several solutions to this goals has been developed in the past but this is yet another one. I used this approach with satisfaction developing the A.A.A.R. responsive dashboards and I hope this will helps some of you in the same way.
The post Developing a Bootstrap text field with CDE dashboard appeared first on Francesco Corti.
