How to Display Power Apps Collection on Gallery?

How can you display the Power Apps collection on a gallery control? This Power Apps tutorial will teach how to display the Power Apps collection on a gallery in two ways. Such as:

1. Display manual Power Apps collection records on gallery control
2. How to display Power Apps collection on gallery [From SharePoint list]

Display PowerApps Collection on Gallery

Here, we will discuss how to display the Power Apps collection data on a gallery control with a simple scenario.

Scenario:

I have created a Power Apps collection, i.e., [colTravel] manually and this collection contains the below headers and records.

Trip Title	Destination	Airline	Start Date	End Date
Company anniversary trip	Indiana, UK	Alaska Air	11/25/2023	11/31/2023
Research interviews	Bengaluru, India	SouthWest	12/15/2023	12/20/2023
Design sprint	New York, UK	British Airways	1/22/2024	1/28/2024
Sales team conference	Georgia, UK	Emirates	2/15/2024	2/20/2024
Client meetings	Austria, UK	Japan Airlines	3/25/2024	3/30/2024

Refer to the below screenshot:

Now, I want to display these Power Apps records on the gallery control, as in the screenshot below.

To achieve it, follow the below-mentioned steps. Such as:

1. Open Power Apps -> Create Power Apps Canvas app -> Select App object [From the left navigation] and set its OnStart property to the code below.

OnStart = ClearCollect(
    colTravel,
    {
        TripTitle: "Company anniversary trip",
        Destination: "Indiana,UK",
        TravelStartDate: "9/25/2023",
        TravelEndDate: "9/31/2023",
        Airline: "Alaska Air"
    },
    {
        TripTitle: "Research interviews",
        Destination: "Bengaluru,India",
        TravelStartDate: "10/15/2023",
        TravelEndDate: "10/20/2023",
        Airline: "SouthWest"
    },
    {
        TripTitle: "Design sprint",
        Destination: "New York,UK",
        TravelStartDate: "11/22/2023",
        TravelEndDate: "11/28/2023",
        Airline: "British Airways"
    },
    {
        TripTitle: "Sales team conference",
        Destination: "Georgia,UK",
        TravelStartDate: "12/20/2023",
        TravelEndDate: "12/25/2023",
        Airline: "Emirates"
    },
    {
        TripTitle: "Client meetings",
        Destination: "Austria,UK",
        TravelStartDate: "1/20/2024",
        TravelEndDate: "1/27/2024",
        Airline: "Japan Airlines"
    }
)

Where,

• colTravel = Power Apps Collection Name
• TripTitle, Destination, TravelStartDate … = Collection Headers/Columns
• “Company anniversary trip”, “Indiana, UK”… = Collection Values/Records

2. Next, click on the App more commands (…) option and click on the Run OnStart option to get our collection.

3. Then, go to the Variables section (x) -> Expand Collections drop-down to find collections, as shown below.

4. If you want to see your created collection, click the View Table option and select the respective collection like below.

5. Next, on the PowerApps screen -> Insert a Gallery control (Go to Insert tab -> Gallery -> Select Black vertical gallery (you can choose any type of gallery control) -> Set its Items property as:

Items = colTravel

6. Similarly, if you want to change the gallery layout, you can select it using the Layout property shown below.

7. Also, if you want to display the particular collection fields, click on the Edit option from the Fields property to help you edit the Layout design.

8. Save, Publish, and Preview the app. The Power Apps gallery will display each record from the Collection based on the gallery layout design, as in the screenshot below.

This is how to display the manual Power Apps collection on a gallery control.

Display Power Apps Collection on Gallery [From SharePoint List]

Let’s see how to display the collection [From the SharePoint list] on a Power Apps gallery control with a simple example.

Example:

I have a SharePoint Online list named “Product Details” and this list contains the below fields.

• Product Name: Default single line of text
• Manufacturer: Choice
• Price: Currency
• Purchase Date: Date and time

Also, I have created a Power Apps collection [colProducts] using my SharePoint list records. Now, I want to display this collection on a gallery control like the one below.

To do so, follow the below steps.

1. Open your Power Apps app -> Connect the respective SharePoint list -> Select a specific screen and set its OnVisible property to the code below.

OnStart = ClearCollect(
    colProducts,
    'Product Details'
)

Where,

• colProducts = Power Apps Collection Name
• ‘Product Details’= SharePoint Online List

2. Save, Publish, and Reload the app -> Insert a Gallery control and set its Items property as:

3. To display the collection records, just click on the Edit option from the Fields property and select the required fields like below.

4. Now, the Power Apps gallery will display each record from the collection as shown below.

This is how to display the Power Apps collection records on a Gallery control.

Conclusion

I trust this Power Apps tutorial taught in detail information about displaying Power Apps collection records on a gallery control, including:

• How to display the manual Power Apps collection records on a gallery control
• Display the Power Apps collection records on a gallery control [From SharePoint List]

You may also like:

• How to Sort Power Apps Gallery By ID?
• Power Apps Filter Gallery By Quarter
• Power Apps Filter Gallery By Year
• Power Apps Filter Gallery By Last Week