AutocompleteBoxComponent

Description

Renders a auto complete box to choose the correct option from.

Options

name: The name of the component
type: autocompleteBox
parameter: Variable where the selection is stored
listeners: Array - Parameters who this component will react to
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
preChange: Function(value) - Function to be called before the component is changed
postChange: Function(value) - Function to be called after the component is changed
queryDefinition: MetaLayer object with the definition of the query (see MetaLayer options)
addTextElements: If true adds selected values bellow the input box. Default: true
selectMulti: Allow multiple selection. Default: false
minTextLength: The minimal word length to check if there is a match
matchType: The type of the word match (fromStart/all). Default: fromStart
scrollHeight: The size of the scrollbar. Default: Not defined (without scrollbar)
showApplyButton: Show apply Button in multi selection mode. Default: true
externalApplyButtonId: Id of a external button, to apply changes on the component.
tooltipMessage: Tooltip to be displayed when mouse hovers
autoUpdateFunction: Function to be called every X second according to the autoUpdateTimeout setting
autoUpdateTimeout: timeout in milliseconds to call the function defined by autoUpdateFunction. Default 3 secs
reloadOnUpdate: on update event the component should be reloaded or only update the list of values
silent: If true no UI blocking will happen on load and when fetching data

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/components/AutocompleteBoxComponent'
], function(Dashboard, AutocompleteBoxComponent) {

var dashboard = new Dashboard();

dashboard.addParameter("clients", "");
  
  dashboard.addComponent(new AutocompleteBoxComponent({

name: "autocompleteBox",
    type: "autocompleteBox",
    matchType: "fromStart",
    queryDefinition: {dataAccessId: "auto-complete", path: "/public/plugin-samples/pentaho-cdf/legacy/actions/data-for-samples.cda"},
    selectMulti: true,
    showApplyButton: true,
    minTextLength: 0,
    scrollHeight: 250,
    parameter: "clients",
    htmlObject: "sampleObject",
    reloadOnUpdate: true,
    autoUpdateTimeout: 3000,
    executeAtStart: true,
    silent: true,
    autoUpdateFunction: function() {

if(!this.dashboard.getParameterValue(this.parameter)) {
        this.dashboard.setParameter(this.parameter, "");
      }

if(this.dashboard.getParameterValue(this.parameter) != this._getTextBoxValue()) {
        this.dashboard.setParameter(this.parameter, this._getTextBoxValue());
        this.dashboard.update(this);
      }
    }
  }));

dashboard.init();

});