In Focus

Perform Multiple Sort Operations In PowerApps Gallery Or Data Table Control

In this article, we will learn how to apply multiple column sort in PowerApps Grid or Datatable. We will use SortColumns function and pass dynamic Sort Column and Sort Order to apply sort operations.

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
Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control 

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.

Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control
 
Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

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.

    Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

    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.

    Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

    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.

    Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

  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.

    Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

  4. Now, based on syntax let’s add the following line of code.

    Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

    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.

Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

Afetr applying sort on “Project Name”.

Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

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

Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control
 
Perform Multiple Sort Operation In PowerApps Gallery Or Data Table Control

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!!