Page Comparison

...

squirro_widget ^
    --cluster %CLUSTER% ^
    --token %TOKEN% ^
    upload ^
    --config '{"directory": "result_list_fancy", "title": "Fancy Result List", "baseWidget": "Search"}'

Note that the lines have been wrapped with the circumflex (^) at the end of each line. On Mac and Linux you will need to use backslash (\) instead.

This command assumes that you have set the variables CLUSTER and TOKEN as described in the Set up Connection section above.

...

squirro_widget ^
    --cluster %CLUSTER% ^
    --token %TOKEN% ^
    upload ^
    --config '{"directory": "clock", "title": "Clock"}'

Note that the lines have been wrapped with the circumflex (^) at the end of each line. On Mac and Linux you will need to use backslash (\) instead.

This command assumes that you have set the variables CLUSTER and TOKEN as described in the Set up Connection section above.

...

return Widgets.Text.extend({
    customEl: '.widget-content',
    renderContent: _.noop,

    _timer: null,

    afterRenderafterInitialize: function () {
        Widgets.Text.prototype.afterRender.call(this, arguments);
        this.updateTime();
    },

    getCustomTemplateParams: function () {
        return {};
    },

    updateTime: function () {
        if (this._timer) {
            clearTimeout(this._timer);
        }
        var now = new Date();
        this.$('.js-clock').text(now.toLocaleTimeString());

        this._timer = setTimeout(this.bind(this.updateTime), 500);
    }
});

...

• Line 1 creates a new class, extending from the default Text widget. That widget has been chosen because it doesn't have much overhead.
• Line 2-3: Declares the element into which the template will be rendered and disabled the default behavior of the text widget.
• Line 5: Creates a variable that will hold the timer. This is part of the standard JavaScript pattern for setTimeout.
• Line 7-10 9 (afterRenderafterInitialize): Ensures that the time is added to the widget after the widget has rendered (As part of the initialization call set up the timer by calling the updateTime method).
• Line 1211-14 (getCustomTemplateParams): declares the parameters that are to be passed into the template. We are not using any parameters in this widget, so a empty object is returned.Line 16-24 (19 (updateTime): Update the time (specifically line 2015-2116). The other lines handle the timer and ensure that the method is called again every 500 milliseconds.

...

Then reload the dashboard and the clock should now update and show the current time.

Conclusion

...

The two examples in this tutorial led you through two main use cases for custom widgets:

1. Style an existing widget in a way that is not yet envisioned by the themes.
2. Create a new widget for different visualizations.

Widgets are very powerful and only limited by what JavaScript as a language can do.

Consult the Custom Widgets Reference for reference or contact support if you have any questions about how to do something specific in a custom widget.