Create a grid list with images
Last updated
Last updated
In this tutorial, we'll show you how to create a grid list of images using the Avonni List flow screen component. This component makes it easy to display a collection of items in a grid format.
We'll start by showing you how to set up the Avonni List component, including how to choose the number of columns, adjust the size of the images, and customize the grid's appearance. Then, we'll guide you through adding images to the grid using our source collection.
By the end of this tutorial, you'll have a fully functional grid list of images you can use in your flows. So let's get started!
We're setting up a variable to hold the current recordID information. We're doing this because we only want to show contacts connected to the account object for this example. To achieve this, we need to use this variable as a filter when we create a Get Records collection to retrieve records.
Create a new Screen Flow
Click on the "New Resource" button
Resource type => Variable
API name => RecordID (or your API Name)
Data Type => Record
Object => Account (or any other object that match your use case)
Check "Available for input"
We are adding a Get Records element to retrieve records from the Salesforce Contact object based on specified criteria.
Add a Get Records collection
Enter a Label name: GetContacts
Select an object > Contact
Filter by condition to only displays that belong to the current Account
Field: Account ID
Operator: Equal
Value: {!recordID.Id}
Store: All Records
Add a Screen Element
Enter an API name
Hide Header and Footer (if needed)
Drag the Avonni List
Click on the "Open Component Builder" button to access all the Avonni List component's settings
Variant : Base
Divider : Bottom
Layout: 1 column
Data Source: Variable
Source Collection : GetContacts (created in the step 2)
Label: Full Name
Name: Contact ID
Variant: Square
Icon Size: X Small
Image Source: Picture URL (or your field used to store the image)
