Components for Experience Cloud Get It on the AppExchange

Vertical List with Actions

Overview

This tutorial will teach you how to make a vertical list with interactive buttons using the Avonni List component. By the end, you'll have an excellent new list ready for your projects.

Let's dive in

Final Result

Steps

  • Goal: We want to gather a list of contacts linked to a specific account in Salesforce.

  • How it Works:

    • Think of it like a search: We'll use a screen flow element called "Get Records" to search through your Salesforce contacts.

    • Label: We'll call this search "GetContacts" to keep it organized.

    • Filtering: We only want contacts attached to the current account, so we'll tell the tool to look for the "Account ID" and match it to the account we're currently viewing ({!recordID.Id}).

1. Add a screen component and the Avonni List

  • Add a Screen element

  • Enter an API name

  • Hide Header and Footer (if needed)

  • Drag the Avonni List component

  • Click the "Open Component Builder" button to access all the Avonni List component's settings.

2. Data Source configuration

The Data Source section is where you tell the Avonni List component what kind of Salesforce data it should display and how to find the correct information. This tutorial focuses on displaying Contact records relevant to a specific Account.

Step-by-Step Instructions

  1. Select Salesforce Object: Choose the "Contact" object from the data source options. This tells the component to focus on Contact records.

  2. Create a Query: We'll build a query directly within the component to fetch the relevant Contacts. This is where we make sure the list is tailored to our needs.

  3. Apply a Filter: Set up a filter with these conditions:

    • Field: "Account ID"

    • Operator: "Equal"

    • Value: {!recordId.Id} (This flow variable represents the current Account record's ID)

Explanation of the Filter: By using the above filter, we are telling the component only to display Contact records where the "Account ID" field matches the ID of the Account we are currently viewing. This ensures the list shows the correct, related Contacts.

3. Data Mapping configuration

The Data Mapping section is where you "translate" your Salesforce data into the visual format of your Avonni List. You'll decide which Salesforce fields (like "Name" or "Title") should be displayed in specific parts of your list items.

Step-by-Step Instructions:

  1. Map the Label:

    • Find the "Label" attribute for your list items.

    • Map it to your Salesforce Contact data's "Full Name" field. This means the contact's full name will be the main text of each list item.

  2. Map the Description:

    • Locate the "Description" attribute for your list.

    • Map it to the "Title" field from your Salesforce Contact data. This puts the contact's job title under their name as a descriptive line.

  3. Continue Mapping:

    • Follow the same pattern for other information you want to display in your list. Map the right Salesforce fields to the corresponding Avonni List attributes.

Example: You might want to map an email field or phone number field to be displayed. The power is in your hands.

4. Customizing Your Avonni List

Get the Look You Want

Now that we've connected your list to Salesforce, let's make it look great and add useful features! Here's what you can customize:

  • Dividers: Add a "bottom divider" to create clear visual separation between list items.

  • Clickable Items: Make your list items links! You can then add an interaction that tells the system what happens when a user clicks (for example, opening a record).

  • Layout: Choose a column layout to control the number of items displayed per row, tailoring the look to your needs.

  • Item Actions: Provide users with quick options for each list item. In our example, we'll add "Change Owner," "Edit," and "Delete" actions for each Contact.

5. Creating Item Actions

Make your list more powerful! Item actions let users take quick actions directly from each item in your list. Here's how to add them:

  • Expand 'Actions' Section: Find the "Actions" section of the Avonni List configuration.

  • Add Item Actions: Click "Add Item Actions" to create action buttons.

  • Label and Icons: For each action, give it a clear label (like "Change Owner") and choose a fitting icon if you'd like.

6. Making item actions functional

Your new action buttons look great, but they don't do anything yet. Let's fix that!

Ready to Dive In? Let's head to the "Interactions" tab and start making those actions do their magic!

Last updated