Power Apps: Filter Gallery With A Tab List

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-filter-gallery-with-a-tab-list/. Author: Matthew Devaney.

Power Apps: Filter Gallery With A Tab List Posted by - Matthew Devaney on - February 4, 2024 26 Comments

In Power Apps, an effective way to filter a gallery is with a tab list control . Tabs make it easy to change between different views of the data. For instance, to show all of the gallery items with an “Open” status or a “Closed” status. They are an excellent replacement for a dropdown control when there are few options to select from. I believe every app maker should know how to filter a gallery with a tab list. Table of Contents Introduction: The Projects List App Setup The SharePoint List Add A Tab List Control To The Screen Display The Projects List In A Gallery Format The The Gallery Information

Filter The Gallery Using A Tab List Control

Test Filtering The Gallery With A Tab List Introduction: The Projects List App

Salespeople at a construction company use Power Apps to view a list of their current project opportunities. They use the tab list at the top of the screen to only display projects with a matching status: Won, Lost, Submitted or show All projects.. Setup The SharePoint List

Create a new SharePoint list named Project Bid Opportunities with the following columns and types: Title – single-line text Bid Date – date-only

Bid Result – choice column (submitted, won, lost) Amount – number

Then populate the SharePoint list with this data: Title Bid Date Bid Result Amount Office Tower 123 River Ave. 9/3/2023 Won 13,500,00 Strip Mall 1st St. N. 9/10/2023 Lost 2,300,000 Big Box Store 734 Thames St 9/16/2023 Won 1,700,000 Office Building 789 Reading Ave. 9/20/2023 Won 8,900,000 Condo Tower 1003 Main St. 9/24/2023 Lost 5,600,000 Fast Food Restaurant 423 2nd Ave. 9/30/2023 Lost 2,500,000 Big Box Store 123 Erie St. 10/2/2023 Submitted 1,300,000 Duplex Condo 532 Fay St. 10/7/2023 Submitted 630,000

The Project Bid Opportunities list looks like this once the data is filled-in. Add A Tab List Control To The Screen

Go to make.powerapps.com and create a new canvas app with a blank screen. Insert a text control at the top of the screen with the title “Projects.” Then add a tab list control below the title with the names: All, Won, Lost and Submitted.

Use this code in the Items property of the tab list to define the tab names.

[ "All" , "Won" , "Lost" , "Submitted" ] Code language: JSON / JSON with Comments ( json )

The All tab should be selected by default when the user navigates to the screen.

Write this code in the DefaultSelectedItems property of the tab list. [ "All" ] Code language: JSON / JSON with Comments ( json ) Display The Projects List In A Gallery

The will show the user a list of projects and their statuses. To do this, go to the Data tab of Power Apps Studio and add a connection to the Project Bid Opportunities SharePoint list. Then place a blank vertical gallery control on the screen. Select Project Bid Opportunities as the datasource.

This code should appear in the Items property of the gallery. 'Project Bid Opportunities' Code language: JavaScript ( javascript )

Choose the Layout title, subtitle and body for the gallery and map it to the SharePoint list: Title (Title) Amount (Subtitle) Bid Result (Body) Value Format The The Gallery Information

We will make two small updates to make the gallery data more easily readable. First, we will format the Amount field to display as a dollar amount.

Write this the text property of lbl_ProjectSubtitle . The text function is given an Excel style formatting code to change how it displays. Text(ThisItem.Amount, "$#,##0" ) Code language: JavaScript ( javascript )

Second, we will show a different color for each project status using conditional formatting .

Use this code in the Color property of the lbl_ProjectBody text control. The text is now green for “Won” projects, red for “Lost” projects and Black for all other statuses. Switch ( ThisItem. 'Bid Result' .Value, "Won" , Color.ForestGreen, "Lost" , Color.DarkRed, Color.Black ) Code language: PHP ( php )

Filter The Gallery Using A Tab List Control

When the user selects a project status using the tab list only projects with a matching status should appear in the gallery. Or, if the user picks All then the complete list of projects should appear.

Replace the code in the Items property of the gallery with this code instead. Filter( 'Project Bid Opportunities' , Or(

'Bid Result' .Value = tab_ProjectBidStatus.Selected.Value, tab_ProjectBidStatus.Selected.Value = "All" ) ) Code language: JavaScript ( javascript )

When the selected tab changes we want to reset the projects list gallery so that the top item is the current selection.

Use this code in the OnChange property of the tab list control to reset the gallery. Reset(gal_ProjectsList)

Test Filtering The Gallery With A Tab List

The Projects List app is now completed. Launch the app in preview mode and try filtering the the gallery using the tab list control. 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 Filter Gallery With Tab List 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 M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps