Components for Experience Cloud Get It on the AppExchange

Create an avatar with details

Overview

In this tutorial, we'll walk you through adding the Avonni Avatar component to display specific details, such as full name and title, from a Salesforce record. Combining the Avatar component's visual appeal with relevant field information will create a more engaging and informative user interface.

Result

The final result will look like this:

Steps

1. Create the recordID text variable

In the context of adding the Avonni Avatar Component, creating a recordID text variable and making it available for input is essential. This enables the Avatar Component to accurately match and display information associated with the current recordID.

2. Create the Get Records Collection

In adding the Avonni Avatar component with actions, creating a Get Records collection to fetch contact information is essential. By utilizing the recordID text variable we previously created, the Get Records collection will retrieve the specific contact data associated with that recordID. This enables the Avonni Avatar component to display the contact's avatar accurately.

  • Add a Get Records element

  • Linked to the Contact Object

  • Filter by: All Conditions are Met (AND)

    • Contact ID EQUAL > RecordID (text variable created in step 1)

3. Create the screen flow and add the Avonni Avatar Component

4. Configure the Avatar component

To configure the Avonni Avatar component and add detailed information next to the avatar, follow these simple steps:

  1. Open the component within your flow builder.

  2. Navigate to the properties panel on the right side of the screen.

  3. Expand the 'Text' section to reveal the primary and secondary text options.

  4. Switch to the 'Mapped View' for both primary and secondary text fields.

  5. Select your record variable from the list of available options.

  6. Choose the specific fields you want to display as primary and secondary text, such as full name and title.

By completing these steps, you'll have successfully configured the Avonni Avatar component to display the desired details alongside the avatar, creating a more informative and visually appealing user interface.

Last updated