Using Controls and Power FX In MS Teams Canvas Apps [Building Power Apps In Microsoft Teams Ep. 2]

In this second episode of the "Building an App in Microsoft Teams" series, Matt Peterson from Pragmatic Works dives into using controls and Power FX for designing apps within Microsoft Teams. This session continues from Episode 1, where viewers set up the app’s foundational data structures. In this post, we explore how to create interactive screens, use variables, and bring data into a Microsoft Teams app to start building a student check-in application.

To kick off, Matt explains how to access and set up PowerApps in Microsoft Teams. If you haven't installed the PowerApps tile yet, simply search for it in the Teams app and pin it to your sidebar for easy access. Once PowerApps is ready, you can move to the design studio to begin building your app.

Steps to get started:

• Open Microsoft Teams.
• Search for and open the PowerApps tile.
• Access the "Build" section in PowerApps.
• Select your app or create a new one if needed.

Designing the First Screen

The first task is to design the main screen of the app. Matt emphasizes the importance of organizing controls using the tree view, which shows all the objects on the screen. By renaming elements like the first screen to scr_main, you can easily track different components.

Pro Tips:

• Always rename your elements for better organization.
• Utilize a tree view to manage multiple screens and objects.

Using Global Variables for Consistency

Matt introduces the concept of global variables to streamline app design. Global variables allow you to define a value once and reuse it throughout the app. In this case, Matt defines global variables for his school’s brand colors so that he doesn’t have to repeatedly input color codes.

How to use global variables:

• In the app control, use the OnStart property to define the variables.
• Use the Set function to assign values to each variable. For example:
  • Set(VAR_primary, RGBA(0, 128, 0, 1)) for primary color.

This method reduces redundancy and ensures consistency across your application.

Setting Up the Screen's Background Color

Next, Matt applies the global variables to adjust the background color of the screen. By selecting the main screen (scr_main), he changes the Fill property to use the previously defined variable VAR_background.

Key insights:

• PowerApps is case-sensitive when referring to variables, so be cautious with capitalization.
• You can test and run the OnStart property from the design studio without closing the app.

Adding a Header and Footer

Matt moves on to enhance the user interface by adding a header and footer to the screen. Instead of just using text labels, he adds a rectangle to create a background for the header. This gives him more control over the layout and design.

Steps to add a header:

• Insert a rectangle control.
• Use a label inside the rectangle to display the app title (e.g., "Student Check-In").
• Customize the label’s properties (font size, color, alignment) for a polished look.

Matt also explains how to copy and paste controls to quickly replicate the header and footer layout across different parts of the app.

Dynamic Welcome Message with User Data

One of the most powerful features Matt demonstrates is the ability to personalize the app for the user. Using PowerApps' User() function, he pulls in the logged-in user’s name to display a personalized greeting like "Good Morning, [User Name]."

Code Example:

"Good Morning, " & User().FullName

Matt further customizes the greeting by adding a conditional statement that adjusts the greeting based on the time of day, offering “Good Morning,” “Good Afternoon,” or “Good Evening” messages depending on the current time.

Incorporating Images into the App

Next, Matt shows how to bring images into the app, whether it's user profile pictures or custom images. Using the User() function, he adds the logged-in user’s profile picture to the app. He also explains how to upload and use custom images from the app’s media section.

Steps for adding an image:

• Insert an Image control.
• Set the image source to User().Image.
• Adjust the image’s display settings (e.g., size, border radius for round images).

Displaying Student Data Using a Gallery

To make the app functional, Matt adds a Gallery control to display student data, such as names and grades. Galleries are perfect for showing multiple records in a visually appealing way. Once the student table is added as a data source, Matt sets up the gallery to display the student information.

How to add and configure a gallery:

• Insert a Vertical Gallery.
• Link the gallery to the student data table.
• Customize the gallery to show relevant fields (e.g., name, grade, etc.).

Next Steps in Building the Application

In future episodes, Matt will dive deeper into refining the gallery design and adding more features to make the student check-in app fully functional. By the end of the series, viewers will have built a complete app inside Microsoft Teams.

Episode Highlights:

• Global variables for color management.
• Personalization with user-specific data.
• Designing interactive screens with header and footer.
• Integrating data and galleries for dynamic content display.

Stay tuned for the next episode where Matt will continue enhancing the student check-in app.

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Power Apps 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.