Skip to main content

Property List widget

Displays a list of name-value pairs as a simple two-column table. Its used for displaying properties of an object or an arbitrary list of name/value pairs.


data JSON - properties to display.

config JSON - widget configuration parameters.


on-click Bool - emits boolean true when user clicks on the widget. Event is emitted only when widget is in interactive mode.


Properties List widget supports a special format that describes the name, value and converter (optional) of the items in the list. Here is the format definition:

nameThe name of the metric.
valueThe value of the metric.
converterFormatting function. Default is none.

See Value Formatters to learn how to format values of different types.

In interactive mode the widget will become clickable and change the background on mouse hover. It will emit an event with boolean true value on click.

The following is an example of the input data:

[    {        "name": "Name",        "value": "Kelp"    },    {        "name": "Description",        "value": "large brown algae seaweeds"    },    {        "name": "Order",        "value": "Laminariales"    },    {        "name": "Optimal temperatures",        "value": "6 - 14 °C"    },    {        "name": "Energy, kJ",        "value": 180,        "converter": "numberToHumanReadable"    },    {        "name": "Carbohydrates, g",        "value": 9.57,        "converter": "numberToHumanReadable"    },    {        "name": "Fat, g",        "value": 0.56,        "converter": "numberToHumanReadable"    },    {        "name": "Protein, g",        "value": 1.68,        "converter": "numberToHumanReadable"    }]



The widget title. It is displayed on top of the widget in the tile header. To hide the header, leave the Title blank.

Primary metric index#

Index of the primary metric. Its the index of the object in the input data array. Note that index starts from 0. Only one metric can be primary.

Interactive mode#

Interactive mode controls whether the widget should respond to user interactions. If turned on, hovering over the widget will change the background to blue and change the mouse cursor to a pointer.

Hide progress bar#

Controls the visibility of widget progress bar (visible by default).

Hide help icon#

Controls the visibility of help icon (visible by default).