Widgets

status

4min

This widget visually represents a status using a combination of icons and colors. The status widget can be used alone or combined with another widget inside a widget/group.

The status returned is based on a boolean condition.

Status widget
Status widget


Configuration options

Core options



statuses

Define at least one or more statuses based on conditions. First evaluated to true will be used. The statuses property includes:

  • when - the condition when the status should be shown
  • icon - the icon that should be shown

Other options



top



bottom

The titles component will be added to the bottom of the widget.

color

Choose a color from the provided color palette for the icon. The default color is black if the property is not specified in the YAML.

footer

Add text to the footer of the widget.

footerAlign

Align the footer text to left, right, center.

placeholder

Specify a placeholder text to display if there is no data, for example - title: No data to display.

top

The titles component will be added to the top of the widget.

Examples and code snippets 

Status widget (2x2)

Status widget
Status widget


In this example the status widget is configured to show a positive icon for the when: true property.

Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.

status (static)
status-with-expression
status (dynamic)


Status widget (2x4)

In this example the status widget is configured to show different icons and details depending on the status of a mobile device's battery. The when: property is used three times to detemine the status and depending if the when evaluates to true then the details for that when property is shown.

Examples: See the complete example in GitHub.

Status widget 2x4
Status widget 2x4

status-1_2x4
datasource


Status widget(4x2)

Status Widget 4x2
Status Widget 4x2


In this example the status widget shows that 4 tests failed with component.titles to provide more information.

Examples: See the complete example in GitHub.

status-1_4x2.jigx




Updated 08 Aug 2024
Doc contributor
Did this page help you?