# status

{% columns %}
{% column %}
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](https://docs.jigx.com/examples/readme/widgets/status) widget.

The status returned is based on a Boolean condition.
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FUHdeoshF8JyLjTTa9s3C%2Fwd-status-intro.png?alt=media&#x26;token=bae5b25b-e5d3-496e-8bc6-fbf88e778d2b" alt="Status widget" width="188"><figcaption><p>Status widget</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Configuration options

<table><thead><tr><th width="135.328125">Core options</th><th></th></tr></thead><tbody><tr><td><code>statuses</code></td><td><p>Define at least one or more statuses based on conditions. First evaluated to true will be used. The <code>statuses</code> property includes:</p><ul><li><code>when</code> - the condition when the status should be shown</li><li><code>icon</code> - the icon that should be shown</li></ul></td></tr></tbody></table>

<table><thead><tr><th width="141.85546875">Other options</th><th></th></tr></thead><tbody><tr><td><code>bottom</code></td><td>The component will be added to the bottom of the widget.</td></tr><tr><td><code>color</code></td><td>Choose a color from the provided for the icon. The default color is black if the property is not specified in the YAML.</td></tr><tr><td><code>footer</code></td><td>Add text to the footer of the widget.</td></tr><tr><td><code>footerAlign</code></td><td>Align the footer text to <code>left</code>, <code>right</code>, <code>center</code>.</td></tr><tr><td><code>placeholder</code></td><td>Specify a placeholder text to display if there is no data, for example - <code>title: No data to display</code>.</td></tr><tr><td><code>top</code></td><td>The component will be added to the top of the widget.</td></tr></tbody></table>

## Examples and code snippets

## Status widget (2x2)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FlPNp7VUPFBTyNzZflD7z%2FWD-status22.png?alt=media&#x26;token=713c1cf1-be7c-48b4-b836-ac78089e713f" alt="Status widget" width="188"><figcaption><p>Status widget</p></figcaption></figure>
{% endcolumn %}

{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/status/static-data/status-static.jigx). See the complete example using dynamic data in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/status/dynamic-data/status-dynamic.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="status (static)" %}

```yaml
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
```

{% endtab %}

{% tab title="status-with-expression" %}

```yaml
widgets:
  2x2: 
    type: widget.status
    options:
      statuses:
        - when: =@ctx.datasources.trip-dynamic.flight = 'A 0123' ? true :false
          icon: check-circle-1
          color: color2
          bottom:
            type: component.titles
            options:
              title: Flight was found
              align: center
              style:
                isPositive: true
```

{% endtab %}

{% tab title="status (dynamic)" %}

```yaml
widgets:
  statusDD-2x2: 
    type: widget.status
    options:
      statuses:
        - when: =@ctx.system.isOffline != true
          icon: check-circle-1
          color: color2
          bottom:
            type: component.titles
            options:
              title: Online
              align: center
              style:
                isPositive: true
          
        - when: =@ctx.system.isOffline
          icon: alert-circle
          color: color4
          bottom:
            type: component.titles
            options:
              title: Offline
              align: center
              style:
                isNegative: true
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: status
          widgetId: statusStatic-2x2
```

{% endtab %}
{% endtabs %}

## Status widget (2x4)

{% columns %}
{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/2x4/status-1_2x4.jigx).
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FKbp1LbKTT2CZGPZ1tAXj%2FW-status2x4.PNG?alt=media&#x26;token=b6445530-b5d2-4dff-a857-5eb88b83267f" alt="Status widget 2x4" width="188"><figcaption><p>Status widget 2x4</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="status-1\_2x4" %}

```yaml
widgets:
  status1-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
  
```

{% endtab %}

{% tab title="datasource" %}

```yaml
title: Status widget 1 (2x4)
type: jig.default

datasources:
  device:
    type: datasource.static
    options:
      data:
        - device-name: iPhone 14 Pro
          device-owner: Barry Hudson
          battery: 30 # Try to change the number
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x4"
      children: 
        type: component.jig-widget
        options:
          jigId: status-1_2x4
          widgetId: status1-2x4
```

{% endtab %}
{% endtabs %}

## Status widget(4x2)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2F7sBSD3JndlC6IstMRyud%2FWD-status4x2.PNG?alt=media&#x26;token=41d52429-8e32-4593-8241-54c4321f6b13" alt="Status Widget 4x2" width="188"><figcaption><p>Status Widget 4x2</p></figcaption></figure>
{% endcolumn %}

{% column %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/widgets/4x2/status-1_4x2.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="status-1\_4x2.jigx" %}

```yaml
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   
```

{% endtab %}

{% tab title="grid-item" %}

```yaml
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "4x2"
      children: 
        type: component.jig-widget
        options:
          jigId: status-1_4x2
          widgetId: status1-4x2
```

{% endtab %}
{% endtabs %}