Inter panel communication in pentaho CDE - ClickAction and Listeners usage in pentaho CDE

Hello guys,
This post will teach you how to communicate the panels in pentaho CDE dashboard.

Example Scenario :
Panel 1 : BarChart is placed in panel-1
Panel 2: Table data displayed in panel-2
Functionality : When you click on any of the bars, then the corresponding data should be displayed in 2nd panel. i.e., Make use of parameters, clickAction property, Listeners.

Example Developed on :
Pentaho 5.0 CE server
Pentaho C-Tools version : 13.09
Database : postgresql-foodmart( jasper food mart database)

Steps:
 1) Create parameter (Lets say : param1_position_title)
2) Add it to listeners & parameters in your table component.
3) Add it to parameters in your data source for table query
    Example:
   SELECT
        employee_id,
        full_name,
        position_id,
        department_id
  FROM
        employee
  WHERE
        position_title=${param1_position_title}

4) Add to parameters in your chart(bar chart).

5)  BarChart query example:

SELECT DISTINCT
    position_title AS position,
    sum(salary) AS salary
FROM employee
GROUP BY position_title

6) In the chart properties
clickable = True
clickAction
 function fun()
 {
     Dashboards.fireChange('param1_position_title', this.scene.atoms.category.value);
 }
 NOTE:
It is like drill down with in the same dashboard, but here we make use of  Dashboards.fireChange function. 

OUT Images:

Image-1

Image -2 

Source code of this example is available here  Click here

Reference :
http://forums.pentaho.com/showthread.php?155487-Inter-Panel-Communication-in-Pentaho-CDE
http://forums.pentaho.com/archive/index.php/t-144148.html

:D :) :P