Hitachi Vantara Pentaho Community Wiki
Child pages
  • Components

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

Components Overview

Info
titleVersion 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.

...

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 yaction xaction within the solution 

 

String

 

action

Name of the xaction to be executed

 

String

 

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="f1217fcf-557c-4303-96df-2c4f2db6c6a8"><ac:plain-text-body><![CDATA[

listeners

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

[]

Array of Strings

 

]]></ac:plain-text-body></ac:structured-macro>

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="35b01142-a6d0-414c-ab3f-8c1985386f8b"><ac:plain-text-body><![CDATA[

valuesArray

Array of values for selectors

[]

Array of Strings

Multiple choice selector components

parameters

Parameters to execute the xaction

[]

Array of String arrays

 

]]></ac:plain-text-body></ac:structured-macro>

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

all  

postExecution

This Javascript function will be executed after the components executes

 

function

all

 

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:

...

#selectMulti

#text

#textInput

#xaction

#jpivot

#map

#mapBubble

...

check

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

...

Creates a textbox with a connect date picker . You can customize the date picker component the widgets files under js/dashboards

ToDo: Pedro please fill in details

using the same calendar as adhoc component

Code Block
JavaScript
JavaScript
dateInput =

{

 name: "dateInput",

 type: "dateInput",

 parameter:"dateStart",

 htmlObject: "object_dateInput",

 executeAtStart: true,

 preExecution:function(){},

 postExecution:function(){}

}

...

Code Block
JavaScript
JavaScript
regionSelector =

{

&nbsp; name: "regionSelector",

&nbsp; type: "select",

&nbsp; solution: "dashboards",

&nbsp; path: "sample_dashboard_components",

&nbsp; action: "regions.xaction",

&nbsp; parameters:\[\],

&nbsp; parameter:"region",

&nbsp; htmlObject: "object_select",

&nbsp; executeAtStart: true,

&nbsp; preExecution:function(){},

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

}

...

Code Block
JavaScript
JavaScript
regionSelectorMulti =

{

&nbsp; name: "regionSelectorMulti",

&nbsp; type: "selectMulti",

&nbsp; solution: "dashboards",

&nbsp; path: "sample_dashboard_components",

&nbsp; action: "regions.xaction",

&nbsp; parameters:\[\],

&nbsp; parameter:"region",

&nbsp; htmlObject: "object_multi",

&nbsp; size: "4",

&nbsp; executeAtStart: true,

&nbsp; preExecution:function(){},

&nbsp; postExecution:function(){}

}

...

Code Block
JavaScript
JavaScript
titleString =

{

&nbsp; name: "regionVarianceBarChart",

&nbsp; type: "text",

&nbsp; listeners:\["region","dateStart"\],

&nbsp; htmlObject: "text_object",

&nbsp; executeAtStart: true,

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

&nbsp; preExecution:function(){},

&nbsp; postExecution:function(){}

}

...

Code Block
JavaScript
JavaScript
regionText =

{

&nbsp; name: "regionText",

&nbsp; type: "textInput",

&nbsp; parameter:"region",

&nbsp; htmlObject: "object_textInput",

&nbsp; executeAtStart: true,

&nbsp; preExecution:function(){},

&nbsp; postExecution:function(){}

}

...

Code Block
JavaScript
JavaScript
regionVarianceBarChart =

{

&nbsp; name: "regionVarianceBarChart",

&nbsp; type: "xaction",

&nbsp; solution: "dashboards",

&nbsp; path: "sample_dashboard_components",

&nbsp; action: "RegionVarianceBarChart.xaction",

&nbsp; listeners:\["region"\],

&nbsp; parameters: \[\["REGION","region"\]\],

&nbsp; htmlObject: "object_2",

&nbsp; executeAtStart: false,

&nbsp; }

jpivot

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

Code Block
JavaScript
JavaScript

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

Code Block
JavaScript
JavaScript

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

&nbsp; 		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

Code Block
JavaScript
JavaScript

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

	}