Core Widgets

Contents

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#

static Base.afterInitialize()#

Fires after the widget initialization completes.

Examples:

afterInitialize: () => {

},
static 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#

static 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;
},
static 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,
    };
},
static 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;
},
static Base.afterSetup()#

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

Examples:

afterSetup: () => {

},

Rendering stage#

static 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
},
static 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.

static Base.beforeRender()#

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

Examples:

beforeRender: () => {

},
static 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,
    };
},
static 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]);
%>
static 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'),
    };
},
static 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;
}
static 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#

static 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',
    };
}
static Base.resize()#

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

Examples:

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

Resets the selections fired from this widget.

Examples:

this.reset();
static 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#

static 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
},
static 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: () => {

},
static 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: () => {

},
static Base.refreshIfVisible()#

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

Examples:

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

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

Examples:

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

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

Examples:

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

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

Examples:

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

Checks whether widget’s section is currently visible.

Returns:

Bool –

Examples:

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

Translates a string according to the Project Translations

Examples:

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

Cards#

UI Widget Name: Cards

Rendering stage#

static 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]);
%>
static 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]);
%>
static 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,
    };
},
static 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,
    };
},
static Cards.onItemRendered()#

Fires each time after any of the items have been rendered

Examples:

onItemRendered: () => {

},

Refresh stage#

static 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'];
static 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

static 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.

static Cards.ToolbarProperty()#
Arguments:
static 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

static 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,
    };
},
static 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#

static 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#

static 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:

  • payload (PostprocessDataPayload) – The data payload to be processed

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.<string>) – Labels of the X axis points

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

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

class Connection()#

Highcharts#

A pure API widget containing the scaffolding for a Highcharts chart

Rendering stage#

static 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.

static 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#

static 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]);
%>
static 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'))
%>
static 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]);
%>
static 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,
    };
},
static 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,
    };
},
static 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,
    };
},
static 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.<ToolbarCustomElementProperty>) – 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.

static FacetsTable.onDetail()#

Fires after the detail view has been opened

Examples:

onDetail: () => {

},
static 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#

static 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]);
%>
static 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]);
%>
static 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,
    };
},
static 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,
    };
},
static Keywords.rowVisibilityCallback(Options)#

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

Arguments:

  • Options (VisibilityCallbackOptions) – passed to the callback

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#

static 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]);
%>
static 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#

static 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]);
%>
static 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,
    };
},
static 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']
static 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()#
static 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#

static 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#

static 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]);
%>
static 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#

static 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]);
%>
static 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#

static SearchQuery.onTypeaheadAutocompleted()#

Fires after the typeahead value is autocompleted in the search bar

Examples:

onTypeaheadAutocompleted: () => {

},
static 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.

Contents