PowerApps Sorting & Searching in Gallery Control

Introduction 

PowerApps Gallery controls come in handy for displaying data in various view styles. While a Data Table control offers a tabular view similar to Excel. Gallery Control expands the options to include formats like Horizontal Card Format and Vertical Card Format etc.. 

In this article I’ll walk you through achieving these features within a PowerApps Gallery Control. I’ll use a SharePoint List as the data source and create a Stand- alone Canvas App. However you have the flexibility to choose other data sources like SQL Data, CDS Entity or an Excel file. 

 

Searching and Sorting in Gallery Control 

To kick things off let’s focus on the initial screen where we’ll introduce the Search and Sort features for the Gallery Control: 

Step 1: Incorporate a “Blank Vertical” Gallery onto the screen. 

PowerApps sorting searching Gallery control

Step 2: Link the Gallery’s “Items” property to the data source.

Step 3: Customize the Gallery Control by incorporating labels to display data from the source, arrange these labels neatly in a tabular layout.

PowerApps sorting searching Gallery control

Step 4: Now select the Gallery Control and in the properties panel, for “Fields” click on Edit and map the labels with desired columns from the Datasource.

PowerApps sorting searching Gallery control

Step 5: Place the following controls outside the Gallery Control:

  • Labels functioning as column headers for the
  • Sort Icons to facilitate sorting of Gallery
  • A Text Box designated for entering search

Step 6: So far, your screen should look something like below:

PowerApps sorting searching Gallery control

Step 7: Next let’s apply some formulas to the controls to enable the search and sort features. In the Screen’s “OnVisible” property establish the following two variables, which will be utilized in subsequent formulas.

PowerApps sorting searching Gallery control

Step 8: In the “OnSelect” property of each Sort Icon control assign a Text Identifier to the ‘varSortBy‘ variable and adjust ‘varSortAsc‘ to enable sorting in either Ascending or Descending order. The use of UpdateContext here toggles the value of the Boolean variable.

Ex: for Job Title column:

PowerApps sorting searching Gallery control

Step 9: Lastly we’ll modify the “Items” property of the Gallery control. It will incorporate both the SortbyColumn and Search functions, the syntax for this property will be structured as follows:

PowerApps sorting searching Gallery control

Conclusion

In summary, PowerApps Gallery controls offer a dynamic approach to showcasing data with various visual styles expanding beyond the conventional tabular presentation of Data Table controls.