Power Apps Gallery Sort Controls

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-gallery-sort-controls/. Author: Matthew Devaney.

Power Apps Gallery Sort Controls Posted by - Matthew Devaney on - August 23, 2020 45 Comments

Adding sort controls to a Power Apps gallery helps users find the information they are looking for more quickly. It ensures the most relevant results are displayed at the top of the gallery and the data can be browsed in an organized way. If you want to deliver an awesome user experience you must include this ability.

I will show you a simple method to create sort controls for every column displayed in a gallery. Vehicle Sales Information App

The Vehicle Sales Information App allows salespeople at a car dealership to lookup the price of previously sold cars. Salespeople scroll through the gallery to find the car they are searching for and can click on the sort controls to arrange any column in ascending or descending order.

Make a new SharePoint list called ‘ Car Inventory ‘ with 5 columns: Year (number), Make (text), Model (text), PurchaseDate (date), Price (number). To populate the list with 3,000 vehicles I used a free fake data generator called Mockaroo . Here’s a sample of the 1st few rows: Year Make Model PurchaseDate Price 2009 Mazda MX-5 10/21/2020 13,014 1985 Honda Accord 5/2/2018 16,725 2001 Ford Windstar 10/22/2019 17,198 1994 Mitsubishi Eclipse 2/16/2019 15,617 2003 Lamborghini Gallardo 11/9/2020 14,831

Open Power Apps and create a connection to the Car Inventory list. Then create a gallery and insert labels showing all columns in the SharePoint list.

Place a label above the gallery with a purple fill to act as a table header. Write each column name in the text property of the label and position them to match the data columns inside the gallery. Creating Sort Controls

A salesperson should be able to click on an arrow icon beside each column name to sort the gallery. Insert a white chevron down icon beside the year column name like this.

When the salesperson clicks on the icon we need to capture which column should be sorted and which direction to sort. The first click should sort by year in ascending order (lowest-to-highest) and a second click should sort in descending order (highest-to-lowest).

Put this code in the OnSelect property of the icon to capture the column name and the sort direction UpdateContext ( {

locSortColumn : "Year" , locSortAscending: locSortColumn<> "Year" Or !locSortAscending } ) Code language: CSS ( css )

Then put this code in the Icon property of the icon so it changes to match the sort direction in locSortColumn . If( locSortColumn<> "Year"

Or locSortColumn= "Year" And !locSortAscending, Icon.ChevronDown, Icon.ChevronUp ) Code language: JavaScript ( javascript )

The icon must be highlighted yellow when it is clicked to indicate which column is actively being sorted.

Use this code in the Color property of the icon to change the color

If(locSortColumn= "Year" , Yellow, White) Code language: JavaScript ( javascript )

Now that we have created the sort control for Year follow the same pattern to create sort controls for Make, Model, Purchase Date and Price.

Finally, we must update the Items code in the gallery to produce the desired sort order. I have chosen to use a switch function combined with a sort function for each possible value of locSortColumn . This ensures the formula can rely on delegation to perform sort operations and return all the rows in ‘Car Inventory’. Switch ( locSortColumn,

"Year" , Sort( 'Car Inventory' , Year, If (locSortAscending, Ascending, Descending)),

"Make" , Sort( 'Car Inventory' , Make, If (locSortAscending, Ascending, Descending)),

"Model" , Sort( 'Car Inventory' , Model, If (locSortAscending, Ascending, Descending)),

"Purchase Date" , Sort( 'Car Inventory' , PurchaseDate, If (locSortAscending, Ascending, Descending)),

"Price" , Sort( 'Car Inventory' , Price, If (locSortAscending, Ascending, Descending)), 'Car Inventory' ) Code language: PHP ( php )

The gallery now has sort controls for each column. Combining Sort and Filter functions

All galleries used to browse large datasets have both sort and filter controls to help the user find what they are looking for. In the gallery shown below I’ve added filters for Year , Make and Model .

To filter the gallery we would need to write this code in the Items property of the gallery. But how can we combine it with our previous code to sort the items as well? Filter(

'Car Inventory' , Year=drp_Year.Selected.Value, Make=drp_Make.Selected.Value, Model=drp_Model.Selected.Value ) Code language: JavaScript ( javascript )

We will have to re-use the same filter code 5 times within the switch function: once for each possible switch case. The Items property code is quite lengthy but its quick to write if you copy and paste the repeating section. Most importantly, it follows delegation rules and returns the entire dataset. Switch ( locSortColumn,

"Year" , Sort( Filter( 'Car Inventory' , Year=drp_Year.Selected.Value, Make=drp_Make.Selected.Value, Model=drp_Model.Selected.Value ), Year,

If (locSortAscending, Ascending, Descending) ),

"Make" , Sort( Filter( 'Car Inventory' , Year=drp_Year.Selected.Value, Make=drp_Make.Selected.Value, Model=drp_Model.Selected.Value ), Make,

If (locSortAscending, Ascending, Descending)),

"Model" , Sort( Filter( 'Car Inventory' , Year=drp_Year.Selected.Value, Make=drp_Make.Selected.Value, Model=drp_Model.Selected.Value ), Model,

If (locSortAscending, Ascending, Descending)),

"Purchase Date" , Sort( Filter( 'Car Inventory' , Year=drp_Year.Selected.Value, Make=drp_Make.Selected.Value, Model=drp_Model.Selected.Value ), PurchaseDate,

If (locSortAscending, Ascending, Descending)),

"Price" , Sort( Filter( 'Car Inventory' , Year=drp_Year.Selected.Value, Make=drp_Make.Selected.Value, Model=drp_Model.Selected.Value ), Price,

If (locSortAscending, Ascending, Descending)), 'Car Inventory' ) Code language: PHP ( php ) Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Gallery Sort Controls forms please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Delegation Gallery Control SORT function Switch function UI UX Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps