Components

avatar

4min

Using the avatar component, display a profile photo, company logo, initials, or flags as unique visual identifiers. 
Avatar preview
﻿
﻿Configuration options﻿
﻿
Core structure
﻿
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: "")
Other options
﻿
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 - 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. 
avatar-profile-picture (static)
avatar-profile-picture (dynamic)
datasources (static)
datasources (dynamic)
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]
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 with 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. 
avatar-initials (static)
avatar-initials (dynamic)
datasources (static)
datasources (dynamic)
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
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
﻿
﻿

Core structure
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: "")

Other options
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.