Components

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

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

Child pages

Components Overview

Properties

Property

Description

Default value (must be present)

Type

Required for

These componets have been implemented so far:

#check

#dateInput

#radio

#select

#selectMulti

#text

#textInput

#xaction

#jpivot

#map

#mapBubble