FAQ

FAQ#

Is it possible to include additional external JavaScript libraries?#

Yes, there are a couple of methods to achieve this.

Method 1#

You can leverage the customResources property. Inside the afterInitialize() method, add

new Function(this.customResources['jquery-ui.js'])();

Include this snippet in your afterInitialize() method to avoid initialising the library in every widget render() call.

Method 2#

Warning

This method has not been extensively tested and approved!

afterInitialize() {
    window.eval(this.customResources['main.min.js']);

    this.customResources['main.css']();
},

render() {
    var rendered = Widgets.Base.prototype.render.apply(this, arguments);

    if (rendered) {

        var calendarEl = this.$('#calendar')[0];
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
    }

    return rendered;
}

How to upload a widget to the server?#

A custom widget can be uploaded to a specific Squirro instance using the squirro_asset command line tool. The recommended way consists of creating create a script (e.g., upload.sh) inside the dashboard/widgets folder with this content:

#!/bin/bash

cd $(dirname $0)

set -e

source ../../common/config/config.sh

if [ -z "$1" ]; then
    folders=*/
else
    folders=$@
fi

for folder in $folders; do
    widget=${folder/\//}
    squirro_asset -v widget upload --token $TOKEN --cluster $CLUSTER -f $widget
done

For example, to upload a custom widget contained in a directory called heatmap_plus, one would execute this command:

$ ./upload.sh heatmap_plus

To upload all the custom widgets, one would simply execute the script without additional arguments:

$ ./upload.sh

How to trigger a query from a widget#

Work in progress 🚧

this.select() does not always work.

Add click events on Cards or Recommendation widgets#

Work in progress 🚧

How to tag an item in a custom Cards Widget?#

In a custom Cards widget, the functionality of tagging an item with a specific key-value facet (keyword) can be implemented by adding a custom event.

The event handler requires the relevant item id. The item id can be saved in an attribute of an html element as done by default in the date span element in the Cards widget.

Example event handler:

onTagItemClicked(e) {

    // Get the item id from the attribute of your custom html element
    let itemId = e.currentTarget.getAttribute('item-id')
    // Get the item from your the collection
    let item = this.collection.get(itemId)
    // Tag the item with a desired facet
    item.tag('facet_name', 'facet_value')
}
Contents