Create an avatar with actions

Overview

This tutorial teaches you how to integrate the Avonni Avatar component with actions. We'll guide you through adding the Avatar component, configuring its appearance, and setting up custom actions to enhance user experience and interactivity. By the end of this tutorial, you'll have a fully functional Avatar component that displays user profile images and offers actionable options to your users.

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 Avonni Avatar Component

• Open the Component Builder

• Set fallback Icon Name >> "standard:contact"

• size >> large

• primary Text >> GetContact.fullName

• secondary Text >> GetContact.Email

• Add actions "Mark as primary" and "Delete"

• Position: bottom right

• menu icon name: utility:edit

3. Add an interaction component

In this step, we'll create an interaction for the "Mark as primary" Avatar component action, which enhances the user experience by providing an intuitive way to update contact information. When triggered, this interaction will open another flow that will update a specific field. Users can conveniently modify the contact information directly from the dialog box, ensuring seamless and efficient editing. Adding this interaction empowers users with a straightforward and user-friendly approach to maintaining accurate contact data.

Steps to create the interaction

• From the Component Builder, click the Interactions Tab on the right side

• Define the interaction based on the target action

• See all the interaction available here to find the one that will match with your use case.

Don't forget to pass the current recordID in your screen flow.