Power Apps - Build Search and Sort by Column Header

Introduction 

 

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps for an existing list in SharePoint Online.

 

Let's get started on how we can create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles.

1. Design Home Page Screen
2. Navigation among screen
3. Item List View Screen
4. Item Detail View Screen 
5. Item Detail Edit Screen 
6. Sort By column header (Going to cover in this article)
7. Search Content (Going to cover in this article)
8. Cascade Lookup Control
9. Validation based on formula
10. Hide and Show Control based on formula

In this article, I am going to talk about the below points:

• Configure Search
• Configure Sort to column header

Previous Articles:

1. Build Screen, Navigation and Connector
2. Build Home, View, Edit Screen with Navigation and Connector

Overview

 

In this article, I am going to walk through how to build a search and sort order.

 

 

Note

I have already explained the Login and Screen creation and navigation in a previous article. Refer to this for more information.

 

Let's get started with this article.

 

Step 1 - Login, Add Screen, Data Table and Connection with Datasource

1. Select New Screen.
2. A new screen will be added.
3. Select the data table to display the contents into list view.
4. Select the added data table and the middle section will appear blank.
5. Build Connection with SharePoint Online
6. Select the desired list name, which needs to display at the data source.
7. Data will start appearing in the selected data table:

 

 

Step 2 - Configure Search Box

 

The search box is not available out of the box, so we need to build it using control and formulas

1. Select Text Input from Text section
2. Expand the added text input box as per the desired length.
3. Select Icon to add search icon
4. Place the search icon within the text box to create a search box look and feel
5. Select the data table; i.e. datatable2
6. Select the Item's property and apply below formula
   

   Search(FlightDetails,TextInput2.Text,"Title"

• FlightDetails is datasource name
• TextInput2.Text is a search box
• The title is a column name, on which column search is going to apply 

 

Step 3 - Run and Test Search

 

Press F5 to run the application and type the appropriate keyword in the search box. Since I have data in the title (flight name) column, and I entered 42, results start appearing.

 

 

 

Step 4 - Add SortIcon

 

To configure sort, we need to create a local variable; i.e. Column name and default value of sort order.

1. Select App
2. Select On Start Property of App
3. Select local variable; i.e. Title and Sort order toggle value.
   

   Set(_varSortBy, "Title"); Set(SortAscending, true);

4. Select Icon and Select icon type Sort
5. Drag sort icon againt the flight name column 

 

 

Step 5 - Configure Sort Icon Property

1. Select icon8; i.e. filter icon
2. Set On Select property to update the sort order, switch value against title column
   

   UpdateContext({varSortPriority:"Title",SortDescending:!SortDescending})

 

 

Step 6 - Merger Search and Sort Order

 

Search work on the item property on the data table, as well as sort work on the item property on the datatable.

1. Select your database
2. Set the items property with below formula
   

   SortByColumns(Search(FlightDetails,TextInput2.Text,"Title"),varSortPriority,If(SortDescending,Ascending,Descending))

 

 

Step 7 - Save, Publish and Test

1. Save the application, click file -> Save.
2. Click save button to save the application
3. Click on the publish button to publish the application and make it available to your intended audience.
   
   Press F5 or click the published version of the app to run.

• Power Apps home screen will execute like this.

Type the appropriate text into the search box. Since I applied search on the title column, to test search, I wrote the keyword "42" and the result was filtered based on the search keywords.

 

 

To apply sort, click on sort icon into the flight name column and the result will toggle into ascending and descending order as per the defined formula.

 

 

 

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article!