Hitachi Vantara Pentaho Community Wiki
Child pages
  • Components
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 12 Next »

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

 

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="0bee753a-1cfd-4943-91a9-5af80957edd8"><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="9661e929-6411-4494-8b8e-e8d8573d2040"><ac:plain-text-body><![CDATA[

valuesArray

Array of values for selectors

[]

Array of Strings

Multiple choice selector components

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

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="d03c4c80-4424-4cbf-acaa-49713a4c8ec0"><ac:plain-text-body><![CDATA[

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

 

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