Perform Multiple Sort Operations In PowerApps Gallery Or Data Table Control

Overview

Sorting is a very important functionality which is expected by every client nowadays. In PowerApps, we can display the Grid format data either in the form of a gallery or in the form of a Data table.

Out Of The Box, PowerApps doesn’t support the sort functionality. However, we can achieve this functionality with the Sort functions in the PowerApps.

Now, let’s get started!

Step 1

I already have the following data in my PowerApps Grid.

I used Gallery control to display my data.

I have three columns.

• Project Name
• Amount
• Order Number

 

I want to apply Sort operation on all of these three columns.

Step 2

Add Sort Icon on all the column headers.

To add the sort icon, go to Insert > Icon > Sort.

 

Now, we need to set the following expression on every sort icon.

1. Select the Sort icon of Project Name and choose “OnSelect” event and add the following formula.
   
   
   
   UpdateContext({SortColumn: "Title",SortDecending: !SortDecending})
   

   Here, we are defining two variables. Here is the reason to define two variables. We need to apply the sort on multiple columns. So, when the user clicks on any of the column headers, the Gallery’s sort function knows the user has selected this column.

   Here, SortColumn = Name of your data source column. In my case, my data source is SharePoint and I want to apply sort on Title column, so I added “Title”.

   SortDecending = Here, the value is Boolean. Either true or false. Based on that ascending and descending can be applied.

2. Select Sort icon of Amount and choose “OnSelect” event and add the following formula.
   
   
   
   UpdateContext({SortColumn: "Amount",SortDecending: !SortDecending})
   
   
3. Select Sort icon of Project Name and choose “OnSelect” event and add following formula.
   
   UpdateContext({SortColumn: "OrderNum",SortDecending: !SortDecending})

Step 3

Now, select the PowerApps Gallery and Open the Items event.

1. Select Gallery and open Items event.
   
   
   
   
2. PowerApps provides a function named “SortByColumns” to apply the sort operation. We will use the same function.
3. Below is a syntax for “SortByColumn” function.
   
   
   
   
4. Now, based on syntax let’s add the following line of code.
   
   
   
   SortByColumns(SampleDataList,SortColumn,If(SortDecending,Ascending,Descending))

Here, Source = Name of our SharePoint list which is “SampleDataList”. In your case it may be a name of your SQL Server database as well.

Column = Name of the column which is on which column we wish to apply the sort. In our case we stored the name of the source column in the variables declared in the second step. So, we add the variable name “SortColumn” here.

SortOrder = It can be either Ascending or Decending. Based on the Sortdescending order it can be set here.

Step 4

1. Now, let’s test the application. 
2. Run the App using F5 Key.

Before applying the sort.

Afetr applying sort on “Project Name”.

Same way, after applying sort on “Order Number” column.

 

Conclusion

This is how we can easily apply to sort on multiple columns in PowerApps.

Hope you love this article.

Stay connected with me for amazing PowerApps articles.

Don't forget to follow me!!