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 TitleDestinationAirlineStart DateEnd Date
Company anniversary tripIndiana, UKAlaska Air11/25/202311/31/2023
Research interviewsBengaluru, IndiaSouthWest12/15/202312/20/2023
Design sprintNew York, UKBritish Airways1/22/20241/28/2024
Sales team conferenceGeorgia, UKEmirates2/15/20242/20/2024
Client meetingsAustria, UKJapan Airlines3/25/20243/30/2024

Refer to the below screenshot:

display powerapps collection on gallery

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

How to Display PowerApps Collection using Gallery control

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
display powerapps collection on gallery control

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

See also  Power Apps Data Table Default Select Row

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

how to display powerapps collection on gallery

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

how to display powerapps collection on gallery control

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
how to show powerapps collection on gallery

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

how to show powerapps collection on gallery control

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.

show powerapps collection on gallery

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.

Display PowerApps Collection using Gallery control

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
display collection on powerapps gallery control

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.

how to show collection on powerapps gallery

To do so, follow the below steps.

See also  How to Add Gallery Data to a Collection in Power Apps

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
how to display collection on powerapps gallery control

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

how to display collection on powerapps gallery

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

display collection on powerapps gallery

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

how to show collection on powerapps gallery control

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:

>