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(){} }
2 Comments
user-2544b
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:
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.
3. You can now call a function directly (or add a function to your template.html) within the component setup like this:
user-64db4
Thank Kevin. That change will be in CDF 2.1