Use ClearCollect and Bind Data into a Gallery in PowerApps Canvas Apps

How to Use ClearCollect and Bind Data into a Gallery in PowerApps Canvas Apps: Filter Employees by Age Greater Than 30

Today, someone from one of the WhatsApp groups I am a member of asked for help:

Hello everyone,

I have a scenario where I am fetching records from Dataverse and displaying them in a horizontal gallery control. I need to display certain columns of the Dataverse records in the gallery, but only based on specific conditions. Could anyone guide me on how to achieve this?

Thank you in advance!

In this blog, we will explore how to use the ClearCollect function and bind data into a Gallery, leveraging SharePoint as the data source. Our goal is to filter employees whose age is greater than 30 and display the results in a Gallery.

Step 1: Set Up the SharePoint Data Source

Create a SharePoint List:

Navigate to your SharePoint site and create a list named Employees.

Add the following columns:

• Title (Single line of text) - Represents the employee's name.
• Age (Number) - Represents the employee's age.

Populate the List:

Add some sample data:

Title	Age
John Smith	28
Mary Jones	35
Alice Brown	40
David White	29
Sarah Green	32

Step 2: Connect the Data Source in PowerApps

Open PowerApps Studio and create a new Canvas App.

1. Click on Data in the left-hand menu.
2. Select + Add Data and search for SharePoint.
3. Connect to your SharePoint site and select the Employees list.

Step 3: Add a Button to Load the Filtered Data

Insert a button into the Canvas App:

1. Insert a button into the Canvas App:
   • Go to the Insert menu and select Button.
   • Set the button's Text property to "Filter Employees".
2. Set the button's OnSelect property to the following formula:

   ClearCollect(
       FilteredEmployees,
       Filter(Employees, Age > 30)
   )

   Explanation:

   • ClearCollect: Clears any existing data in the collection and adds the new filtered data.
   • FilteredEmployees: Name of the collection to store filtered employee data.
   • Filter(Employees, Age > 30): Filters the Employees list where the Age column is greater than 30.

Step 4: Add a Gallery to Display the Filtered Data

Insert a Gallery:

1. Go to the Insert menu and select Gallery.
2. Choose a vertical layout.

Bind the Gallery to the FilteredEmployees Collection:

1. Select the Gallery.
2. Set its Items property to:

   FilteredEmployees

Customize the Gallery:

1. Click on the first item in the Gallery to select the template.
2. Add a Label to display the employee name:
   • Set the Text property to:

     ThisItem.Title

3. Add another Label to display the age:
   • Set the Text property to:

     ThisItem.Age

4. Save and run the app by pressing F5.
5. Click the Filter Employees button.
6. Verify that the Gallery updates to display only employees aged greater than 30.

For example:

• Mary Jones (Age 35)
• Alice Brown (Age 40)
• Sarah Green (Age 32)

Step 6: Optional Enhancements

1. Add Search Functionality:
   • Insert a Text Input box for the search term.
   • Modify the filter formula to include a search condition:

     ClearCollect(
         FilteredEmployees,
         Filter(Employees, Age > 30 && StartsWith(Title, TextInput1.Text))
     )

2. Show a Message When No Records Are Found:
   • Insert a Label below the Gallery.
   • Set its Visible property to:

     IsEmpty(FilteredEmployees)

   • Set its Text property to:

     "No employees found."