Dashboard Item

Dashboard items are user-selectable content placed on the dashboard. These could be charts using the report configuration or custom components in React or FlightJS.


In this tutorial we will create two new dashboard items:

  • Component that defines a report to show concept type counts
  • Custom React component that renders a number and configuration to increment

Web Plugin

Register the resources.

app.registerJavaScript("/org/visallo/examples/dashboard_item/plugin.js", true);



Register Extension

Register two extensions, a report-style card, and a custom component.

visallo.registry.registerExtension('org.visallo.web.dashboard.item', {
    title: 'Concept Type Counts',
    description: 'Show total counts for entity types',
    identifier: 'org-visallo-examples-dashboard-item',
    report: {
        // 14 lines hidden…

visallo.registry.registerExtension('org.visallo.web.dashboard.item', {
    title: 'React Component',
    description: 'Example React Component',
    identifier: 'org-visallo-examples-dashboard-item-react',
    componentPath: 'org/visallo/examples/dashboard_item/React',
    configurationPath: 'org/visallo/examples/dashboard_item/Config'

Report Configuration

The report configuration uses Visallo element search

defaultRenderer: 'org-visallo-pie',
endpoint: '/vertex/search',
endpointParameters: {
    q: '*',
    size: 0,
    filter: '[]',
    aggregations: [
            type: 'term',
            name: 'field',
            field: 'http://visallo.org#conceptType'

Create the Custom Component

The custom component will also register a configuration component. It will access a count property in the configuration and display the current value.

    Hello World
    Count is {count || 'Not Set'}

In the configuration component, we increment the count (creating if needed) when the button is clicked.

const { item, extension } = this.props;
const { configuration:previous } = item;
const configuration = { ...previous, count: (previous.count || 0) + 1 };

    item: { ...item, configuration },

Wiring Refresh

Dashboard triggers refreshData on all items when the user clicks the refresh button in the top-right corner. To wire this message in a React component we need the DOM Element of the item, so first register a ref in render()

<div ref="wrap">

Then, listen for the event, we must use Jquery to listen as Flight uses non-standard event triggering.

componentDidMount() {
    const { item, extension } = this.props;
    $(this.refs.wrap.parentNode).on('refreshData', (event) => {
            item: { ...item, configuration: { ...item.configuration, count: 0 } },

Finally, unregister the listener on teardown

componentWillUnmount() {

Custom Configuration Interface Elements

Provide a configurationPath to the extension to add an additional user interface component in the configure popover. The figure describes how the configuration interface is generated for the saved search dashboard item.

The possible configuration can come from:

  • Default configuration (edit title)
  • Extension specific (configuration defined in extension configurationPath)
  • Report configuration (choose which reportRenderer)
  • Report chosen configuration (Report defined configurationPath)

The configuration component gets attributes of the item when opened.

  • extension The extension registered
  • item The item instance which includes configuration

To update an items configuration, trigger configurationChanged in FlightJS or call configurationChanged from props in React.

// Flight Example

this.attr.item.configuration.myConfigOption = 'newValue';
this.trigger('configurationChanged', {
    extension: this.attr.extension,
    item: this.attr.item
// React Example

var { item, extension } = this.props,
    configuration = { ...item.configuration, newStateValue: true };

item = { ...item, configuration }
this.props.configurationChanged({ item, extension })

results matching ""

    No results matching ""