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.

component image

In-ports

data JSON - properties to display.

config JSON - widget configuration parameters.

Out-ports

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

Overview

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:

PropertyDescription
nameThe name of the property.
valueThe value of the property.
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"
}
]

Settings

Title

Sets a widget's title.

Hide progress bar

Controls the visibility of the progress bar. By default, the progress bar is visible.

Is interactive

Controls whether the widget is clickable. When enabled, the on-click port emits true on click.

Primary property index

Index of the property you want to higlight. This index corresponds to the index of the object that defines this property. The indexing starts from 0. The default value is 0. Make this field blank to disable this setting.

Error messages settings

Specify custom error messages to display inside the widget. You can specify a message for each error code.