Custom Widgets and the Dashboard Store

Custom Widgets and the Dashboard Store#

The dashboard store is accessible in the widget using the widget.dashboard.store property (usually this.dashboard.store). This model is the recommended way for custom widgets to talk to each other. The dashboard store is a Backbone.js model though without persistence.

Custom widgets should implement the ~Base.onStoreChange method to listen for changes to the store.

Architecture#

A good example of when to use the store is when there are two widgets on a dashboard that have to communicate with each other.

For example, a navigation widget can be implemented which presents the user with a number of menu options. When clicking on one of the options, the store is updated by setting an attribute.

A second widget reacts to that store value and changes the content to be displayed depending on the set attribute.

Methods#

get()#

store.get(attribute)

Get the current value of the store attribute.

Example

onStoreChange: function () {
    if (this.dashboard.store.get('additionalInfo')) {
        this.$el.addClass('additional-info-requested');
    }
},

set()#

store.set(attribute, value)
store.set(attributes)

Set one attribute to the given value or - in the secondary form - update all the key/value pairs from the hash.

If any attribute changes, a change event is triggered. The easiest way to subscribe to those in the widget is by implementing the ~Base.onStoreChange method.

Example

onRowClicked: function () {
    this.dashboard.store.set({'additionalInfo': true});
},

unset()#

store.unset(attribute)

If any attribute changes, a change event is triggered. The easiest way to subscribe to those in the widget is by implementing the ~Base.onStoreChange method.

Example

onRowClicked: function () {
    this.dashboard.store.unset('additionalInfo');
},
Contents