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:
centerleftright
size
The size of the avatar can be set to:
smallregularlarge
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: centerchildren:
- 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: centerdatasources:
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: 564332345datasources:
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: centerchildren:
- 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: centerdatasources:
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: 564332345datasources:
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]Last updated
Was this helpful?