TemplateComponent

Description

This is a component that lets you define templates and render them using mustache or underscore, to easily display your data.
Like in the Table Component you can create and use addIns to further costumize and enhance the data you are displaying.

Options

name: The name of the component
type: TemplateComponent
parameter: Parameter to Prompt
listeners: Array - Parameters who this component will react to
parameters: Array of Arrays - Parameters to pass to the template
htmlObject: Id of the component (usually a div or a span tag) to be replaced by the result
refreshPeriod: Time in seconds for this component to refresh. Default is 0 (disabled)
executeAtStart: True to execute the component at start, false otherwise
preExecution: Function - Function to be called before the component is executed
postExecution: Function - Function to be called after the component is executed
chartDefinition: MetaLayer object with the definition of the query (see MetaLayer options)
tooltip: Tooltip to be displayed when mouse hovers
modelHandler: Function - Function to handle data for the model. Should return the model to be used on the template
template: Function - Function that returns a template to be used
templateType: Template library to use on render (mustache or underscore)
formatters: Array of Arrays - Used to format data. You must define an ID and a function that will return the formatted value
events: Array of Arrays - Events to trigger for each event
rootElement: Set the id of the root element of the model to render
extendableOptions: An object with propertied to extend the functionality of the component

MetaLayer options

queryType: Type of query to read results from. Can be sql or mdx. Default: mdx
jndi: Connection to use for the query
query: sql or mdx Query to execute
cube: Cube name to use when queryType is mdx
catalog: Mondrian schema to use when queryType is mdx

require(['cdf/Dashboard.Blueprint', 'cdf/dashboard/Utils', 'cdf/components/TemplateComponent'],
  function(Dashboard, Utils, TemplateComponent) {

var dashboard = new Dashboard();

dashboard.addComponent(new TemplateComponent({
    name: "template_component",
    type: "TemplateComponent",
    chartDefinition: {dataAccessId: "template", path: "/public/plugin-samples/pentaho-cdf/legacy/actions/data-for-samples.cda"},
    htmlObject: "sampleObject",
    executeAtStart: true,

parameters: [],
    modelHandler: "",
    template: function() {
      var template = ''+
        '<div class="templateWrapper clearfix">' +
        '   {{#items}} ' +
        '       <div class="templateRow">' +
        '           <div class="title"> {{0 | formatter : "reduceF"}} </div>' +
        '           <div class="desc"> {{0}} </div>' +
        '           <div class="value"> {{1 | formatter : "floatF"}} </div>' +
        '       </div>' +
        '   {{/items}} '+
        '</div>';
      return template;
    },
    templateType: "mustache",
    formatters: [
      ["floatF", function(value){
        return Utils.numberFormat(value, '0.0A');
      }],
      ["reduceF", function(value) {
        var arr = value.split(" ", 3);
        var result = "";
        for(var i = 0; i < arr.length; i++) {
          result += arr[i].charAt(0).toUpperCase();
        }
        return result;
      }]
    ],
    rootElement: "items",
    extendableOptions: ""
  }));

dashboard.init();
});