How to Display Power Apps Collection Data in Gallery?

Have you ever tried to display the Power Apps collection items in the gallery? If Not, then follow this complete tutorial!

In this Power Apps tutorial, I will explain how to display Power Apps collection data in gallery.

Moreover, I will describe how to show collection items in the gallery using the Power Apps form.

How to Display Power Apps Collection Data in Gallery

Let’s discuss how to display the collection data in the Power Apps gallery step by step:

Example – 1:

I have created a Power Apps Collection Manually on my Power Apps screen and then added a Gallery control to display the collection items as shown below:

Display Power Apps collection items in the gallery

Follow the below steps to achieve it:

1. On the Power App’s App OnStart property, provide the code to create a Power Apps collection from the SharePoint list:

ClearCollect(
    colProducts,
    {
        'Product Name': "Laptop",
        'Vendor': "HP",
        'Product Ordered Date': "08/11/2023"
    },
    {
        'Product Name': "Xbox Series S 1-TB",
        'Vendor': "Microsoft",
        'Product Ordered Date': "23/11/2023"
    },
    {
        'Product Name': "Mouse",
        'Vendor': "Dell",
        'Product Ordered Date': "03/10/2023"
    },
    {
        'Product Name': "Smart Phone",
        'Vendor': "Lenovo",
        'Product Ordered Date': "11/11/2023"
    },
    {
        'Product Name': "Head Phone",
        'Vendor': "HP",
        'Product Ordered Date': "10/10/2023"
    },
    {
        'Product Name': "Laptop",
        'Vendor': "Dell",
        'Product Ordered Date': "23/11/2023"
    }
)

Where,

  • colProducts = Provide the collection name
  • Product Name, Vendor, Product Ordered Date = Collection column names
How to display Power Apps collection items in the gallery

2. Now, we will Run OnStart, to create a collection [On the App, click on the More options () -> Then select Run OnStart].

How to show Power Apps collection data in gallery

3. As per the screenshot below, we can see that the Power Apps collection has been created manually.

How to use collection in the Power Apps gallery control

4. On the Power Apps screen, insert a Gallery control and set its Items property to:

colProducts 

Where,

  • colProducts = Collection name
Display collection items in the Power Apps gallery

5. SavePublish, and Preview the app. The Power Apps gallery control will display the collection items.

Power Apps display collection items in the gallery control

This is how I displayed the Power Apps collection items in the Gallery.

Example 2:

I have a SharePoint list [Employee Details] that has various columns like:

Column NameData Type
Employee IDTitle
Employee NameSingle line of text
Employee DepartmentChoice [Finance, Marketing, HR, IT]

Refer to the image below:

Display the Power Apps collection items to gallery

On my Power Apps screen, I have added an Edit form and a Button control. The form is connected to the above SharePoint list whenever the user provides the details in the form and clicks the button control [Submit].

The provided details of the form will be displayed to the Gallery control as shown below:

Power Apps display collection items to gallery

Follow the below steps to achieve this:

1. On the Power Apps screen, insert an Edit form. Then, add a new data source for the above SharePoint list and set the Edit form’s Data source property:

'Employee Details'

Where,

  • Employee Details = Datasource name
How to display Power Apps collection items to gallery

2. On the Power App’s form, insert a Button control -> Set its OnSelect property to:

Collect(
    colEmp,
    {
        EmpID: DataCardValue1.Text,
        EmpName: DataCardValue2.Text,
        EmpDepartment: DataCardValue3.Selected.Value
    }
);
ResetForm(Form1);

Where,

  • colEmp = Provide the collection name
  • EmpID, EmpName, EmpDepartment = Provided the collection column names
  • DataCardValue1 = Employee ID, text-input control name
  • DataCardValue2 = Employee Name, text-input control name
  • DataCardValue3 = Employee Department, Combo box control name
Display Power Apps collection data to gallery

3. Insert a Gallery control -> Set its Items property to:

colEmp 

Where,

  • colEmp = Collection name
How to Display Power Apps collection data in gallery

4. SavePublish, and Preview the app. Whenever the user provides the details in the form and clicks the button control [Submit], the provided details will be displayed in the gallery control.

Display collection items to gallery in Power Apps

We can display the Power Apps collection items in the gallery using the Power App’s form.

Conclusion

I hope this Microsoft Power Apps tutorial gave you complete information about how to display the Power Apps collection items in the gallery.

Lastly, I have shown you the Power Apps display collection items in the gallery using the Power Apps form.

Also, you may like some more Power Apps tutorials: