How to create a link between two dashboards

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 create a link between two dashboards using an HTML link or an interactive button.

Creating an HTML link between two dashboards

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 endpoints. Take a 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.
  • Add a new HTML source code to the layout by pressing the ‘add HTML’ icon in the left panel.
  • On the right panel, evaluate the ‘html’ attribute with the source code described below.
<a href="/pentaho/plugin/sparkl/api/main">Click here</a>
  • Save the dashboard using the item at the top of the page.

That’s all!

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 where you can see the link. By clicking the link, the main sparkl dashboard is showed in the window as result of the link. Developing your own dashboard in the application and replacing the ‘href’ attribute with a value similar to the one described below, you are going to link all the dashboards you want.

/pentaho/plugin/myfirstapplication/api/dashboardname

Creating an interactive button to link another dashboard

Now that we are able to link two dashboards using an HTML ilnk, let’s see how to reach the same goal using an interactive button. If you already don’t know how to develop an interactive button in a CDE dashboard, please read here.

Once you interactive button has been developed in your dashboard, replace the ‘Expression’ property of the button component with the code described below.

function() {
  window.location.replace("/pentaho/plugin/sparkl/api/main");
}

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! 😉

For example: do you prefer to open the dashboard in a new window instead of the current one? Simply replace the javascript with this code.

function() {
  window.open("/pentaho/plugin/sparkl/api/main");
}

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 where you can see the button. By clicking it, the main sparkl dashboard is showed in the window as result of the link. Developing your own dashboard in the application and replacing the URL you are going to link all the dashboards you want.

Conclusion

In this tutorial we have seen how to create a link between two dashboards 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.

2 thoughts on “How to create a link between two dashboards

  1. Hi Francesco,
    I have read about Sparkl in Pedro Alves blog post. After, I found your tutorial.
    Thank for sharing your knowledge about this.
    Hugs,

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.