Power Apps: Filter Gallery With A Tab List

Power Apps: Filter Gallery With A Tab List

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 AppSetup The SharePoint ListAdd A Tab List Control To The ScreenDisplay The Projects List In A GalleryFormat The The Gallery InformationFilter The Gallery Using A Tab List ControlTest 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:

TitleBid DateBid ResultAmount
Office Tower 123 River Ave.9/3/2023Won13,500,00
Strip Mall 1st St. N.9/10/2023Lost2,300,000
Big Box Store 734 Thames St9/16/2023Won1,700,000
Office Building 789 Reading Ave.9/20/2023Won8,900,000
Condo Tower 1003 Main St.9/24/2023Lost5,600,000
Fast Food Restaurant 423 2nd Ave.9/30/2023Lost2,500,000
Big Box Store 123 Erie St.10/2/2023Submitted1,300,000
Duplex Condo 532 Fay St.10/7/2023Submitted630,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"]



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"]

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'



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


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



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
)

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



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)

The Projects List app is now completed. Launch the app in preview mode and try filtering the the gallery using the tab list control.





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

Subscribe
Notify of
guest

25 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Dwight
Dwight
4 months ago

Great article – quick question about this. Would there be a way to show totals for the filtered items? I could see how useful that would be for in this example pending accounts. I would look at it from a different perspective to look at software success rates and potentially look at how long recovery took. I can sort on success vs rollback but could you then do a calculation based on the filtered values?

Raghu
Raghu
4 months ago

Good one 👍

Bobby
Bobby
4 months ago

I noticed that whenever I use the new modern tab list control in my apps, the actual tab key on my keyboard stops working in powerapps code. I can no longer tab indent code. Is that happening to you?

Tejas Wadkar
Tejas Wadkar
4 months ago

When we left the app, it wont return on default tab which is in above scenario “All”. In defaultItem want record. So what we can insert there?

Tejas Wadkar
Tejas Wadkar
4 months ago

Thanks matthew, great article to follow.

Dom
Dom
4 months ago

Lovely article. Could this be used to display committee documents (pdfs/word) files for past meetings – ordered by date with a one click action to download the document? How would you add the URL to download? Failing that just to open in SP then

george.winters
4 months ago

Another Gem, thanks.

David Battino
David Battino
4 months ago

Thank you! As a next step, Reza Dorrani has a video on styling the tabs so they look like physical tabs. I also found it helpful to add Back and Next buttons to the bottom of my form. On the final page, I changed Next to Submit.

Stacy
Stacy
4 months ago

How timely! I need to use this in the app I am building now and was searching for this kind of solution over the weekend. I really appreciate you sharing your great work here. Thank you so much!

DFM
DFM
4 months ago

Does this will work with Dataverse Table ? Trying to pull a Chose value from a choice column and don’t have the value .

Nobru3
Nobru3
2 months ago

But as DFM said, i don’t have a Choice.Value option to filter, and i need to compare it with a text. How to do that?

Marc Guzman
Marc Guzman
3 months ago

Thank you for this. This is very helpful. How can I sort by Title (or any other field) with your filter code below?

Filter(
‘Project Bid Opportunities’,
Or(
‘Bid Result’.Value = tab_ProjectBidStatus.Selected.Value,
tab_ProjectBidStatus.Selected.Value = “All”
)
)

Marc Guzman
Marc Guzman
3 months ago

Thanks Matthew! You’re awesome. I love your tutorials!

Jenevieve
Jenevieve
3 months ago

This is great! This was very helpful and just what I needed. I do have an issue of when I navigate out of this page and go to the tabbed page, it goes to the last selected tab. Is there a way to have it always set to All. I thought the defaultselectedItem would solve it but it didn’t.

Ryan
Ryan
2 months ago

Literally every time I ask myself “how do I do this?” and I come to your website, and you already have an article on it. Thanks for another gem.