Configuration AttributeDisplay Widget

The widget configuration schema is defined in src/index.ts.

Settings Overview

Key	UI Label	Type	Default	Description
title	Title	INPUT_FORMATTED	''	Optional title. Supports formatted input expressions/variables.
attributes	Tango attributes	INPUT_TANGO_ATTRIBUTES	[{ endpoint: '2', attribute: 'low-mccs/station/s8-1/state' }]	Attribute source list (endpoint + full attribute path). Supports formatted input in attribute.
useLiveData	Use Live Data (subscribe)	boolean	false	If enabled, subscribe to live updates. If disabled, use one-shot query/polling cadence.
useEnumLabels	Show Enum Labels	boolean	true	Show enum labels instead of raw numeric values when metadata is available.
valuePath	Value Path	string	''	Select a single element/key from an array or object value using a dot/bracket path. Empty shows the whole value. See Value Path.
decimalPlaces	Decimal Places	number	''	Round every number in the displayed value to this many decimal places. Empty keeps full precision. See Decimal Places.
devStringViewMode	DevString View Mode	select	'json-tree-expanded'	DevString rendering mode: plain, json-tree-expanded, json-tree-collapsed, array-list.
colorJsonValuesByType	Color JSON Values by Type	boolean	true	Color JSON values by type in JSON tree modes.
backgroundColor	Background Color	color	'#00000000'	Base card background color.
useStateBackgroundColor	Use State Background Color	boolean	false	If enabled, background color follows SDK state color mapping with contrast-aware text.
conditionalBackgroundValue	Conditional Background Value	INPUT_FORMATTED	''	Value/expression used as comparison target for conditional background styling.
conditionalBackgroundOperator	Conditional Background Operator	select	'>='	Comparison operator: >=, >, <=, <, ==, !=.
conditionalBackgroundColor	Conditional Background Color	color	''	Background color applied when condition matches.
valueColor	Value Color	color	'#ffffffff'	Value text color.
titleColor	Title Color	color	'#ffffffff'	Title text color.
fontSize	Font Size	string	'14px'	Base font size for title/value (for example 14px, 0.95rem).
labelPosition	Title Placement	select	'left'	Title position relative to value: top, center, left, right, bottom.
horizontalAlign	Content Horizontal Alignment	select	'center'	Horizontal alignment of the title/value block: left, center, right.
verticalAlign	Content Vertical Alignment	select	'center'	Vertical alignment of the title/value block: top, center, bottom.

Value Path

Many Tango attributes do not return a single scalar. Spectrum and image attributes arrive as arrays, and DevString attributes frequently carry JSON payloads (often double-encoded, e.g. ["{\"channels\": [0, 1, 2]}"]). Value Path lets you drill into such a value and display just one element or key instead of the whole structure.

Leave it empty to display the entire value unchanged.

How a path is parsed

The path is split into tokens on dots (.) and brackets ([ ]). Each token is either:

• an array index — a bare integer such as 0, 2, or a negative index like -1;

• an object key — anything that is not a plain integer, such as channels or status.

So channels[0] and channels.0 are equivalent, and both mean “the key channels, then index 0”. Whitespace around the path is ignored, and empty segments are skipped.

Indexing into arrays

Path	Applied to	Result
0	[29.803, 30.1]	29.803
1	[1719153600, 29.803]	29.803
-1	[10, 20, 30]	30
-2	[10, 20, 30]	20

A very common case is a [timestamp, value] pair where you only want the reading: set the path to 1 (or -1) to pick the elevation/value and drop the timestamp.

Negative indices count from the end of the array, so -1 is always the last element regardless of length.

Reaching into objects and nested structures

Path	Applied to	Result
channels	{ "channels": [0, 1, 2] }	[0, 1, 2]
channels[0]	{ "channels": [0, 1, 2] }	0
a.b.c	{ "a": { "b": { "c": 42 } } }	42
status.code	{ "status": { "code": "OK", "ts": 1719153600 } }	'OK'
readings[2].t	{ "readings": [ …, …, { "t": 36.6 } ] }	36.6

You can freely mix keys and indices in a single path, e.g. readings[2].t or pointing.az[0].

Automatic JSON parsing

Tango DevString values are often JSON encoded as strings. Value Path parses JSON strings transparently as it traverses, so you do not need to do anything special:

• A top-level JSON string such as '{"channels": [0, 1, 2]}' is parsed before the first token is applied, so channels[0] works directly.

• JSON strings encountered mid-traversal (a JSON string nested inside an array or object) are also parsed on the fly, so deeply/double-encoded payloads resolve segment by segment without extra steps.

Single-element array unwrapping

A frequent Tango shape is a one-element array that wraps an object or JSON string, for example ["{\"channels\": [0, 1, 2]}"]. When the next token is an object key, a single-element array wrapper is unwrapped automatically. This means:

• channels resolves against ["{\"channels\": [...]}"] exactly as 0.channels would — you can skip the leading 0.

Note this convenience only applies when descending by an object key. If you genuinely want the first element of an array, use an explicit index (0).

When the path cannot be resolved

If any segment does not exist (missing key, out-of-range index, or a token applied to a value that is not an array/object), the result is empty — the value displays as -. Double-check the path against the real shape of the attribute if you see - unexpectedly.

Order of operations

Value Path is applied first, before Decimal Places rounding and before the DevString view mode formats the result. So you can select a nested array with Value Path and still have its numbers rounded, or render the selected array with array-list mode.

Decimal Places

Rounds every finite number found in the displayed value to the given number of decimal places. The rounding walks into arrays and objects recursively, so it applies to all numbers in a structured value, not just a top-level scalar.

• Leave empty for full precision (the default).

• Example: with decimalPlaces: 3, a value of 29.80312 displays as 29.803.

• It also applies element-wise to arrays — [29.80312, 30.14987] becomes [29.803, 30.15].

• Trailing zeros are not padded: rounding 30.1 to 3 places stays 30.1, not 30.100 (the value is rounded numerically, not formatted to a fixed width).

• Non-numeric values (strings, booleans, null) are left untouched.

• Negative or non-numeric settings are ignored and leave the value unchanged.

As noted above, rounding happens after Value Path selection, so it operates on whatever Value Path produced.

Notes

• attributes has minItems: 1; at least one attribute source is required.

• propertyType and level metadata are used by the settings UI for grouping and progressive disclosure.

• Expression/variable support for formatted fields comes from the shared widget SDK formatted input parser.