avatar

Using the avatar component, display a profile photo, company logo, initials, or flags as unique visual identifiers.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

title

Add a title for the avatar, this is text displayed when the uri is empty. In the visual presentation, the title can be substituted by an image using the uri property. But the content of the text property has to be kept at least to the empty string: "")

align

By default the avatar is aligned left but can be changed to:

center
left
right

size

The size of the avatar can be set to:

small
regular
large

uri

Source of the image to display as the avatar.

Examples and code snippets

Avatar as children of jig (profile picture)

This example shows the avatar component in a jig. It can be used for employee headshots, company logos, or flags.

Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

children:
  - type: component.avatar
    options:
      title:  ""
      uri: [email protected]
      size: large
      align: center
  - type: component.avatar
    options:
      title:  ""
      uri: [email protected]
      size: regular
      align: center
  - type: component.avatar
    options:
      title:  ""
      uri: [email protected]
      size: small
      align: center

children:
  - type: component.avatar
    options:
      title:  ""
      uri: [email protected]
      size: large
      align: center
  - type: component.avatar
    options:
      title:  ""
      uri: [email protected]
      size: regular
      align: center
  - type: component.avatar
    options:
      title:  ""
      uri: [email protected]
      size: small
      align: center

datasources:
  static-global:
    type: datasource.static
    options:
      data:
        - name: July Nelson
          picture: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          date_from: "2022-06-10T10:00:00Z"
          date_to: "2022-0610T10:30:00Z"
          email: [email protected]
          phone: 564332345

datasources:
  dynamic-global:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/global
      query: |
        SELECT
          '$.name',
          '$.picture',
          '$.date-from',
          '$.date-to',
          '$.email',
          '$.phone'
        FROM [default/global]

Avatar as children of jig (initials)

As in the previous example, we use the avatar component for detail. In this case, we use the initials of the user or employee. It's useful if you don't have a picture of them.

Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub

children:
  - type: component.avatar
    options:
      title:  =$substring($substringBefore(@ctx.datasources.static-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.static-global.name, " "), 0, 1)
      size: large
      align: center
  - type: component.avatar
    options:
      title:  =$substring($substringBefore(@ctx.datasources.static-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.static-global.name, " "), 0, 1)
      size: regular
      align: center
  - type: component.avatar
    options:
      title:  =$substring($substringBefore(@ctx.datasources.static-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.static-global.name, " "), 0, 1)
      size: small
      align: center

children:
  - type: component.avatar
    options:
      title:  =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
      size: large
      align: center
  - type: component.avatar
    options:
      title:  =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
      size: regular
      align: center
  - type: component.avatar
    options:
      title:  =$substring($substringBefore(@ctx.datasources.dynamic-global.name, " "), 0, 1) & $substring($substringAfter(@ctx.datasources.dynamic-global.name, " "), 0, 1)
      size: small
      align: center

datasources:
  static-global:
    type: datasource.static
    options:
      data:
        - name: July Nelson
          picture: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          date_from: "2022-06-10T10:00:00Z"
          date_to: "2022-06-10T10:30:00Z"
          email: [email protected]
          phone: 564332345

datasources:
  dynamic-global:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/global
      query: |
        SELECT
          '$.name',
          '$.picture',
          '$.date-from',
          '$.date-to',
          '$.email',
          '$.phone'
        FROM [default/global]

PreviousCommon component properties Nextavatar-field

Last updated 5 months ago

Was this helpful?

Good evening

hashtagConfiguration options

hashtagExamples and code snippets

hashtagAvatar as children of jig (profile picture)

hashtagAvatar as children of jig (initials)

Configuration options

Examples and code snippets

Avatar as children of jig (profile picture)

Avatar as children of jig (initials)