09 Feb

Developing Bootstrap buttons with Pentaho CDE dashboard

bootstrapIn this post I would like to share how to develop a Bootstrap button in a Pentaho dashboard. Pentaho and Bootstrap are long time friends and in a past tutorial I started to dive deep in the development with a tutorial about the text field. Various solutions are available in the web for this purpose (for example Diethard Steiner blog or the Ivy Bootstrap Component) but here I would like to share “my solution” for this purpose, not because I think this is “better” or “worst”, but because I used it in a real life scenario with satisfaction.

Description of the environment

The development environment used for this purpose is the same used in the tutorial about the text field. The only difference, this time, is that I started to use Pentaho 5.3 (Release Candidate). For the purpose of this tutorial, nothing really changes so I think that the solution could be used also with more dated versions of the Pentaho suite.

Developing the layout

Starting from an empty CDE dashboard (if you want to know how to develop an empty CDE dashboard, you can take a look here) let’s define the layout. The layout of the dashboard is quite simple and is describe below in the picture.

bootstrap_buttons_layout

No special configurations, no particular customizations; only some simple rows with some named columns inside.

Developing the default Bootstrap button

Now that we have an empty Bootstrap dashboard with a useful layout, let’s define a standard button component using the CTools. To develop this task, let’s access to the Components Panel and define a Button Component (you can choose the components from the ‘Others’ menu on the left).

The Button Component should be defined in the way is described in the screenshot below.

bootstrap_buttons_component

The only customizations are about:

  • The name the component (feel free to set the name you’d prefer).
  • The htmlObject indicating the rendering position in the layout.
  • The post execution function, we are going to describe below.

The post execution function is the real only difference with a standard development of the button. Below the description of the content of the function.

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-default");
}

This javascript code retrieves the HTML object using JQuery and add a new attribute class="btn btn-default" according with Bootstrap syntax. To understand more about the Bootstrap syntax on buttons, please take a look here. As you can easily understand, this is the first and only customization requested to make the CTools component, compliance with the Bootstrap syntax.

Now that the Bootstrap dashboard is developed, let’s save it and see the preview.

bootstrap_button_preview

Developing all the different types of Bootstrap buttons

Now that we know how to develop a Bootstrap button, let’s see how to develop all the different type of buttons that Bootstrap makes available. The difference between all the different buttons is only related to the post execute function. Below the description of the function with a preview of the button.

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-primary");
}

bootstrap_button_preview_primary

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-success");
}

bootstrap_button_preview_success

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-info");
}

bootstrap_button_preview_info

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-warning");
}

bootstrap_button_preview_warning

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-danger");
}

bootstrap_button_preview_danger

function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-link");
}

bootstrap_button_preview_link

 

How to manage buttons’ size

Exactly with the same approach, we can easily manage the size of buttons. According to Bootstrap’s rules let’s develop what we can see below.

bootstrap_button_preview_sizes

// Primary large button (the blue one)
function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-primary btn-lg");
}

// Default large button (the white one)
function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-default btn-lg");
}
// Primary small button (the blue one)
function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-primary btn-sm");
}

// Default small button (the white one)
function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-default btn-sm");
}
// Primary extra small button (the blue one)
function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-primary btn-xs");
}

// Default extra small button (the white one)
function f() {
 $('#' + this.htmlObject + ' button:first-child').addClass("btn btn-default btn-xs");
}

Conclusion

In this post I share how to develop all the Bootstrap buttons in a Pentaho dashboard using the standard components of the CTools. 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.

2 thoughts on “Developing Bootstrap buttons with Pentaho CDE dashboard

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.