We just added Add-Ins support in CDF / CDE. This will have a great impact in both the development of the ctools but also in the usage



AddIns reference

AddIns are CDF's extension points. Can be used in any component to be able to fine-controlthat component and extend it in a very simple way
The use case for this concept is TableComponent's colType. Tables are a fundamental piece of dashboards / visualizations and there needs to be simple ways to extend the ways they are rendered
AddIn Implementation
In order to implement an AddIn, you need to create an object like the following:

var sparkline = {
name: "sparkline",
label: "Sparkline",
defaults: {
type: 'line'
},
implementation: function (tgt, st, opt) {
var t = $(tgt);
t.sparkline(st.value.split(/,/),opt);
t.removeClass("sparkline");
}
};

Dashboards.registerAddIn("Table", "colType", new AddIn(sparkline));
name, label, defaults and implementation are the important bitshere. This specific code is an implementation of a sparkline using the jquery plugin.


Setting options

Options are passed on a per component basis, usually in the component's preExecution function.It can either be a static list of options that will be merged with the defaults or a functionwhere the options change according to the state

function f(){

// Option 1 :Static list

this.setAddInOptions("colType","sparkline",{barColor: "red"});

// option 2: function
this.setAddInOptions("colType","sparkline",function(state){
// Let's turn the second sparkline into a bar
if(state.colIdx == "2"){
return { type:'bar'};
}
});
}
Setting defaults

It's also possible to ser a site-wide / dashboard wide defaults, and like the previousoption, can either be a static list or a function

Dashboards.setAddInDefaults("Table","colType","sparkline",{fillColor:"#aaa"});

Dashboards.setAddInDefaults("Table","colType","sparkline",function(state){
return state.rowIdx%2?{fillColor:"#aaa"}:{fillColor:"#fff"};
});

Implementation arguments

implementation function has the following arguments:

implementation: function (tgt, st, opt) {}
tgttarget - Target for the action. eg: On a cellType, it will be the td cell statestate - Information about the specific addin call. On a cellType will be an object with: {rawData, tableData, colIdx, rowIdx, series, category, value, colFormat} optoptions passed to this addIn
Calling AddIns from components

When developing a component, it's very easy to define a new AddIn type. Here's the examplethat TableComponent uses:

var addIn = myself.getAddIn("colType",colType);
addIn.call(td,state,myself.getAddInOptions("colType",addIn.getName()));
From this point on, there will be a new colType available to register.

Implemented AddIns:


  • sparkline
  • pvSparkline
  • dataBar
  • trendArrow
  • hyperlink


Here's some screenshots for the implemented addins. More details under cde_samples in the solution repository after installing ctools:

All credits to Brandon Jackson for sponsoring this huge develpment! /bow!


More...