Components

avatar

7min

This component can be used as a unique visual identifier, for example, to display a profile photo, company logo, initials, or flags.
Avatar preview
﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: title 
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 - There are 3 options available:
center
left
right
size - The size of the avatar
small
regular
large
﻿Examples and code snippets ﻿
Avatar as children of jig (profile picture)
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 as children of jig (initials)
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
﻿
See also
﻿Developer reference 
﻿Related examples (GitHub)﻿
﻿

Updated 19 Sep 2023

Did this page help you?

TABLE OF CONTENTS

Configuration options

Examples and code snippets

Avatar as children of jig (profile picture)

Avatar as children of jig (initials)

avatar

﻿Configuration options﻿

﻿Examples and code snippets ﻿

Avatar as children of jig (profile picture)

Avatar as children of jig (initials)

See also

Configuration options

Examples and code snippets