avatar

using the avatar component, display a profile photo, company logo, initials, or flags as unique visual identifiers configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their 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 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) children \ type component avatar options title "" uri =@ctx datasources static global picture size large align center \ type component avatar options title "" uri =@ctx datasources static global picture size regular align center \ type component avatar options title "" uri =@ctx datasources static global picture size small align center avatar profile picture (dynamic) children \ type component avatar options title "" uri =@ctx datasources dynamic global picture size large align center \ type component avatar options title "" uri =@ctx datasources dynamic global picture size regular align center \ type component avatar options title "" uri =@ctx datasources dynamic global picture size small align center datasources (static) 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 grant\@firs com phone 564332345 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] 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) 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 avatar initials (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 datasources (static) 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 grant\@first com phone 564332345 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]