Skip to main content

Dashboard-Widgets

Dashboard-Widgets

Purpose

mDIS contains a rich set of Widgets that can be used to customize the Dashboard.

  • Widgets are responsive; they adapt to the browser window size.
  • Widgets can be customized: size, color, and position on the page can be changed.
  • If required, several instances of the same widget type can be placed on the dashboard. For instance, several charts can be put on the dashboard.

Types of Widgets

Ordered by complexity:

  1. InstructionsWidget - a collection of 4 links
  2. ProjectInformationWidget - provides introduction text and a picture
  3. PostBoxWidget - posts short notes on the dashboard
  4. SitesAndHolesMapWidget - interactive, zoomable map
  5. MessageOfTheDayWidget - calendar widget
  6. SimpleChartWidget - interactive charts from table columns

More details coming soon.

Widget Hierarchy

All widgets share some common functionality which is encapsulated in the BaseWidget component. The BaseWidget component contains a WidgetColorInput component for setting the color scheme.

The Widget component acts as a generic container. If you create your own, new, special-purpose Widget component, it must be registered in here.

# "Widget Hierarchy:"
BaseWidget           # common features
  WidgetColorInput   # common feature, more complex
Widget               # container widget
# special-purpose widgets:
[InstructionsWidget, MessageOfTheDayWidget, PostBoxWidget,
ProjectInformationWidget, SimpleChartWidget, SitesAndHolesMapWidget]

Programmability

Widget REST API

Widgets can be customized via the REST API. A simple API call is /api/v1/widgets, which will list all available Widget instances on the user's Dashboard and their metadata.

In particular, the property "active": 0 will indicate if a widget instance is visible on the Dashboard.

// Properties of a Widget object
// Example: ChartWidget
[{
        "id": 6,
        "type": "SimpleChartWidget",
        "title": "SimpleChartWidget Title",
        "subtitle": "SimpleChartWidget Subtitle",
        "active": 0,
        "xs_size": 12,
        "sm_size": 6,
        "md_size": 4,
        "lg_size": 3,
        "order": 4,
        "extraSettings": [], // strongly varies by Widget Type
        "color": null,
        "is_dark": 1,
        "deletable": 0,
        "cloneable": 1
    }]

Widget Customization

Widget customization takes place via Slot-Propsopen in new window. See also mDIS Documentationopen in new window.

TBC