Hitachi Vantara Pentaho Community Wiki
Skip to end of metadata
Go to start of metadata

Components Overview

Version 2.x Documentation Only

This space contains documentation for the Community Dashboard Framework version 2.x.
For version 3.x download and install the cdf framework , which contains the latest documentation.

One of the fundamental changes in the new dashboard framework is the use of  components. In the first phase these components get defined in a special syntax, which essentially describes a javascript object.

It's likely that the component list will grow with time; Also, since this is the first release, the specification of some component may change in future versions.

Properties 

The component definition starts with an identifier and a list of properties within the curly crackets after the equal sign. Except after the last property, all properties are followed by a comma.

This is a list of properties which are currently supported by the framework's components:

Property

Description

Default value (must be present)

Type

Required for

name

Name of the component

 

String

all

type

Type of the component

 

String

all

solution

Solution of the xaction

 

String

 

path

Path to the xaction within the solution 

 

String

 

action

Name of the xaction to be executed

 

String

 

listeners

A change in on of this variables triggers a refresh of the component

[]

Array of Strings

 

valuesArray

Array of values for selectors

[]

Array of Strings

Multiple choice selector components

parameters

Parameters to execute the xaction

[]

Array of String arrays

 

parameter

The dashboard variable that gets set by this component

 

String

 

htmlObject

The id of the html tag that display this component (usually a <div>)

 

String

all

expression

Function to return a parametrized String

function(){};

 

text

executeAtStart

Should the component be executed when the dashboard is loaded? (true or false)

function(){};

boolean

all

preExecution

This Javascript function will be executed before the components executes

 

function

 

postExecution

This Javascript function will be executed after the components executes

 

function

 

preChange

This Javascript function will be executed before a selector change propagates

 

function

 

postChange

This Javascript function will be executed after a selector change propagates

 

function

 

These componets have been implemented so far:

#check

#dateInput

#radio

#select

#selectMulti

#text

#textInput

#xaction

#jpivot

#map

#mapBubble


check

Creates a  list of labeled checkboxes from the result set of the defined Action Sequence

regionCheck =

{

 name: "regionCheck",

 type: "check",

 solution: "dashboards",

 path: "sample_dashboard_components",

 action: "regions.xaction",

 parameters:\[\],

 parameter:"region",

 htmlObject: "object_check",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){}

}

dateInput

Creates a textbox with a connect date picker using the same calendar as adhoc component

dateInput =

{

 name: "dateInput",

 type: "dateInput",

 parameter:"dateStart",

 htmlObject: "object_dateInput",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){}

}

radio

Create a list of labeled radio buttons from the result set of the defined Action Sequence

regionRadio =

{

 name: "regionRadio",

 type: "radio",

 solution: "dashboards",

 path: "sample_dashboard_components",

 action: "regions.xaction",

 parameters:\[\],

 parameter:"region",

 htmlObject: "object_radio",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){}

}

select

Create a single select drop down list from the result set of defined Action Sequence

regionSelector =

{

 name: "regionSelector",

 type: "select",

 solution: "dashboards",

 path: "sample_dashboard_components",

 action: "regions.xaction",

 parameters:\[\],

 parameter:"region",

 htmlObject: "object_select",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){Dashboards.processChange(this.name);}

}

selectMulti

Create a multi select list from the result set of defined Action Sequence

regionSelectorMulti =

{

 name: "regionSelectorMulti",

 type: "selectMulti",

 solution: "dashboards",

 path: "sample_dashboard_components",

 action: "regions.xaction",

 parameters:\[\],

 parameter:"region",

 htmlObject: "object_multi",

 size: "4",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){}

}

text

Updates the text in a HTML String  using the expression

titleString =

{

 name: "regionVarianceBarChart",

 type: "text",

 listeners:\["region","dateStart"\],

 htmlObject: "text_object",

 executeAtStart: true,

 expression: function(){return "'Chosen region: ' + region + '; Start date: ' + dateStart"},

 preExecution:function(){},

 postExecution:function(){}

}

