Using Galleries In Microsoft Teams Applications [Building Power Apps In Microsoft Teams Ep. 3]

In Episode 3 of the "Building Power Apps in Microsoft Teams" series, Matt Peterson dives deep into using galleries within Microsoft Teams applications. This episode focuses on how to effectively add, configure, and manipulate galleries to display student data within a Power App. The tutorial covers everything from basic setup to adding search functionality, giving you the tools to build dynamic applications for managing records in Teams.

What is a Gallery in Power Apps?

A gallery is a control in Power Apps that allows you to display a list of records, such as student data, in a customizable format. In this video, Matt demonstrates how to insert and modify galleries in Power Apps to display student information like names, grade levels, and email addresses.

Step 1: Setting Up the Gallery

1. Opening Power Apps in Teams
   Matt starts by accessing Power Apps within Microsoft Teams. He selects the environment where the app resides and opens the student check-in application created in earlier episodes.
2. Renaming the Gallery
   The first modification is renaming the gallery for easier reference. This helps in managing the controls within the application more effectively. Matt renames the gallery to "Gal Browse Students," making it clear that this gallery will be used to browse student records.
3. Selecting the Layout
   The next step is to choose a suitable layout for the gallery. Matt switches the layout from "Image, Title, and Subtitle" to "Title and Subtitle" since he doesn’t have student images available yet. This simplifies the display to just the student's name and grade level.
4. Design Modifications
   Matt also changes the background color to white to make the gallery visually cleaner. He then enters the template cell to make adjustments to the entire gallery's layout.

Step 2: Customizing the Data Display

1. Choosing Data Fields
   Matt navigates to the Properties panel to select the data fields to display in the gallery. Initially, the gallery shows the student's first name in the title and email in the subtitle. Matt opts to change the subtitle to display the student's grade level instead.
2. Using Formulas to Customize Fields
   Power Apps uses formulas to define which data should be displayed. Matt explains how to modify the text property of the title control to show the student's first and last name by using a formula to concatenate the two values.
3. Handling Complex Data
   Sometimes, the data shown in a gallery may require explanation, such as grade levels or numeric IDs. Matt demonstrates how to add hardcoded text labels in front of these values to provide context to the user (e.g., labeling the grade level data).

Step 3: Enhancing the Gallery's Functionality

1. Sorting Data
   To make the gallery more useful, Matt explains how to sort student records based on specific columns, like grade level. He uses the "Sort" function to sort the data.
2. Adding Separators
   Matt discusses how to add visual separators between each record using a rectangle control, ensuring a neat, professional design.
3. Creating Responsive Designs
   Matt demonstrates how to make the gallery responsive by linking the width of various controls (like the separator rectangle and search box) to the gallery's dimensions, ensuring consistency regardless of screen size changes.

Step 4: Enabling Search Functionality

1. Adding a Search Box
   Matt adds a search box where users can type in a search query to filter the student records. The search box is automatically resized to match the gallery width.
2. Configuring the Search Function
   To enable search, Matt links the search function to the gallery control. This ensures that the gallery only displays records matching the search input.
3. Searching Multiple Columns
   Matt demonstrates how to expand the search to cover both the first name and last name columns, enabling users to find records by typing any part of the student's name.

Conclusion

In this episode, viewers learned how to add and customize galleries in Power Apps within Microsoft Teams. The episode covered setting up the gallery, modifying its design, and adding search functionality, making it an essential step in building dynamic and user-friendly applications. With these tips, you can begin building your own app to display and manage student records effectively. Stay tuned for the next episode, where Matt continues to enhance the application!

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Microsoft Teams and other Microsoft applications. Be sure to subscribe to the Pragmatic Works YouTube channel to stay up-to-date on the latest tips and tricks.