Core Widgets#

Base#

All widgets extend this class, together with its methods. See ../life-cycle for a description of the widget life cycle stages below.

Initialization stage#

Base.afterInitialize()#

Fires after the widget initialization completes.

Examples:

afterInitialize: () => {

},
Base.registerPrefetch()#

Registers a data prefetch for the current widget. Accepts a Backbone Model/Collection and ensures it will be fetched like other models right before the rendering stage.

Examples:

this._myModel = new Backbone.Model.extend({ url: 'https://foo' })();
this.registerPrefetch(this._myModel);

afterRender: () => {
    console.log(this._myModel.toJSON()); // Model is fetched
}

Setup stage#

Base.getCollection()#

Return the main collection that will be rendered by this widget. The default returns an ItemCollection() (can be created using the ItemFactory()) using the parameters returned from getCollectionParams() (the behavior of which can be extended using getCustomCollectionParams()). This method can be overwritten to return a different collection (see Factories for how to instantiate collections).

Examples:

getCollection: () => {
    var factory = Factories.Collections.Aggregations;
    var collection = factory.create('MyAggregation', this.getCollectionParams());
    return collection;
},
Base.getCustomCollectionParams()#

Pass additional, custom params object to the collection before its initialization.

Returns

Object – Object that will be passed into the collection

Examples:

getCustomCollectionParams: () => {
    return {
        magicNumber: 1234,
    };
},
Base.getCustomCollectionComparator()#

Pass a custom comparator to the collection before its initialization.

Returns

function – Object that will be passed into the collection

Examples:

getCustomCollectionComparator: () => {
    return myComparator;
},
Base.afterSetup()#

Fires after the widget setup completes. This stage means that collection has been instantiated but not loaded.

Examples:

afterSetup: () => {

},

Rendering stage#

Base.isEmpty()#

Fires when the widget determines whether it is in an empty state. By default, widgets in an empty state are not rendered, and the empty state is shown to the user instead. See statusTemplate() for details.

The default implementation considers the widget to be empty when the collection does not contain any items.

Expects to return a truthy or a falsy value.

Returns

Bool – Whether the widget is empty

Examples:

isEmpty: () => {
    return false; // Widget is never empty
},
Base.statusTemplate(statusMessage, useEmptyImage, emptyImageUrl)#

Use a custom HTML template to render a message when the widget does not have any data. This is used when the isEmpty() method returns false. The template is a underscore.js template.

Typically a template will be assigned by using a custom resource:

this.statusTemplate = this.customResources['status.html'];

The project creator can toggle an image to be displayed as part of this status message by enabling the Show image when empty option. When that option is set, the status template is passed the additional options useEmptyImage and emptyImageUrl.

Arguments

  • statusMessage (string()) – The default internationalized message.

  • useEmptyImage (bool()) – True if the project creator opted to show an image for the empty status.

  • emptyImageUrl (string()) – The URL to the empty image.

Base.beforeRender()#

Fires before the widget render completes. This stage means that collection has been loaded, but rendering is not done yet.

Examples:

beforeRender: () => {

},
Base.getCustomChartOptions()#

Pass a custom params object to the chart.

Returns

Object – Object that will be passed into the chart

Examples:

getCustomChartOptions: () => {
    return {
        magicNumber: 1234,
    };
},
Base.customWidgetTemplate()#

Use a custom HTML template to render the contents of this widget. The template is a underscore.js template.

In most cases it is better to put the template into the file widget.html. That file is automatically used as the widget template, unless overwritten with this custom widget template property.

Typically a template will be assigned by using a custom resource:

this.customWidgetTemplate = this.customResources['custom_widget.html'];

To see which parameters are passed into this template by default, use the following in the template:

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Base.getCustomTemplateParams()#

Returns an object which will be passed to the default custom template (widget.html)

Returns

function – Object that will be passed into the custom template

Examples:

getCustomTemplateParams: () => {
    return {
        param: this.model.get('param'),
    };
},
Base.overrideChartOptions(getter)#

