Components for Experience Cloud Get It on the AppExchange

Create a grid list with images

Overview

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!

Result

Steps

1. Create an input variable

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"

2. Create the Get Records collection

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

3. Add a Screen Element and the Avonni List

  • 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

4. Configure the Avonni List

  • Variant : Base

  • Divider : Bottom

  • Layout: 1 column

  • Data Source: Variable

  • Source Collection : GetContacts (created in the step 2)

Data Mapping

  • Label: Full Name

  • Name: Contact ID

Avatar

  • Variant: Square

  • Icon Size: X Small

  • Image Source: Picture URL (or your field used to store the image)

Last updated