Widgets

Widgets in the VMS are dynamic components that seamlessly integrate with the system drawers. They provide real-time or updated information without opening dedicated applications or navigating multiple screens. By leveraging external APIs or data from the VMS itself, widgets offer you quick access to relevant information at a glance.

One of the key features of widgets is their flexibility in terms of customisation and the possibility to perform complex data extractions. The appearance and behaviour of widgets are highly customisable, including adjusting parameters such as font size, colour, layout, and content display.

Creating a Widget

To create a widget, go to Setup -> Widgets, and at the top right, click Create -> Create Widget.

Contexts

In the "Contexts" step, choose a primary object type, like "Vessel". This object will be the source when querying data later. Contexts determine where widgets can be used. A widget can't be shown in a drawer without the context that links the widget's object type to the object in that location.

If a widget displays information about a vessel in the "voyage-drawer" context, the "object path" linking the voyage to the vessel would be vessel. This allows the widget to access vessel data in the voyage drawer.

Fields

Field names are displayed as column headers in a widget list, with values in rows. List field styles are fixed. In a widget card, field names act as labels followed by their values. Widget fields control how information is shown, either on a card or a list. You can customise the styles or use the defaults.

Field value data types

Ensuring that the "Value Data Type" matches the type of value in the data source is crucial for accurately displaying values.

Creating a widget data source

To create a widget data source, go to Setup -> Widgets, and at the top right, click Create -> Create Widget Data Source.

Data source information

A link to the "home page URL" address will be shown on the widget card. This is for reference only and doesn't affect data retrieval.

The "Widget" field connects the data source to a widget, and once selected cannot be changed unless the Widget is deleted.

Data source URL

The base URL and HTTP method form the starting point of the request's URL, with the parameterised URL template appended to it.

Authentication

Widget data sources support various authentication methods, including username/password and token-based systems like OAuth 2.0.

Parameters

After setting up the connection to the data source, you can customise data retrieval by adding parameters. These can be dynamically taken from the widget object or set as static values. Depending on your data source and request type, you can include these parameters in the URL path, request body, or HTTP headers. This flexibility allows for precise data fetching, fitting various scenarios and data source setups.

To create a dynamic filter value, enter a "Variable Name" and select an "Object Path". If the parameter type is set to "URL Parameter" or "Request Body", insert the variable placeholder into the template using the syntax {{variableName}}. When the widget loads, the placeholder will be replaced with the real value from the main object.

Field mapping

To populate your widgets with data from your source, use a JSONPath expression for each field that matches the desired data. Separate multiple JSONPaths with a semicolon (;) to combine results with a space.

To display multiple rows in a list widget, ensure the JSONPath result from your source is an array.

Examples

The JSONPath syntax supports powerful filtering and functions. For a more comprehensive understanding and examples of how JSONPath expressions are written, refer to the detailed examples in the official documentation.

{
    "fruit": "Apple",
    "size": "Large",
    "color": "Red"
}

[
    {
        "fruit": "Apple",
        "size": "Large",
        "color": "Red"
    },
    {
        "fruit": "Banana",
        "size": "Medium",
        "color": "Yellow"
    },
    {
        "fruit": "Grapes",
        "size": "Small",
        "color": "Purple"
    }
]

{
    "sizes": {
        "Apple": "Large",
        "Banana": "Medium",
        "Grapes": "Small"
    },
    "colors": {
        "Apple": "Red",
        "Banana": "Yellow",
        "Grapes": "Purple"
    }
}

[
    {
        "fruit": "Apple",
        "size": "Large",
        "color": "Red",
        "price": 4
    },
    {
        "fruit": "Banana",
        "size": "Medium",
        "color": "Yellow",
        "price": 3
    },
    {
        "fruit": "Strawberry",
        "size": "Small",
        "color": "Red",
        "price": 8
    }
]