Access Keys:
Skip to content (Access Key - 0)

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(){}
	}

Comments (2)

 

  1. Jun 20, 2008

    Kevin Haas says:

    When It's Time To Change, You've Got To Rearrange One item that may be helpful ...

    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. Jul 09, 2008

    Pedro Alves says:

    Thank Kevin. That change will be in CDF 2.1

    Thank Kevin. That change will be in CDF 2.1

This documentation is maintained by the Pentaho community, and members are encouraged to create new pages in the appropriate spaces, or edit existing pages that need to be corrected or updated.

Please do not leave comments on Wiki pages asking for help. They will be deleted. Use the forums instead.
Adaptavist Theme Builder (4.2.0) Powered by Atlassian Confluence 3.3.3, the Enterprise Wiki