VideosProjectsExperience CloudAppExchange

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.

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.

Since we're putting this Data Table on a specific record's page (like an Account page), we must ensure it only shows the relevant contacts. We'll filter the query using the "RecordId" variable we created in Step 2.

For example, we'll filter the contacts in the Data Table so they only show if their Account ID matches the ID of the record the user is viewing.

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.

If you've made some fields editable, remember to add an "Update Records" action to the "Save" button. This will ensure that the changes you make in the table are saved back to Salesforce.

You can find more information about how to do this here.

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.

When you add this flow to a record page, it's important to tick the "RecordId" checkbox in App Builder. This tells Salesforce to send the ID of the record you're currently viewing to the "recordId" variable we made in Step 2.

Step 12: Testing and Finalization

Test the functionality to confirm the correct operation.

Wrapping-Up

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

Additional Resources

Last updated