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
﻿
﻿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
﻿
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)
widgets:
  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
widgets:
  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 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-1_2x4
datasource
widgets:
  "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]-owner
              subtitle: [email protected]-name
              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]-owner
              subtitle: [email protected]-name
              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]-owner
              subtitle: [email protected]-name
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: [email protected] & ' ' & '%'
              subtitle: Battery
              align: center              
          color: positive
  
widgets:
  "2x4": 
    type: widget.status
    options:
      statuses:
        # Battery less than 25 %
        - when: =@ctx.datasources.device.battery <= 25 ? true:false
          icon: battery-charge
          top:
            type: component.titles
            options:
              icon: mobile-phone-1
              title: =@ctx.datasources.device.device-owner
              subtitle: =@ctx.datasources.device.device-name
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: =@ctx.datasources.device.battery & ' ' & '%'
              subtitle: Battery
              align: center   
          color: negative

        # Battery less than 50 %  
        - when: =@ctx.datasources.device.battery <= 50 ? true:false
          icon: battery-charge
          top:
            type: component.titles
            options:
              icon: mobile-phone-1
              title: =@ctx.datasources.device.device-owner
              subtitle: =@ctx.datasources.device.device-name
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: =@ctx.datasources.device.battery & ' ' & '%'
              subtitle: Battery
              align: center              
          color: warning

        # Battery more than 50 %
        - when: =@ctx.datasources.device.battery > 50 ? true:false
          icon: battery-charge
          top:
            type: component.titles
            options:
              icon: mobile-phone-1
              title: =@ctx.datasources.device.device-owner
              subtitle: =@ctx.datasources.device.device-name
              align: center
              iconColor: color14
          bottom:
            type: component.titles
            options:
              title: =@ctx.datasources.device.battery & ' ' & '%'
              subtitle: Battery
              align: center              
          color: positive
  
﻿
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: 
  "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   
widgets: 
  "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   
﻿
﻿

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.

Updated 08 Aug 2024

Did this page help you?

location

value

status

﻿Configuration options﻿

Other options

﻿Examples and code snippets ﻿

Status widget (2x2)

Status widget (2x4)

Status widget(4x2)

Configuration options

Examples and code snippets