Widgets
value

5min
This widget can show the values/amounts for a quick overview or visual representation. 
﻿
Widget value
﻿
﻿Configuration options﻿
The core structure includes: value
Other options:
top and bottom - The titles or trend component will be added to the top/ bottom of your widget
format - There is a selection of possible formats available for the main value of the widget
footer - Here the additional text with the format can be added 
﻿Examples and code snippets ﻿
Value widget (2x2)
﻿
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
value-widget-2x2 (static)
value-widget-2x2 (dynamic)
|
widgets:
  "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
widgets:
  "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 (2x4)
﻿
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
value-widget-2x4 (static)
value-widget-2x4 (dynamic)
|
widgets:    
  "2x4":
    type: widget.value
    options:
      align: center
      value: =@ctx.datasources.value2.meetingTime
      format:
        dateFormat: HH:mm
        unit: =@ctx.datasources.value2.description
        
      bottom:
        type: component.titles
        options:
          icon: "phone"
          iconColor: color4
          align: center
          title: =@ctx.datasources.value2.name
          subtitle: =@ctx.datasources.value2.phoneNumber
      top:
        type: component.titles
        options:
          icon: "calendar"
          iconColor: color9
          align: center
          title: 
            text: =@ctx.datasources.value2.nextMeetingTime
            format: 
              dateFormat: l
          
          subtitle: 
            text: =@ctx.datasources.value2.timeLeft & " Minutes" 
widgets:    
  "2x4":
    type: widget.value
    options:
      align: center
      value: =@ctx.datasources.value2.meetingTime
      format:
        dateFormat: HH:mm
        unit: =@ctx.datasources.value2.description
        
      bottom:
        type: component.titles
        options:
          icon: "phone"
          iconColor: color4
          align: center
          title: =@ctx.datasources.value2.name
          subtitle: =@ctx.datasources.value2.phoneNumber
      top:
        type: component.titles
        options:
          icon: "calendar"
          iconColor: color9
          align: center
          title: 
            text: =@ctx.datasources.value2.nextMeetingTime
            format: 
              dateFormat: l
          
          subtitle: 
            text: =@ctx.datasources.value2.timeLeft & " Minutes" 
﻿
Value widget (4x2)
﻿
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
value-widget-4x2 (static)
value-widget-4x2 (dynamic)
|
widgets:
  "4x2": 
    type: widget.value
    options:
      value: =@ctx.datasources.value3.billingValue
      align: center
      format:
        numberStyle: currency
      bottom: 
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.value3.title
          subtitle: =@ctx.datasources.value3.subtitle
widgets:
  "4x2": 
    type: widget.value
    options:
      value: =@ctx.datasources.value3.billingValue
      align: center
      format:
        numberStyle: currency
      bottom: 
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.value3.title
          subtitle: =@ctx.datasources.value3.subtitle
﻿
See also
﻿﻿Developer reference﻿﻿
﻿Widgets samples solution - It can be downloaded on Jigx Management (Quick Start section)
﻿