How to put an interactive button into a dashboard

pentaho-logoThis post is part of the Pentaho Sparkl application builder tutorial. As my habitude the tutorial is described as a “step by step” list of tasks and commands, in my opinion more useful and clear to understand how to do and make it work.

The tutorial is developed using a Linux Ubuntu 12.04 LTS operating system, but even on a different platform the description should be valid and help to understand how to reach the goal.

Prerequisites

This tutorial assumes that Pentaho Business Analytics Platform 5 is correctly installed into your system together with Sparkl. A basic Pentaho application should be created with it. If this is not your environment, please follow this tutorial.

Introduction

A Pentaho application created with Sparkl is a set of dashboards developed with CDE of the Ctools, and Pentaho Data Integration – or Kettle – endpoints developed as PDI jobs or transformations with some specific characteristics. Of course those two subsets of the application will be able to interact to develop exactly what you expect. In this tutorial we are going to see how to put an interactive button into a dashboard.

Create a button

First of all, access to Pentaho User Console as administrator (otherwise you won’t be able to access to Sparkl desktop) and access to Sparkl desktop.

Sparkl - Menu with application2

ATTENTION: Do not access from here to the MyFisrtApplication because this link is to the content of the application and not the administration panel.

Once the Sparkl desktop will be visible, identify your application (in our case ‘MyFirstApplication’) and access to edit it by clicking on the ‘edit’ icon. Now that you are in the administration panel of the application, click on the ‘Elements’ tab to manage the dashboards and Kettle endopints. Look at ‘myfirstdashboard’ and access to edit it using the icon on the right of the line.

By clicking the edit icon, another window is going to be opened with an administration panel. Starting from now, editing a dashboard is exactly the same as develop your own CDE dashboard. Below the command to add the button to your empty dashboard.

  • Click on ‘Layout panel’ using the icon in the upper right corner (probably you are already there).
  • Add a new row to the layout by pressing the ‘add row’ icon.
  • Click on the appearing new row and add a new column to the layout by pressing the ‘add columns’ icon. Click on the appearing new column.
  • On the right panel, evaluate the ‘name’ attribute with ‘myFirstButtonComponent’.
  • Click on save button on the top to save the dashboard because with this task we define the requested layout for our goal.

Now it’s time to define the components of the dashboard.

  • Click on ‘Components panel’ using the icon in the upper right corner.
  • On the left you have a list of items. Expand the ‘Others’ item and click on the ‘Button component’. A new component is going to be added to the component list of your dashboard.
  • Evaluate the properties (in the right panel) as described below:
    • Name: myFirstButton
    • Label: Press me
    • HtmlObject: myFirstButtonComponent
  • Click on save button on the top.
  • Close the window of the dashboard administration.

Now it’s time to see a first result. Again in the application dashboard you see the ‘myfirstdashboard’ with an ‘View dashboard’ icon on the right. By clicking it, you will obtain the preview of your dashboard similar on what you can see below.

sparkl - myfirstbutton

Make the button interactive

Now that we develop the button on your dashboard, let’s make it interactive in some way. To add an action to the button, let’s access back to the dashboard editing, in particular in the ‘Components panel’ described before.

Let’s click on the button component and evaluate the ‘Expression’ property with the code described below.

function() {
  alert("Hello world");
}

As you can see this is a pure javascript source code because the CDE development is mainly based on javascript. So, if you want to develop an ajax call or something different… no, matter and do it here! 😉

Now it’s time to see the result. Again in the application dashboard you see the ‘myfirstdashboard’ with an ‘View dashboard’ icon on the right. By clicking it and pressing the button, you will obtain the preview of you dashboard similar on what you can see below.

sparkl - myfirstbutton2

Conclusion

In this tutorial we have seen how to create a first interactive button on a Sparkl application and some technical details about it. To get more tutorials on that topic, you can see the menu list in this page.

0 thoughts on “How to put an interactive button into a dashboard

  1. Hi Francesco,

    Excellent, very useful blog explaining these Pentaho components — thanks for posting!

    I did run into one challenge at the end of the “Create a button” section, however. After adding the Button component and setting the parameters (and then saving the dashboard), I then tried to View the dashboard using the button in Sparkl to launch it. The dashboard does not show the button.

    I tried stopping/starting the BA server, but the dashboard still does not display the button (although my Button component is still saved & shown in “Edit” mode). Is it possible that a step is missing?

    Thank you!

    -David

      • Hi Francesco,

        Thanks for the response — as it turns out, I had slightly mis-named the HtmlObject property of my component. Thus, it was not matched by the reference in the Layout. I’ve corrected this and all is well. Thank you again for the wonderful posts.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.