Gallery Filtering with Modern Tab List Control in PowerApps

Introduction

In this article, we'll delve into the process of creating a vertical tab interface utilizing the modern tab list control within PowerApps. This interface provides a structured and visually appealing way to navigate through different project statuses.

How to enable modern feature in PowerApps?

To enable the modern controls feature in PowerApps, users can navigate to the Settings menu and locate the General settings. Within this section, there should be an option to toggle on the feature named "Modern controls and Themes." Enabling this feature will grant access to the modern tab list control among other contemporary features and themes within PowerApps.

Setting up the SharePoint List

Begin by creating a SharePoint list named "Project Details". This list will serve as the data source for our PowerApps application.

Creating the canvas app & configuring TabList control

1. Start a new canvas app with a blank screen. Insert a text control at the top of the screen, titling it "Projects." Below this title, add a tab list control with the following categories: All, Open, In Progress, and Closed.
2. Set the "DefaultSelectedItems" property of the tab list to ["All"]. This ensures that the "All" tab is selected by default when the application loads.
   

Adding vertical gallery

Insert a vertical gallery named "gal_Projects" to display the list of projects. Customize the gallery's appearance and layout to suit your preferences.

To provide additional visual cues to users, we can utilize conditional formatting within the gallery. By utilizing PowerApps' conditional formatting capabilities, we assign distinct colors to projects based on their status. For example, projects marked as "Open" may be highlighted in dark red, while those labeled as "In Progress" could appear in dark orange. Similarly, "Closed" projects may be distinguished by a forest green color. This visual differentiation enhances the clarity and accessibility of project information within the app.

If(
    ThisItem.Status = "Open",
    Color.DarkRed,
    ThisItem.Status = "InProgress",
    Color.DarkOrange,
    ThisItem.Status = "Closed",
    Color.ForestGreen
)

Replace the code in the gallery's "Items" property with the following snippet:

Filter(
    'Project Details',
    Or(
        Status = Tab_ProjrctStatus_List.Selected.Value,
        Tab_ProjrctStatus_List.Selected.Value = "All"
    )
)

Resetting the Gallery

Implement the following code in the "OnChange" property of the tab list control to ensure the gallery is reset whenever a different tab is selected:

Reset(gal_Projects)

Conclusion

The modern tab list control in PowerApps offers a powerful tool for creating intuitive and user-friendly interfaces for navigating project statuses. By seamlessly integrating SharePoint data and incorporating customizations such as conditional formatting and gallery reset functionality and enhance productivity. Embracing the capabilities of PowerApps empowers users to streamline project tracking and monitoring processes, ultimately driving efficiency and success in project management endeavors. Enjoy the benefits of enhanced productivity with PowerApps!