textInput

Creates a text imput field.

regionText =

{

 name: "regionText",

 type: "textInput",

 parameter:"region",

 htmlObject: "object_textInput",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){}

}

xaction

Excecutes a Action Sequence and displays the result in the HTML tag.

regionVarianceBarChart =

{

 name: "regionVarianceBarChart",

 type: "xaction",

 solution: "dashboards",

 path: "sample_dashboard_components",

 action: "RegionVarianceBarChart.xaction",

 listeners:\["region"\],

 parameters: \[\["REGION","region"\]\],

 htmlObject: "object_2",

 executeAtStart: false,
}

jpivot

Excecutes a JPivot Action Sequence and creates an iframe where the pivot table is embedded

pivot =
{
  name: "pivot",
  type: "jpivot",
  solution: "dashboards",
  path: dashBoardName,
  action: "Pivot.xaction",
  parameters:[["territory","territory"],["productLine","productLine"]],
  listeners:["territory","productLine"],
  htmlObject: "pivot_object",
  executeAtStart: true
}

map

Advanced component that supports openlayers map

TODO: Needs better documentation and examples

map =
	{
		name: "map",
		type: "map",
		solution: "dashboards",
		path: dashBoardName,
		action: "GetPoints.xaction",
		parameters:[["dateStart","dateStart"],["dateEnd","dateEnd"],["zonename","zone"]],
		listeners:["zone","topThreshold","bottomThreshold","dateStart","dateEnd"],
		messageElementId: "messages",
		evolutionElementId: "chart",
		htmlObject: "map",
		executeAtStart: true,
		initPosLon: -7.5,
		initPosLat: 39.8,
		initZoom: 7,
		expression: function(){return "var icon=''; if (value < bottomThreshold){icon = markers[2];} else if (value > topThreshold){icon = markers[0];} else {icon = markers[1];}; icon"},
		preExecution:function(){},
		postExecution:function(){},
		markers: ["js/OpenMap/OpenLayers/img/marker-green.png","js/OpenMap/OpenLayers/img/marker-gold.png","js/OpenMap/OpenLayers/img/marker.png"]
	}

mapBubble

A special component that displays chart when we click on it

table =
	{
		name: "table",
		type: "mapBubble",
		listeners:["selectedPoint"],
		solution: "dashboards",
		path: dashBoardName,
		action: "dial.xaction",
		executeAtStart: false,
		preExecution:function(){},
		postExecution:function(){}
	}
  • No labels

2 Comments

  1. When It's Time To Change, You've Got To Rearrange

    One item that may be helpful is the addition of a preChange and postChange function call. This can be particularly useful to set values or perform other operations after a component is changed. Try these steps and see if it works for you. I'd think these could be integrated into future releases of the framework if they prove out.

    1. In /pentaho/js/Dashboards.js add "object.preChange();" and "object.postChange();" in the processChange:function(object_name) section (approx line 319 and line 365), like this:

    processChange: function(object_name){
    		var object = eval(object_name);
    		var parameter = object.parameter;
    		var value;
    
    		//line below added
    		object.preChange();
    
    ...more code here...
    
    		this.fireChange(parameter,value);
    		//line below added
    		object.postChange();
    
    	},
    

    2. Then, in your template.html for each dashboard page, add "preChange:function(){}" and "postChange:function(){}" to each of your components as below. Note that you MUST add this for ALL your components once you've made the change above.

    SelectorMulti =
    {
      name: "SelectorMulti",
      type: "selectMulti",
      solution: "dashboards",
      path: "path_1",
      action: "selector.xaction",
      parameters:[],
      parameter:"selector",
      htmlObject: "object_multi",
      size: "10",
      executeAtStart: true,
      preExecution: function(){},
      postExecution: function(){},
      preChange:function(){},
      postChange:function(){}
    }
    

    3. You can now call a function directly (or add a function to your template.html) within the component setup like this:

    preChange: function(){alert('Running the preChange!')}
    
  2. Thank Kevin. That change will be in CDF 2.1