mDIS User Documentation

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, Position on page can be changed.
  • If required, several instances of the same widget types 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 - provide introduction text and a picture
  3. PostBoxWidget - post 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 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]
1
2
3
4
5
6
7

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
    }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Widget Customization

Widget customization takes place via Slot-Props (opens new window). See also mDIS Documentation (opens new window).

TBC