status

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 group widget.

The status returned is based on a Boolean condition.

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
bottom	The component will be added to the bottom of the widget.
color	Choose a color from the provided 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 component will be added to the top of the widget.

Examples and code snippets

Status widget (2x2)

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)

widgets:
  statusStatic-2x2: 
    type: widget.status
    options:
      statuses:
        - when: true
          icon: check-circle-1
          color: color2
          bottom:
            type: component.titles
            options:
              title: Correct
              align: center
              style:
                isPositive: true

status-with-expression

status (dynamic)

grid-item

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 determine 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-1_2x4

widgets:
  status1-2x4: 
    type: widget.status
    options:
      statuses:
        # Battery less than 25 %
        - when: [email protected] <= 25 ? true:false
          icon: battery-charge
          top:
            type: component.titles
            options:
              icon: mobile-phone-1
              title: [email protected]
              subtitle: [email protected]
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: [email protected] & ' ' & '%'
              subtitle: Battery
              align: center   
          color: negative

        # Battery less than 50 %  
        - when: [email protected] <= 50 ? true:false
          icon: battery-charge
          top:
            type: component.titles
            options:
              icon: mobile-phone-1
              title: [email protected]
              subtitle: [email protected]
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: [email protected] & ' ' & '%'
              subtitle: Battery
              align: center              
          color: warning

        # Battery more than 50 %
        - when: [email protected] > 50 ? true:false
          icon: battery-charge
          top:
            type: component.titles
            options:
              icon: mobile-phone-1
              title: [email protected]
              subtitle: [email protected]
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: [email protected] & ' ' & '%'
              subtitle: Battery
              align: center              
          color: positive
  

datasource

grid-item

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

widgets: 
  status1-4x2: 
    type: widget.status
    options:
      footer: 
        text: test
      statuses:
        - when: true # use an expression to eveluate the true statement
          icon: remove-circle
          color: negative
          
          bottom:
            type: component.titles
            options:
              title: 4 Tests 
              subtitle: Failed  
              align: center   

grid-item