Skip to Main Content

Overview

The Avatar partial is useful for displaying an icon, image, or initials within a region. This partial can be used to display a single avatar, or can be applied in report templates to display an avatar for each report row.

Demo: Interactive Report

NameEmailJobAvatar
Fernanda Mendezfernanda.mendez@yourcompany.comProduct Manager Fe
Krist Grohlk.grohl@yourcompany.comQuality Manager Kr
Charles Statmancharlie.s@yourcompany.comQA Specialist Ch
Susan Parrishsusan.parrish@yourcompany.comSoftware Developer Su
Johnnathan Briejohnathan.b@yourcompany.comTeam Lead Jo
  • 1 - 5

Region

Type: Interactive Report

Avatar Column

In Interactive Reports, the Avatar partial is available for use as a column Type. The Avatar column in this demo uses the Avatar column Type and associated Partial settings to display an avatar in each row.

Avatar

Type: Initials
Initials: Initials source column
Shape: Default
Size: Default
CSS Classes: u-color-13

select ID,
       TITLE as name, 
       SUBTITLE as job,
       BODY as email,
       substr(TITLE, 0, 2) as AVATAR
  from EBA_UT_DEMO_CARDS
 where category = 'badge'

Demo: Classic Report

Employee Profile ImageFernanda Mendezfernanda.mendez@yourcompany.comProduct Manager
Employee Profile ImageKrist Grohlk.grohl@yourcompany.comQuality Manager
Employee Profile ImageCharles Statmancharlie.s@yourcompany.comQA Specialist
Employee Profile ImageSusan Parrishsusan.parrish@yourcompany.comSoftware Developer
Employee Profile ImageJohnnathan Briejohnathan.b@yourcompany.comTeam Lead

Region

Type: Classic Report

Avatar Column

The Avatar column uses the with-apply syntax in the HTML Expression attribute under Column Formatting to access the Avatar partial and display an avatar in each row.

Type: Plain Text
HTML Expression: {with/} TYPE:=IMAGE IMAGE:=#AVATAR# IMAGE_ALT:=Employee Profile Image SIZE:=t-Avatar--lg SHAPE:=t-Avatar--circle CSS_CLASSES:=u-color-29 {apply THEME$AVATAR/}

select ID,
       TITLE as name, 
       SUBTITLE as job,
       BODY as email,
       '#APP_FILES#' || IMAGE_URL as avatar
  from EBA_UT_DEMO_CARDS
 where category = 'badge'