Advanced related list

Overview

Standard Salesforce-related lists often don't offer the level of control and interactivity users want. This tutorial shows you how to use the Avonni Data Table component within a Salesforce flow to enhance your related lists. With Avonni Data Table, you can add custom actions, filters, and search options and edit data within the table.

Video Tutorial

Step-by-Step

Step 1: Create a New Screen Flow

Create a screen flow in the Salesforce setup.

Step 2: Create a Record ID Variable

We need a variable to store the unique ID of the record (like an Account or a Contact) that this flow is running on. This lets us use that record's information throughout the flow.

• Steps:

  1. In the Flow Builder, go to the "Manager" tab on the left side.

  2. Click the "New Resource" button.

  3. Choose "Variable" as the resource type.

  4. Give it the name "RecordId".

  5. Set the "Data Type" to "Text".

  6. Under "Allow flow users to set the initial value of this variable", choose "Input Only".

  7. Click "Done" to create the variable.

Now, whenever you start this flow from a specific record's page, Salesforce will automatically put that record's ID into this "recordId" variable, and you can use it in your flow's logic and components

Step 3: Add a Screen Element

Place a screen element on the canvas by customizing its properties.

Step 4: Add the Avonni Data Table Component

Incorporate the Avonni Data Table into the screen layout.

Step 5: Configure the Data Source

We'll create a query on the Contact object so we can choose which contact fields to display in our custom data table.

Step 6: Data Mappings Configuration

Now, let's match the Salesforce fields with the columns in your Avonni Data Table. We'll add the fields you want to see, like Full Name, Department, Title, Email, etc..

Step 7: Customize Field Properties

Now, let's fine-tune each column. You can make them editable (so users can change the data right in the table), searchable (so users can find specific information), or filterable (so users can narrow down the data).

For instance, if you want users to be able to edit or filter by Department, turn on those options for that column.

Step 8: Group Your Data (Optional)

You can organize your related list by a specific field here. For example, you could group all the employees by their Department. Select the "Department" field to group the information in the Data Mappings section.

Step 9: Configure Header and Button Actions

To make your Data Table look and feel like a regular Salesforce related list, customize the Header section:

• Add a title to the Header (like "Contacts").

• Include an avatar icon if you'd like.

• Create any actions you need, such as a "New Employee" button or an "Export List" button.

Step 10: Save and Activate the Flow

Ensure the flow is named descriptively, saved, and activated.

Step 11: Embed the Flow in the Account Record Page

Add the flow to the desired location in the Account Record Page layout in the Lightning App Builder.

Step 12: Testing and Finalization

Test the functionality to confirm the correct operation.

Wrapping-Up

We've gone beyond the basic related lists using the Avonni Data Table within Salesforce flows. You now have a more interactive and powerful tool that can adapt to your business needs.

Additional Resources

• Avonni Data Table Documentation

• Instructions on creating interactions to open other flows

• Guidelines on enabling auto-refresh for queries post-Flow Dialog