Interactive Contact List
Last updated
Last updated
This tutorial will create a dynamic component that responds to user actions. We'll use the Avonni List and Record Details components to show a list of contacts. When you click on a contact, their details will appear on the right side of the screen.
In this step, we'll add the Avonni Header component to the top of our screen. This creates a consistent look across our design, clarifying that this section is for viewing contact details. The header will have the title "Contact List" and an avatar image.
Before we add the Avonni List component, we need to include a "Section" element. This is important because it splits our screen into two separate areas, allowing us to organize our content better. The columns configuration will be 4 / 12.
We'll use the Avonni List component to fill the left side of our screen. This list will show all of our contacts, and when you click on a contact, the information on the right side will automatically update to show that contact's details.
The Avonni List lets you display a list of records from your Salesforce data. In this tutorial, we want to show a list of contacts. To do this, we'll configure the "Data Source" section of the list component. We'll use the "Query" option, making connecting directly to your Salesforce contact data from the list component easy.
Connecting Contact Data to the List
We need to tell the list which parts of our contact data to show. We'll set the "Full Name" field as the main label for each contact and the "Title" field as a short description below the name.
We also want to display a picture for each contact. So, we'll connect a custom field that stores the contact's image URL to the "Image Source Avatar" attribute. Then, we'll make the icon medium-sized and circular in the avatar settings.
Displaying the Selected Contact's Name
On the right side of the screen, we'll add an Avonni Header component to show the full name of the contact you clicked on in the list.
To ensure the Header shows the correct name, we must connect its "title" attribute to the "Full Name" field from the List component. This way, whenever you click a different contact in the list, the Header will automatically update to show that contact's name.
We'll also customize the Avonni Header. In the Style panel, we'll set the background color to white so it matches the look of the other components on the screen.
Underneath the header, we'll add a Button Group. This will let us display several buttons to perform different actions related to the contact's details. You can customize each button however you like.
Set up an "interaction" for each button to tell it what to do when clicked. For instance, if you have a button labeled "Edit," you'd set its interaction to navigate to the selected contact's full page in Salesforce. For the record id attribute, make sure to map this attribute to the list clicked item name and contact id value as we did already for the header.
Displaying Contact Details with the Avonni Record Details Component
The final step is to set up the Avonni Record Details component. This component will show the relevant information for the contact you've selected from the list.
Configuring it is simple:
Choose the object you want to display fields from (in this case, "Contact").
For the "Record ID," connect it to the "Contact ID" value from the clicked item in the Avonni List. This ensures that the right contact's details are shown.
Next, customize the Record Details component:
Choose which specific fields you want to display.
Decide how many columns you want to arrange the fields into
Having trouble with this tutorial? Contact Avonni support for help.
