Widgets

avatar

5min

The avatar widget can be used as a unique visual identifier, for example, to display a profile photo, company logo, initials, or flags. Additionally, text or a description can be added. The avatar can be used alone or combined with another widget inside a widget/group.
Avatar widgets
﻿
﻿Configuration options﻿
Core structure
﻿
text
Display text content on the widget surface when the URI is empty, for example, initials.
Other options
﻿
bottom
The titles 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.
placeholders
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.
uri
Provide the uri for the image. The following can be used: 
- https//: imagesource
- image from a datasource referenced in an expression 
﻿Examples and code snippets ﻿
Avatar widget example
Avatar widget
﻿
This is a simple example of using the avatar widget to show a quick overview of the next meeting.
Examples:
See the complete example using static data in GitHub. 
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub.
See the complete datasource for dynamic data in GitHub.
avatar-widget (static)
avatar-widget (dynamic)
widgets:    
  2x2:
    type: widget.avatar
    options:
      text: =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
      uri: [email protected]-global.picture
      bottom: 
        type: component.titles
        options:
          align: center
          title: [email protected]-global.name
          subtitle: =$fromMillis($toMillis(@ctx.datasources.dynamic-global.date-from),'[H01]:[m01]') & '-' & $fromMillis($toMillis(@ctx.datasources.dynamic-global.date-to),'[H01]:[m01]')

widgets:    
  2x2:
    type: widget.avatar
    options:
      text: =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
      uri: =@ctx.datasources.dynamic-global.picture
      bottom: 
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.dynamic-global.name
          subtitle: =$fromMillis($toMillis(@ctx.datasources.dynamic-global.date-from),'[H01]:[m01]') & '-' & $fromMillis($toMillis(@ctx.datasources.dynamic-global.date-to),'[H01]:[m01]')
﻿
Avatar widget with title
This is example shows the avatar widget using the component.title to add a name and icon to the widget.
Examples:
See the complete example in GitHub. 

Avatar widget with title
﻿
avatar-2_2x2.jigx
widgets:
  2x2:
    type: widget.avatar
    options:
      text: MR
      uri: https://randomuser.me/api/portraits/men/20.jpg
      bottom:
        type: component.titles
        options:
          title: Marty Randolph
          subtitle: Product Design Lead
          align: center
          icon: calendar                 
   
widgets:
  2x2:
    type: widget.avatar
    options:
      text: MR
      uri: https://randomuser.me/api/portraits/men/20.jpg
      bottom:
        type: component.titles
        options:
          title: Marty Randolph
          subtitle: Product Design Lead
          align: center
          icon: calendar                 
   
﻿
Avatar widget/group with list
Avatar in a group widget
﻿
Here is the avatar widget associated with the list widget inside the group widget. The next patient is displayed as an avatar and the next three patients are on the list for a better overview.
Examples:
See the complete example using static data in GitHub. 
See the complete example using dynamic data in GitHub. 
Datasources:
Full datasource for static data for avatar widget and for the list widget in GitHub.
Full datasource for dynamic data for avatar widget and for the list widget in GitHub. 
avatar-group (static)
avatar-group (dynamic) 
widgets:
  4x2:
    type: widget.group
    options:
      children:
        - type: widget.avatar
          options:
            text: =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
            uri: [email protected]-global.picture
        - type: widget.list
          options:
            data: [email protected]-dynamic
            item:
              type: component.list-item
              options:
                title: [email protected] & ' ' & @ctx.current.item.lastname
                subtitle: =$fromMillis($toMillis(@ctx.current.item.date_from),'[H01]:[m01]') & '-' & $fromMillis($toMillis(@ctx.current.item.date_to),'[H01]:[m01]')
                leftElement:
                  element: avatar
                  text: =$substring(@ctx.current.item.firstname, 0, 1) & =$substring(@ctx.current.item.lastname, 0, 1)
                  uri: [email protected]
widgets:
  4x2:
    type: widget.group
    options:
      children:
        - type: widget.avatar
          options:
            text: =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
            uri: =@ctx.datasources.dynamic-global.picture
        - type: widget.list
          options:
            data: =@ctx.datasources.employees-dynamic
            item:
              type: component.list-item
              options:
                title: =@ctx.current.item.firstname & ' ' & @ctx.current.item.lastname
                subtitle: =$fromMillis($toMillis(@ctx.current.item.date_from),'[H01]:[m01]') & '-' & $fromMillis($toMillis(@ctx.current.item.date_to),'[H01]:[m01]')
                leftElement:
                  element: avatar
                  text: =$substring(@ctx.current.item.firstname, 0, 1) & =$substring(@ctx.current.item.lastname, 0, 1)
                  uri: =@ctx.current.item.photo
﻿
Avatar widget/group with title and list
In this example the avatar widget is combined with the list widget inside the group widget. The avatar widget has a component.title configured at the top to show a time and bottom to add a title and subtitle to the avatar widget.
Examples:
See the complete example in GitHub. 
Avatar widget in group widget
﻿
combined-avatar-list-1_4x4.jigx
datasource
widgets:
  4x4: 
    type: widget.group
    options:
      children:            
        - type: widget.avatar
          options:
            text: LS
            uri: https://i.pravatar.cc/400?img=59
            bottom:
              type: component.titles
              options:
                align: center
                title: Leo Siphron
                subtitle: Inter B

            top:
              type: component.titles
              options:
                icon: time-clock-circle
                iconColor: negative
                align: center
                title: 08:30 - 19:00
                subtitle: Today
                style:
                  isNegative: true
                
        - type: widget.list
          options:
            data: [email protected]
            item: 
              type: component.list-item
              options:
                title:  [email protected]
                subtitle: [email protected]
                leftElement: 
                  element: avatar
                  text: [email protected]-text
                  uri: [email protected]-uri
                
widgets:
  4x4: 
    type: widget.group
    options:
      children:            
        - type: widget.avatar
          options:
            text: LS
            uri: https://i.pravatar.cc/400?img=59
            bottom:
              type: component.titles
              options:
                align: center
                title: Leo Siphron
                subtitle: Inter B

            top:
              type: component.titles
              options:
                icon: time-clock-circle
                iconColor: negative
                align: center
                title: 08:30 - 19:00
                subtitle: Today
                style:
                  isNegative: true
                
        - type: widget.list
          options:
            data: =@ctx.datasources.components
            item: 
              type: component.list-item
              options:
                title:  =@ctx.current.item.name
                subtitle: =@ctx.current.item.subtitle
                leftElement: 
                  element: avatar
                  text: =@ctx.current.item.avatar-text
                  uri: =@ctx.current.item.avatar-uri
                
﻿
﻿

Updated 08 Aug 2024

Did this page help you?

actions (buttons)

chart

Docs powered by Archbee

TABLE OF CONTENTS

Configuration options

Core structure

Other options

Examples and code snippets

Avatar widget example

Avatar widget with title

Avatar widget/group with list

Avatar widget/group with title and list

Core structure
text	Display text content on the widget surface when the URI is empty, for example, initials.

Other options
bottom	The titles 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.
placeholders	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.
uri	Provide the uri for the image. The following can be used: - https//: imagesource - image from a datasource referenced in an expression

avatar

﻿Configuration options﻿

Core structure

Other options

﻿Examples and code snippets ﻿

Avatar widget example

Avatar widget with title

Avatar widget/group with list

Avatar widget/group with title and list

Configuration options

Examples and code snippets