value

Show values and amounts for a quick overview or visual representation on a widget, such as sales targets or the number of orders to date. The value can be a number or date and time.

Value widgets

Configuration options

Core options
value	Provide the value to be shown on the widget surface. You can use a string, expression or datasource.

Other options
align	Align the value either left, right or center.
bottom	The component will be added to the bottom of the widget.
footer	Add text to the footer of the widget.
footerAlign	Align the footer text to left, right, center.
format	Various formats available for the value which is of type date and number, for example, currency.
placeholder	Specify a placeholder text to display if there is no data, for example - title: No data to display.
style	By default the value is positive. To show a negative value set the style: isNegative to true.
top	The component will be added to the top of the widget.

Examples and code snippets

Value widget (2x2)

Value widget with number

This example shows a value widget configured with a number value, a format unit and align right. A component.title is added at the top and component.trend at the bottom to show additional information.

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

value-widget-2x2 (static)

widgets:
  valueStatic-2x2: 
    type: widget.value
    options:
      top: 
        type: component.titles
        options:
          title: Solana
          subtitle: USDT
          align: left
          icon: currency-dollar
          iconColor: color2
      value: 212
      format:
        unit: "SOL"  
      align: right
      bottom: 
        type: component.trend
        options:
          title: 92,40 USDT / SOL          
          style:
            isAlignRight: false
            isValueBottom: true
          value: +21.2
          format:
            numberStyle: unit
            unit: percent

value-widget-2x2 (dynamic)

grid-item

Value widget (2x4)

Value widget with date and time

This example shows a value widget configured with a date and time value and a dateFormat to show HH:mm and align center. A component.title is added at the top and at the bottom to provide additional information about the meeting.

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

value-widget-2x4 (static)

widgets:    
  valueStatic-2x4:
    type: widget.value
    options:
      align: center
      value: 2022-10-27T14:00:14+0100
      format:
        dateFormat: HH:mm
        unit: Meeting time
      bottom:
        type: component.titles
        options:
          icon: "phone"
          iconColor: color4
          align: center
          title: Jane Stevens
          subtitle: "[phone]"
      top:
        type: component.titles
        options:
          icon: "calendar"
          iconColor: color9
          align: center
          title: 
            text: 2022-10-27T14:41:13+0100
            format: 
              dateFormat: l
          subtitle: 
            text: 60 Minutes

value-widget-2x4 (dynamic)

grid-item

Value widget (4x2)

Value widget with currency format

This example shows a value widget configured with an number value and a Format to show currency and align centre. A component.title is added at the bottom to provide additional information about the billing and quarter.

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

value-widget-4x2 (static)

widgets:
  value-s-4x2: 
    type: widget.value
    options:
      value: "2329999"
      align: center
      format:
        numberStyle: currency
      bottom: 
        type: component.titles
        options:
          align: center
          title: Company Billing
          subtitle: Q3 / 2022

value-widget-4x2 (dynamic)

grid-item