Widgets.Search / Result List
In addition to the Widgets.Base these options are available in the API for the Search Widget.
Rendering
itemTemplate
Specifies that a custom HTML template for each item should be used instead of the default one. Any of the custom templates uploaded with the custom widget can be assigned to this property directly.
afterInitialize: function () {
this.itemTemplate = this.customResources['myTemplate.html'];
},
Arguments
To see which parameters are passed into this template by default, you can use the following template for testing:
<%- JSON.stringify(arguments[0]) %>
Escaping
To show the title, which may include search highlighting, it is recommended to use the item.escape() method. This will generate escaped HTML, so it should be used with the <%= … %> syntax, instead of the usual <%- … %>. Example:
<h4>
<a href="<%- displayLink %>" rel="noopener noreferrer" class="js-link">
<%= item.escape('title') %>
</a>
</h4>
Example
An example template, which roughly reproduces the default item template behaviour, would look as follows:
NOTE Until Squirro 2.6.5, the displayLink parameter used to be called itemLink.
getItemTemplateParams
widget.getItemTemplateParams()
If implemented, and if itemTemplate is defined, the returned value of getItemTemplateParams() will be passed onto the HTML side.
getItemTemplateParams: function () {
return {
external_id: 1234,
};
},
getCustomItemDetailOptions
widget.getCustomItemDetailOptions()
Starting from Squirro 2.6.5, the item detail view which opens when clicking an item in the list, can be customised by implementing this method.
Customising the toolbar
To the right of the item detail panel, there is a toolbar which can be customised and extended.
It is possible to hide any default action, change its icon (note that the star action requires two icons), and add new actions to the toolbar.
All the icons are expected to be string identifiers of the icons from Material Design set (http://archives.materializecss.com/0.100.2/icons.html)
getCustomItemDetailOptions: function (options) {
var item = options.item;
return {
toolbar: {
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: () => {
// NOTE ES6 notation, convert to ES5 if targeting older browsers
// The item is accessible under options.item
},
after: 'print', // Can be any name as shown above (ie, star, email, link)
title: '', // Tooltip for the action
}
],
},
};
},
customDetailTemplate
Specifies that a custom HTML template to replace the existing Item Detail content. Any of the custom templates uploaded with the custom widget can be assigned to this property directly.
afterInitialize: function () {
this.customDetailTemplate = this.customResources['myTemplate.html'];
},
Arguments
To see which parameters are passed into this template by default, you can use the following template for testing:
<%- JSON.stringify(arguments[0]) %>
Escaping
To show the title, which may include search highlighting, it is recommended to use the item.escape() method. This will generate escaped HTML, so it should be used with the <%= … %> syntax, instead of the usual <%- … %>. Example:
<h4>
<a href="<%- displayLink %>" rel="noopener noreferrer" class="js-link">
<%= item.escape('title') %>
</a>
</h4>
Example
An example template, which reproduces the default item template behaviour, would look as follows:
NOTE Until Squirro 2.6.5, the displayLink parameter used to be called itemLink.
getCustomDetailTemplateParams
widget.getCustomDetailTemplateParams()
If implemented, and if customDetailTemplate is defined, the returned value of getCustomDetailTemplateParams() will be passed onto the HTML side.
getCustomDetailTemplateParams: function () {
return {
external_id: 1234,
};
},
customItemDetailHandler
If implemented, you can completely replace the '_onDetail' execution pattern with your own custom code used in conjunction with 'customItemDetailHandlerOptions'.
Internally we execute the following code:
_onDetail(e) {
const handler = this.options.customItemDetailHandler;
const handlerOptions = {
...this.options.customItemDetailHandlerOptions,
item: this.model,
};
const prehookResult = handler && handler(handlerOptions);
if (prehookResult) {
return;
}
// [... remaining code here for _onDetail]
}
customItemDetailHandlerOptions
If implemented, you can completely replace the '_onDetail' execution with your own custom code used in conjunction with 'customItemDetailHandler'.
onDetail
Helper function, called when showing the item detail view, it allows you to add additional code to the normal execution of opening an item.
onItemRendered
Helper function, called when after the item detail has finished rendering.