avatar

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 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 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)

widgets:    
  avatar-widget:
    type: widget.avatar
    options:
      text: =$substring($substringBefore(@ctx.datasources.static-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.static-global.name, " "), 0, 1)
      uri: [email protected]
      bottom: 
        type: component.titles
        options:
          align: center
          title: [email protected]
          subtitle: =$fromMillis($toMillis(@ctx.datasources.static-global.date_from),'[H01]:[m01]') & '-' & $fromMillis($toMillis(@ctx.datasources.static-global.date_to),'[H01]:[m01]')

avatar-widget (dynamic)

grid-item

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:
  avatar2-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                  

grid-item

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)

widgets:
  patientStatic-4x2:
    type: widget.group
    options:
      children:
        - type: widget.avatar
          options:
            text: =$substring($substringBefore(@ctx.datasources.static-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.static-global.name, " "), 0, 1)
            uri: [email protected]
        - type: widget.list
          options:
            data: [email protected]
            item:
              type: component.list-item
              options:
                title: [email protected]
                subtitle: =$fromMillis($toMillis(@ctx.current.item.date_from),'[H01]:[m01]') & '-' & $fromMillis($toMillis(@ctx.current.item.date_to),'[H01]:[m01]')
                leftElement:
                  element: avatar
                  text: =$substring($substringBefore(@ctx.current.item.name, " "), 0, 1) & $substring($substringAfter(@ctx.current.item.name, " "), 0, 1)
                  uri: [email protected]

avatar-group (dynamic)

grid-item

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

widgets:
  combined-avatar-list1-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]
                  uri: [email protected]                

datasource

grid-item