Allows overriding the Highcharts chart options for Highcharts widgets. Gets passed in a function, which should be called to retrieve the default options. The received object should be returned after modifications.

Arguments

  • getter (function()) – The default options getter function

Returns

Object – The final Highcharts chart definition

Examples:

overrideChartOptions: (getter) => {
    const options = getter();
    options.chart.backgroundColor = 'orange';
    return options;
}
Base.afterRender()#

Fires after the widget render completes. This stage means that collection has been loaded and the rendering is over.

Examples:

afterRender: () => {

},

Interaction stage#

Base.getCustomEvents()#

Returns a list of custom events the widget uses, in a dictionary format, where keys are events and element selectors, and values the names of handler functions. This matches the events handling format of Backbone.js.

Examples:

getCustomEvents() {
    return {
        'click .my-button': 'onClickMyButton',
    };
}
Base.resize()#

Forces a resize of the chart to the current widget dimensions.

Examples:

this.resize();
Base.reset()#

Resets the selections fired from this widget.

Examples:

this.reset();
Base.select(facet, value)#

Fires a query from the current widget, drilling down the dashboard.

Arguments

  • facet (String()) – Facet name, or null if only selection string was used

  • value (String()) – Facet value, or the selection string if widget supports it

Examples:

this.select('Facet', 'Value'); // For facet based widgets (with Facet in their configuration)
this.select('squirro'); // For other widgets

Refresh stage#

Base.onSearchChange()#

Fires when the dashboard query has changed. The widget needs to be on a visible layer (according to the newly changed search) to receive this event.

Examples:

onSearchChange: () => {
    this.refreshWidget(); // Default implementation
},
Base.onTimeSearchChange()#

Fires when the dashboard time restriction has changed. The widget needs to be on a visible layer (according to the newly changed search) to receive this event.

Examples:

onTimeSearchChange: () => {

},
Base.onStoreChange()#

Fires when the dashboard store has changed. The widget needs to be on a visible layer (according to the newly changed store) to receive this event.

Examples:

onStoreChange: () => {

},
Base.refreshIfVisible()#

Refreshes the widget, if on a visible layer. Usage recommended when possible due performance gains.

Examples:

this.refreshIfVisible();
Base.refreshWidget()#

If needed, refetches the current widget’s collection and rerenders.

Examples:

this.refreshWidget();
Base.refresh()#

Forces the refetch of current widget’s collection and rerenders.

Examples:

this.refresh();
Base.updateChart()#

Rerenders the current widget. Does NOT perform a refetch of the collection.

Examples:

this.updateChart();
class Base()#
Base.isSectionVisible()#

Checks whether widget’s section is currently visible.

Returns

Bool –

Examples:

onStoreChange: () => {
    if (this.isSectionVisible()) {
         // Perform action
    }
},
Base.translate()#

Translates a string according to the Project Translations

Examples:

getTemplateParams() {
    return {
        translatedKey: this.translate(key),
    };
}

Cards#

UI Widget Name: Cards

Rendering stage#

Cards.customCtaTemplate()#

Customize the template html of the CTA part of the card. The template is a underscore.js template.

Examples:

