Creating a Pentaho Mobile Dashboard – Part 2

In this blog post we are going to cover the steps needed to turn our simple bootstrap selectors into working selectors!

Clickable Button

We’ll start by adding the functionality to our Bootstrap Button that will allow it to set the value of a simple parameter. Note: You will need basic Javascript and JQuery skills to follow this section! Start by creating a new dashboard, adding a simple 1 row layout, HTML component and the HTML 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 going to change. Before we start writing Javascript we want to add an id attribute to the button so that we can reference it later in our Javascript. The id for the button is set to myButton

We will also take this opportunity to add the Simple Parameter to the Dashboard. Make sure to give it the name PARAM_BUTTON like in the screenshot below.

blog-26-08-14-1

we are going to want to use Javascript to bind a click function to it. This means that when the Bootstrap Button is clicked it will execute some Javascript that in turn will set the value of a parameter on our dashboard. Add a Code Snippet Javascript resource to the dashboard. Click the Javascript code editor and copy paste the following snippet.

$(function(){
	$('#myButton').click(function(){
		Dashboards.fireChange("PARAM_BUTTON","World");
		alert("New Value: "+PARAM_BUTTON);
	});
});

Looking at the Javascript above you can see we are binding a click function to the Bootstrap Button with the ID of myButton. The next line is a little CDE Javascript that will set the value of the parameter called PARAM_BUTTON to the string “World”. Lastly we will render a popup in the web browser using the alert function to inform us that the value of the PARAM_BUTTON parameter has been changed.

Dynamic Select

In this section we are going to populate a Bootstrap Select with data from a CDA Datasource. This will require the use of the CDE Query Component. We’ll start by creating a new dashboard and adding a 1 row with a nested 1 column layout. Be sure to set the name of the Column to something like C1 as we’ll be needing it later.

The next step is to add a CDA Datasource to the dashboard. Click on the Datasources Tab in the CDE, expand the MDX Datasources Category and add the mdx over mondrianJndi Datasource Type to the Dashboard. Set the following properties:

  • Name: Query1
  • JNDI: SampleData
  • Mondrian Schema: SteelWheels

Copy and paste the following MDX into the Query Property

SELECT
NON EMPTY [Measures].[Quantity] ON COLUMNS,
NON EMPTY [Markets].[Territory].Members ON ROWS
FROM [SteelWheelsSales]

You should have something that looks like the screenshot below

blog-26-08-14-2

Now that we have a Datasource we can use it to populate a Bootstrap Select Menu as well as add a click function to the select. To do this we are going to use the CDE Query Component and generate the Bootstrap Select Menu in the Post Fetch Property. We will loop through each item in the Datasource and generate the HTML to render onto the dashboard.

Start by expanding the Others Component Category in the Components Section and adding a Query Component to the dashboard. Next we want to set the following properties.

  • Name: Select1
  • Datasource: Query1
  • HTML Object: C1

In the Post Fetch property you want to copy and paste the following Javascript

function d(data){ selectHTML = '
'+ ''+ '
'; $('#C1').html(selectHTML); $('#C1 li').click(function(){ Dashboards.fireChange("PARAM_BUTTON",$(this).text()); alert(PARAM_BUTTON); }); }

This Javascript loops through the Query1 Resultset and generates the Bootstrap Select HTML. It then attaches it to the C1 Row in the dashboard. Lastly it attaches a click action to each List Item in the Select and sets the Parameter Value of PARAM_BUTTON to the item clicked in the select. Screenshot below.

blog-26-08-14-3

Its pretty much that simple!

Remember that Ivy has a plugin in the Pentaho Marketplace that comes with a couple of bootstrap components so you don’t have to write this one manually

About the author

Harris Ward is the Managing Director of Ivy Information Systems. He has been working in Open Source Business Intelligence for a number of clients developing solutions and providing training spanning 10 years

Comments

  1. Sadakar

    Thank you for this..

    Now, with your new free release of Pentaho Bootstrap components it’s pretty easy to make dynamic drop downs :-)

    Great contribution of Ivy Info :-)

  2. Michal Kurant

    Thank you.
    Bootstrap gives a huge capabilities with new design of dashboards. Can you guys show example how to put in custom bootstrap component i.e Bootstrap Calendar into dashboards ?

    Great job Ivy 😀

    • Harris Ward

      Adding something like a Calender Component to the CDE is no easy task. You firstly need to understand the Calender Javascript itself. Then look into the CDE Components and understand how you can go about populating it with the correct data. I would recommend looking at the existing CDE Components to try and get an idea on how to create such a Component

  3. Michal Kurant

    Thanks for reply Harris. I think it could be much easier if i try to put some prepared calendar from web.

    Greetings

    • Harris Ward

      We would recommend that you find an existing Bootstrap Calender component from google. Look at how it works and what data it would need to render. Then develop a CDE component that would be able to generate that component.

  4. Dejan Gambin

    Trying this but selects don’t look like here. Seems like wrong css is being used or something like this. It is even different doing preview and open. Some incompatibilities between this and CDE/CDF? I have upgraded CDE/CDF from Marketplace…

    Anyway…great job :-)

    • Harris Ward

      You might have issues in preview mode as for some reason the bootstrap CSS doesn’t seem to load. In regular run mode it should look okay. Be sure to set your dashboard type to Bootstrap also.

      Hope that helps

  5. Patriciagep seo manager

    I couldn’t resist commenting. Very well written!

Leave a comment

Leave a Reply