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#
- 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 theItemFactory()
) using the parameters returned fromgetCollectionParams()
(the behavior of which can be extended usinggetCustomCollectionParams()
). 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 usedvalue (
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 frameworkhandler (
function()
) – handler for the clickafter (
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 elementicon (
string()
) – identifier of the icon from Material.io framework. Refer to the Material.io Icons reference.
- Cards.ToolbarProperty()#
- Arguments
compare (
Search.ToolbarElementProperty()
) – properties of the compare elementtranslate (
Search.ToolbarElementProperty()
) – properties of the translate elementstar (
Cards.ToolbarStarElementProperty()
) – properties of the star elementemail (
Cards.ToolbarElementProperty()
) – properties of the email elementlink (
Cards.ToolbarElementProperty()
) – properties of the link elementprint (
Cards.ToolbarElementProperty()
) – properties of the print elementsmartfilter (
Cards.ToolbarElementProperty()
) – properties of the smartfilter elementtags (
Cards.ToolbarElementProperty()
) – properties of the tags elementexplain (
Cards.ToolbarElementProperty()
) – properties of the explain elementstlToggle (
Cards.ToolbarElementProperty()
) – properties of the 3D STL elementcustom (
Array.
) – properties of the custom element
- Cards.ToolbarStarElementProperty()#
- Arguments
hide (
boolean()
) – whether to hide or show the elementiconStarred (
string()
) – identifier of the icon from Material.io frameworkiconUnstarred (
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
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.
) – Labels of the X axis pointslabelsY (
Array.
) – Labels of the Y axis pointsmatrix (
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 elementtranslate (
Search.ToolbarElementProperty()
) – properties of the translate elementstar (
ToolbarStarElementProperty()
) – properties of the star elementemail (
ToolbarElementProperty()
) – properties of the email elementlink (
ToolbarElementProperty()
) – properties of the link elementprint (
ToolbarElementProperty()
) – properties of the print elementsmartfilter (
ToolbarElementProperty()
) – properties of the smartfilter elementtags (
ToolbarElementProperty()
) – properties of the tags elementexplain (
ToolbarElementProperty()
) – properties of the explain elementstlToggle (
ToolbarElementProperty()
) – properties of the 3D STL elementcustom (
Array.
) – properties of the custom element
- class FacetsTable.ToolbarElementProperty()#
- Arguments
hide (
boolean()
) – whether to hide or show the elementicon (
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 elementiconStarred (
string()
) – identifier of the icon from Material.io frameworkiconUnstarred (
string()
) – identifier of the icon from Material.io framework
- class FacetsTable.ToolbarCustomElementProperty()#
- Arguments
icon (
string()
) – identifier of the icon from Material.io frameworkhandler (
function()
) – handler for the clickafter (
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 clickedmodel (
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
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 rowvalue (
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); }, }, ],
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()#
Search#
UI Widget Name: Result List
Rendering stage#
- Search.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')) %>
- Search.itemTemplate()#
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 template, which roughly reproduces the default item template behaviour:
<div class="item-link js-link"> <div class="inner-content"> <h4> <%= item.escape('title') || $.t('item:untitled') %> </h4> <h5 class="additional-info ellipsis"> <%- displayTime %> · <%- displayLink %> </h5> <div class="abstract"> <%= abstract %> </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]); %>
- Search.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, }; },
- Search.getCustomItemDetailHandlerOptions()#
Pass a custom params object to the custom item detail handler
- Returns
Object – Object that will be passed into the handler
Examples:
getCustomItemDetailHandlerOptions: () => { return { magicNumber: 1234, }; },
- Search.getCustomItemDetailOptions(options)#
Customize the item detail. Currently allows changing the toolbar elements in the item detail view.
- Arguments
options (
Object()
) – Input options
- Returns
Search.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 } ], }, }; },
- Search.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, }; },
- class Search.onItemRendered()#
Fires each time after any of the items have been rendered
Examples:
onItemRendered: () => { },
- class Search.ToolbarProperty()#
- Arguments
compare (
Search.ToolbarElementProperty()
) – properties of the compare elementtranslate (
Search.ToolbarElementProperty()
) – properties of the translate elementstar (
Search.ToolbarStarElementProperty()
) – properties of the star elementemail (
Search.ToolbarElementProperty()
) – properties of the email elementlink (
Search.ToolbarElementProperty()
) – properties of the link elementprint (
Search.ToolbarElementProperty()
) – properties of the print elementsmartfilter (
Search.ToolbarElementProperty()
) – properties of the smartfilter elementtags (
Search.ToolbarElementProperty()
) – properties of the tags elementexplain (
Search.ToolbarElementProperty()
) – properties of the explain elementstlToggle (
Search.ToolbarElementProperty()
) – properties of the 3D STL elementcustom (
Array.
) – properties of the custom element
- class Search.ToolbarElementProperty()#
- Arguments
hide (
boolean()
) – whether to hide or show the elementicon (
string()
) – identifier of the icon from Material.io framework. Refer to the Material.io Icons reference.
- class Search.ToolbarStarElementProperty()#
- Arguments
hide (
boolean()
) – whether to hide or show the elementiconStarred (
string()
) – identifier of the icon from Material.io frameworkiconUnstarred (
string()
) – identifier of the icon from Material.io framework
- class Search.ToolbarCustomElementProperty()#
- Arguments
icon (
string()
) – identifier of the icon from Material.io frameworkhandler (
function()
) – handler for the clickafter (
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#
- Search.customItemDetailHandler()#
Defines a custom handler which determines if the detail view should be opened. If defined, is expected to return true if view should not be opened, and false otherwise.
- Returns
Boolean – Whether the detail view should be blocked.
Examples:
customItemDetailHandler: () => { return false; }
- Search.onDetail()#
Fires after the detail view has been opened
Examples:
onDetail: () => { },
- class Search()#
- Search.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'];
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.