Advanced related list
Last updated
Last updated
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.
Create a screen flow in the Salesforce setup.
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:
In the Flow Builder, go to the "Manager" tab on the left side.
Click the "New Resource" button.
Choose "Variable" as the resource type.
Give it the name "RecordId".
Set the "Data Type" to "Text".
Under "Allow flow users to set the initial value of this variable", choose "Input Only".
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
Place a screen element on the canvas by customizing its properties.
Incorporate the Avonni Data Table into the screen layout.
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.
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..
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.
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.
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.
Ensure the flow is named descriptively, saved, and activated.
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.
Test the functionality to confirm the correct operation.
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.
Having trouble with this tutorial? Contact Avonni support for help.
