Power Apps Gallery Sort Controls

Power Apps Gallery Sort Controls

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:

YearMakeModelPurchaseDatePrice
2009MazdaMX-510/21/202013,014
1985HondaAccord5/2/201816,725
2001FordWindstar10/22/201917,198
1994MitsubishiEclipse2/16/201915,617
2003LamborghiniGallardo11/9/202014,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
})



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
)



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)


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'
)



The gallery now has sort controls for each column.



Combining SORT and FILTER

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)



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'
)





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.

Matthew Devaney

Subscribe
Notify of
guest
18 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Femke
Femke
1 year ago

Thanks for the thorough walkthrough. It works great until I try to sort and then filter by more than one category. I’m using the same data with the same column types and I use a distinct function for the dropdown items (Distinct(source,column)).
When I only add the code for the Year dropdown (to gellery items) it still works, but as soon as I add the code for the Make dropdown the gallery shows no data anymore. Would you please tell me how you populate your dropdowns? Maybe my distinct function causes problems?

Florin
Florin
1 year ago

Hi. can you give an advice to make the printing command work in Desktop PowerApps, Print() does nothing ezcept if app is open in edge browser?
Any sugestions?

Don
Don
8 months ago

Thanks for these great instructions, Matthew! I have the sorts working beautifully on my gallery, but I haven’t been able to get the combo box or the text input box to work with sorting. The following two snippets work individually:

Sort:

Switch(
  locSortColumn,
  “New Employee Name”, Sort(‘Admin_Employee_List’, FullName, If(locSortAscending, Ascending, Descending)),
  “Onboarding Status”, Sort(‘Admin_Employee_List’, OnboardingStatusText, If(locSortAscending, Ascending, Descending)),
  Sort(Admin_Employee_List,ID,Descending)
)

String search on names:

Sort(Filter(Admin_Employee_List,StartsWith(FullName,tbSearchGallery.Text)),ID,Descending)

Ryn
Ryn
7 months ago

Thanks much for this method! How would you do ascending-descending alphabetical sort on a field that looks up to another table (i.e. a field whose values are UIDs but the text of which is displaying the title/description from another table)?

Deb A
Deb A
5 months ago

Lifesaver, thank you. I’m new to PowerApps and could not figure out how to sort my gallery columns on select.

Matthew
Matthew
2 months ago

Hello, thank you for this walkthrough! I have managed to make everything work, however one thing I have not been able to work out is simultaneously running the Switch() function under “Items” of my gallery while also using a Sort() function under “Items” to sort my ID column by Descending as its default (which I do not plan to add a sort button onto). If you could provide a solution, that would be greatly appreciated!

Richard
Richard
2 months ago

Thanks for this Matthew, it was helpful and easy to follow. I am new to PowerApps, really just evaluating it as a dev tool for modernizing some of our older systems. I was surprised to learn that galleries don’t ship with sorting by columns already wired in with perhaps a property that sets whether and which columns are sortable and which are not. In fact I was surprised that if one wishes to have columns heading for a gallery, one has to create them manually using labels. I am wondering if these features will be added in future versions of PowerApps.

Marco
Marco
1 month ago

Hello Matthew,
thanks for your valuable advice.

I use the formula:

Switch(locSortColumn; “Created”; Sort(Filter([@Sentinel];(ricercaSentinel.Text in Title)||(ricercaSentinel.Text in Details)); 
‘Created’; If(locSortAscending; Ascending; Descending)); 
[@Sentinel]) 

But I would like to add the combobox
Filter([@Sentinel]; 
Categoria.Value = DropdownSentinel.Selected.Value) 

how to combine the two formulas?

Marco
Marco
1 month ago

Hi Matthew, with this format I have 2 problems:

  1. Not all results are returned. I loaded a row in the list on 12/08/2022 and it is returned only if I use the dropdown filter. Without filters, the last line is from 03/08/2022 (example) .
  2. locSortAscending sorting doesn’t work

Forgive my incompetence, thank you!

Ilya
Ilya
1 month ago

Hey Matt, thanks for the post! Always mega helpful!

“We will have to re-use the same FILTER code 5 times within the SWITCH function”

I can suggest WITH function, so you don’t have to re-use it 5 times:

With({Table:Filter(‘Car Inventory’, 
      Year=drp_Year.Selected.Value, 
      Make=drp_Make.Selected.Value, 
      Model=drp_Model.Selected.Value
    )},

Switch(
  locSortColumn,
  “Year”, 
  Sort(Table,Year,If(locSortAscending, Ascending, Descending)),
  “Make”, 
  Sort(Table,Make, If(locSortAscending, Ascending, Descending)),
  “Model”,
  Sort(Table,Model,If(locSortAscending, Ascending, Descending)),
  “Purchase Date”,
  Sort(Table,PurchaseDate,If(locSortAscending, Ascending, Descending)),
  “Price”,
  Sort(Table,Price, If(locSortAscending, Ascending, Descending)),
  ‘Car Inventory’
))