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

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.

Comments

Post a Comment