Widget

Widgets is often used in conjunction with agents or applications in plugin. A widget is a component that is rendered inside a popover component with an icon of the plugin thumbnail || graphic image and it's only rendered once in the upper right corner of the Dashboard header (widget bar), even if you have multiple instances of the same application.

You can build your own Widget by exporting a custom react component or by extending the Widget base from Plugin-API

What does Widget look like?

import { GUI } from '@root'
import { forwardRef } from 'react'

import {
    Wrapper
} from './style'

const WidgetComponent = (props, ref) => {
    return (
        <Wrapper ref={ref}>
            <GUI.ListItem
                asMenuItem
                label={'Hello world!'}
                onClick={() => window.open('https://www.google.se/?gws_rd=ssl#q=hello+world')}
            />
        </Wrapper>
    )
}

const Widget = forwardRef(WidgetComponent)

export {
    Widget
}

In this example we create a simple widget that renders a list of items that will fit nicely in widget popover component.

Result

Screenshot of a example widget

How to register a Widget?

Like any other main component, from your main index.js file where you register your plugin, import your Widget and pass it down with the register() method from Plugin-API

import DashboardPlugin from 'Dashboard/plugin'

const Plugin = new DashboardPlugin('@plugin_bundle')

const registerPlugin = () => {
    const { Widget } = require('@components/Widget')
    
    Plugin.register({
        widget: Widget
    }
}

registerPlugin()

export {
    Plugin
}