Configure an avatar component for Work scheduler

Use the Container component to add an avatar and the user name of the work item assignee.

Before you begin

Role required: admin, workspace_admin, or ui_builder_admin​

Procedure

1. In the Content section, navigate to Body(Flex) > Card Base Container (Flex) > Card Base Header.
2. Right-click Card Base Header and select Add component after.
3. In the pop-up screen, select the Label value stacked component.
4. In the left pane, right-click Label value stacked and select Add component after.
5. Configure the component.
   1. In the Components pop-up screen, select Container.
   2. In the Config tab, do the following:
      1. Select the Edit component visibility icon ().
      2. Hover over the Hide component field and select the Dynamic data binding icon .
      3. In the Hide component field, enter !@state.cardProps.assignedTo
      4. In the Direction menu, select Row.
      5. In the Styles tab, in the Align items field, select the center icon.
      6. Select Save.
6. To add the Avatar component, select Container(Flex) > +Add component.
7. Select +Add component
   The Components pop-up screen appears.

   To	Do this
   Add the Avatar component	In the configure tab, set the size, user name, and tooltip. In the Size menu, select Medium. Hover over the User name menu, and select the Dynamic data binding icon . In the User name menu, type !@state.cardProps.assignedTo. Hover over the Tooltip text menu, and select the Dynamic data binding icon . In the Tooltip text menu, type !@state.cardProps.assignedTo.
   Add the Label Value Tabbed component	In the configure tab, set the size, and items. In the Size menu, select Small. Hover over the Items field and select the Dynamic data binding icon . In the Items field, enter [{value: @state.cardProps.assignedTo} Select Save.

   Here's a demo on how to configure an avatar component for Work scheduler