this.customCtaTemplate = this.customResources['cta.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Cards.customDateFormat()#

Customize the date format displayed, and used for grouping cards if enabled. See ISO 8601 for the possible format letters in this string.

Examples:

this.customDateFormat = 'YYYY-MM-DD';
Cards.itemTemplate#

type: template

Customize per item template html. The template is a underscore.js template.

This is usually used with this.customResources to assign an included template:

this.itemTemplate = this.customResources['item.html'];

The following is an example horizontal mode template, which roughly reproduces the default item template behaviour:

<div class="item card">
    <div class="detail js-detail">
        <div class="detail-body js-open">
            <% if (showTitleAndMetadata) { %>
                <h4 class="title no-margin js-title">
                    <%= item.escape('title') || $.t('item:untitled') %>
                </h4>
                <h5 class="additional ellipsis">
                    <span class="date" data-item="<%- item.id %>"><%- displayTime %></span>
                    <span class="additional-title">
                        <%- item.getDisplayLink() %>
                    </span>
                </h5>
            <% } %>
            <% if (showAbstract) { %>
                <div class="abstract">
                    <%= abstract %>
                </div>
            <% } %>
            <div class="keywords-placeholder"></div>
        </div>
        <div class="tweet-placeholder hide"></div>
    </div>
</div>

To show the title, which may include search highlighting, it is recommended to use the item.escape() method:

<h4>
    <a href="<%- displayLink %>" rel="noopener noreferrer" class="js-link">
        <%= item.escape('title') %>
    </a>
</h4>

To see which parameters are passed into this template by default, use the following in the template:

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Cards.getCustomCtaTemplateParams()#

Pass a custom params object to the custom CTA part of the card template

Returns

Object – Object that will be passed into the template

Examples:

getItemTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
Cards.getItemTemplateParams()#

Pass a custom params object to the custom item template

Returns

Object – Object that will be passed into the template

Examples:

getItemTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
Cards.onItemRendered()#

Fires each time after any of the items have been rendered

Examples:

onItemRendered: () => {

},

Refresh stage#

Cards.onDetail()#

Fires after the detail view has been opened

Examples:

onDetail: () => {

},
class Cards()#
Cards.customDetailTemplate#

type: template

Customize item detail template html. The template is a underscore.js template.

Examples:

this.customDetailTemplate = this.customResources['detail.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
<%=
    // To show the highlighted item body
    item.highlight('body', item.get('body'))
%>
Cards.injectedContentTemplate#

type: template

Customize injected content template html. The template is a underscore.js template.

This is usually used with this.customResources to assign an included template:

this.injectedContentTemplate = this.customResources['custom.html'];
Cards.ToolbarCustomElementProperty()#
Arguments

  • icon (string()) – identifier of the icon from Material.io framework

  • handler (function()) – handler for the click

  • after (string()) – identifier of element after wich to place the custom one, eg. ‘print’

  • title (string()) – content of the tooltip of the custom element

Cards.ToolbarElementProperty()#
Arguments

  • hide (boolean()) – whether to hide or show the element

  • icon (string()) – identifier of the icon from Material.io framework. Refer to the Material.io Icons reference.

Cards.ToolbarProperty()#
Arguments
Cards.ToolbarStarElementProperty()#
Arguments

  • hide (boolean()) – whether to hide or show the element

  • iconStarred (string()) – identifier of the icon from Material.io framework

  • iconUnstarred (string()) – identifier of the icon from Material.io framework

Cards.getCustomDetailTemplateParams()#

Pass a custom params object to the custom item detail template. This function gets called during every repaint of the item detail.

Returns

Object – Object that will be passed into the template

Examples:

getCustomDetailTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
Cards.getCustomItemDetailOptions(options)#

Customize the item detail. Currently allows changing the toolbar elements in the item detail view.

Arguments

  • options (Object()) – Input options

Returns

ToolbarProperty – Configuration object for the item detail

Examples:

getCustomItemDetailOptions: (options) => {
    var item = options.item;

    return {
        toolbar: {
            compare: {
                hide: false,
                icon: '',
            },
            translate: {
                hide: false,
                icon: '',
            },
            star: {
                hide: false,
                iconStarred: '',
                iconUnstarred: '',
            },
            email: {
                hide: false,
                icon: '',
            },
            link: {
                hide: false,
                icon: '',
            },
            print: {
                hide: false,
                icon: '',
            },
            smartfilter: {
                hide: false,
                icon: '',
            },
            tags: {
                hide: false,
                icon: '',
            },
            explain: {
                hide: false,
                icon: '',
            },
            stlToggle: {
                hide: false,
                icon: '',
            },
            // Custom actions
            custom: [
                {
                    icon: '',
                    handler: () => {
                    },
                    after: 'print', // Can be any name as shown above (ie, star, email, link)
                    title: '', // Tooltip for the action
                }
            ],
        },
    };
},

ChoroplethMap#

UI Widget Name: Region Map

Interaction stage#

ChoroplethMap.onRegionClick(e)#

Fires after a region has been clicked on the map

Arguments

  • e (Event()) – The click event data, including the region clicked

Examples:

onRegionClick: (e) => {

},
class ChoroplethMap()#

Connection#

UI Widget Name: Heat Map

Rendering stage#

Connection.postProcessData(payload)#

If implemented, will be called just before the data is about to be displayed, allowing the cells to be changed, new rows and columns to be added, and sorting to be performed

Arguments
Returns

PostprocessDataPayload – The procesed data payload, in same format

Examples:

postProcessData: (payload) => {
    payload.labelsX.sort();
    payload.matrix[0][1] = 1;
    payload.matrix.push([1, 2, 3, 4]);
    return payload;
},
class Connection.PostprocessDataPayload()#
Arguments

  • labelsX (Array.) – Labels of the X axis points

  • labelsY (Array.) – Labels of the Y axis points

  • matrix (Array.) – The 2D matrix containing heatmap data

class Connection()#

Highcharts#

A pure API widget containing the scaffolding for a Highcharts chart

Rendering stage#

Highcharts.getDefinition()#

Provides the Highcharts chart configuration object

Examples:

getDefinition: function () {
    return {
         // Highcharts definition goes here
         // In Hichcharts demos, it's the object passed into
         // the Highcharts.chart call (second parameter)
    };
},

Interaction stage#

Highcharts.SELECT_QUERIES#

type: Bool

Toggles the selecting queries mode, as opposed to the facets mode. This is off by default (false).

In queries mode (true), the select() method takes one argument (query). In the default facets mode it takes two arguments.

Highcharts.select(query)#

Fires a query from the current widget, drilling down the dashboard. The method signature depends on SELECT_QUERIES. If SELECT_QUERIES is enabled (true), then the parameter is a full Squirro query. The following call is then supported:

this.select('full text query');

In all other cases, this method behaves the same as in the base class, see select().

Arguments

  • query (String()) – Query to apply

class Highcharts()#

FacetsHistogram#

UI Widget Name: Line Chart

Interaction stage#

FacetsHistogram.INCLUDE_ADDITIONAL_QUERY#

type: boolean

Enable the additional query to be passed to the entire dashboard on selection. Defaults to true.

class FacetsHistogram()#

FacetsTable#

UI Widget Name: Facets Table

Rendering stage#

FacetsTable.customCellTemplate()#

Customize table cell template html. The template is a underscore.js template.

Examples:

this.customCellTemplate = this.customResources['cell.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
FacetsTable.customDetailTemplate()#

Customize item detail template html. The template is a underscore.js template.

Examples:

this.customDetailTemplate = this.customResources['detail.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
<%=
    // To show the highlighted item body
    item.highlight('body', item.get('body'))
%>
FacetsTable.customHeaderTemplate()#

Customize table header template html. The template is a underscore.js template.

Examples:

this.customHeaderTemplate = this.customResources['header.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
FacetsTable.getCustomCellTemplateParams()#

Pass a custom params object to the custom cell template

Returns

Object – Object that will be passed into the template

Examples:

getCustomCellTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
FacetsTable.getCustomDetailTemplateParams()#

Pass a custom params object to the custom detail template

Returns

Object – Object that will be passed into the template

Examples:

getCustomDetailTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
FacetsTable.getCustomHeaderTemplateParams()#

Pass a custom params object to the custom header template

Returns

Object – Object that will be passed into the template

Examples:

getCustomHeaderTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
FacetsTable.getCustomItemDetailOptions(options)#

Customize the item detail. Currently allows changing the toolbar elements in the item detail view.

Arguments

  • options (Object()) – Input options

Returns

ToolbarProperty – Configuration object for the item detail

Examples:

getCustomItemDetailOptions: (options) => {
    var item = options.item;

    return {
        toolbar: {
            compare: {
                hide: false,
                icon: '',
            },
            translate: {
                hide: false,
                icon: '',
            },
            star: {
                hide: false,
                iconStarred: '',
                iconUnstarred: '',
            },
            email: {
                hide: false,
                icon: '',
            },
            link: {
                hide: false,
                icon: '',
            },
            print: {
                hide: false,
                icon: '',
            },
            smartfilter: {
                hide: false,
                icon: '',
            },
            tags: {
                hide: false,
                icon: '',
            },
            explain: {
                hide: false,
                icon: '',
            },
            stlToggle: {
                hide: false,
                icon: '',
            },
            // Custom actions
            custom: [
                {
                    icon: '',
                    handler: () => {
                    },
                    after: 'print', // Can be any name as shown above (ie, star, email, link)
                    title: '', // Tooltip for the action
                }
            ],
        },
    };
},
class FacetsTable.ToolbarProperty()#
Arguments

  • compare (Search.ToolbarElementProperty()) – properties of the compare element

  • translate (Search.ToolbarElementProperty()) – properties of the translate element

  • star (ToolbarStarElementProperty()) – properties of the star element

  • email (ToolbarElementProperty()) – properties of the email element

  • link (ToolbarElementProperty()) – properties of the link element

  • print (ToolbarElementProperty()) – properties of the print element

  • smartfilter (ToolbarElementProperty()) – properties of the smartfilter element

  • tags (ToolbarElementProperty()) – properties of the tags element

  • explain (ToolbarElementProperty()) – properties of the explain element

  • stlToggle (ToolbarElementProperty()) – properties of the 3D STL element

  • custom (Array.) – properties of the custom element

class FacetsTable.ToolbarElementProperty()#
Arguments

  • hide (boolean()) – whether to hide or show the element

  • icon (string()) – identifier of the icon from Material.io framework. Refer to the Material.io Icons reference.

class FacetsTable.ToolbarStarElementProperty()#
Arguments

  • hide (boolean()) – whether to hide or show the element

  • iconStarred (string()) – identifier of the icon from Material.io framework

  • iconUnstarred (string()) – identifier of the icon from Material.io framework

class FacetsTable.ToolbarCustomElementProperty()#
Arguments

  • icon (string()) – identifier of the icon from Material.io framework

  • handler (function()) – handler for the click

  • after (string()) – identifier of element after wich to place the custom one, eg. ‘print’

  • title (string()) – content of the tooltip of the custom element

Interaction stage#

FacetsTable.disableClicks#

type: boolean

Allows disabling clicks on the table rows. Defaults to false.

FacetsTable.onDetail()#

Fires after the detail view has been opened

Examples:

onDetail: () => {

},
FacetsTable.onRowClick(e, model)#

Fires after the table row has been clicked.

Arguments

  • e (Event()) – The click event data, including the item in row being clicked

  • model (Model()) – The model associated with the row

Examples:

onRowClick: (e, model) => {

},
class FacetsTable()#

Keywords#

UI Widget Name: Table

Rendering stage#

Keywords.customCellTemplate()#

Customize table cell template html. The template is a underscore.js template.

Examples:

this.customCellTemplate = this.customResources['cell.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Keywords.customHeaderTemplate()#

Customize table header template html. The template is a underscore.js template.

Examples:

this.customHeaderTemplate = this.customResources['header.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Keywords.getCustomCellTemplateParams()#

Pass a custom params object to the custom cell template

Returns

Object – Object that will be passed into the template

Examples:

getCustomCellTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
Keywords.getCustomHeaderTemplateParams()#

Pass a custom params object to the custom header template

Returns

Object – Object that will be passed into the template

Examples:

getCustomHeaderTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
Keywords.rowVisibilityCallback(Options)#

Allows hiding rows dynamically by returning true (visible) or false (invisible)

Arguments
Returns

bool – Whether the row should be visible

Examples:

rowVisibilityCallback: (options) => {
    return options.facet !== 'hidethisfacet' && options.value !== 'hidethisvalue';
},
class Keywords.VisibilityCallbackOptions()#
Arguments

  • facet (string()) – the facet associated with the row

  • value (string()) – the value associated with the row

class Keywords()#

Map#

UI Widget Name: World Map

Rendering stage#

Map.customMarkerPopupTemplate()#

Customize custom HTML template for map marker popup. The template is a underscore.js template.

Examples:

this.customMarkerPopupTemplate = this.customResources['popup.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Map.getCustomMarkerPopupTemplateParams()#

Pass a custom params object to the custom map marker popup.

Returns

Object – Object that will be passed into the template

Examples:

getCustomMarkerPopupTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
class Map()#

Recommendations#

UI Widget Name: Recommendations

Rendering stage#

Recommendations.itemTemplate()#

Customize per item template html. The template is a underscore.js template.

Examples:

this.itemTemplate = this.customResources['item.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Recommendations.getItemTemplateParams()#

Pass a custom params object to the custom item template

Returns

Object – Object that will be passed into the template

Examples:

getItemTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
Recommendations.onItemRendered()#

Fires each time after any of the items have been rendered

Examples:

onItemRendered: () => {

},

Interaction stage#

Recommendations.additionalReturnedFeatures#

type: Array.<string>

Allow extra return_features to be used inside customCardActions

Examples:

additionalReturnedFeatures: ['Sector', 'Industry']
Recommendations.customCardActions()#

Allow custom actions to be added to the card. Display a Materialize icon OR custom HTML and provide an action callback.

Examples:

customCardActions: [
     {
         iconName: 'search',
         action: function(ev, model, widgetModel) {
             // How to get additionalReturnedFeatures from the API
             // 'model' is the recommendation model
             // 'Sector' and 'Industry' are fetched below by passing them
             // into the additionalReturnedFeatures property
             // Now they exist on our model.
             console.log(model.get('return_features').Sector);
             console.log(model.get('return_features').Industry);

             // widgetModel is the widget model as a JSON object.
             // You can get your widget properties or custom widget properties
             // which you define in your config.json in a custom widget
             console.log(widgetModel.customName);
         },
     },
],
class Recommendations()#
Recommendations.CustomCardAction()#
Arguments

  • iconName (string()) – icon identifier from Material.io framework

  • action (function()) – action to be fired

RecommendationsEvents#

UI Widget Name: REC Events

Rendering stage#

RecommendationsEvents.ALLOW_EMPTY_TARGET_VALUE()#

Allows the target value to be empty, thus showing empty state in the widget. Defaults to false.

class RecommendationsEvents()#

Reset#

UI Widget Name: Reset

Rendering stage#

Reset.customListItemTemplate()#

Customize the reset list item HTML template. The template is a underscore.js template.

Examples:

this.customListItemTemplate = this.customResources['item.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
Reset.getCustomListItemTemplateParams()#

Pass a custom params object to the custom reset list item template

Returns

Object – Object that will be passed into the template

Examples:

getCustomListItemTemplateParams: () => {
    return {
        magicNumber: 1234,
    };
},
class Reset()#

SearchQuery#

UI Widget Name: Search Bar

Rendering stage#

SearchQuery.customTypeaheadTemplateFacet()#

Customize custom HTML template for facets typeahead. The template is a underscore.js template.

Examples:

this.customTypeaheadTemplateFacet = this.customResources['facet.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>
SearchQuery.customTypeaheadTemplateSavedsearch()#

Customize custom HTML template for saved searches typeahead. The template is a underscore.js template.

Examples:

this.customTypeaheadTemplateSavedsearch = this.customResources['savedSearch.html'];

<%
    // To see which parameters are passed into this template by default, use the following in the template
    console.log(arguments[0]);
%>

Interaction stage#

SearchQuery.onTypeaheadAutocompleted()#

Fires after the typeahead value is autocompleted in the search bar

Examples:

onTypeaheadAutocompleted: () => {

},
SearchQuery.onTypeaheadSelected()#

Fires after the typeahead value is selected in the search bar

Examples:

onTypeaheadSelected: () => {

},
class SearchQuery()#

Static#

This is a base widget class for widget that do not require a item collection. For performance reasons this should be used when the item collection is not being used.

class Static()#

A base dashboard widget without any data.