Build Canvas App Components In Teams [Building Power Apps In Microsoft Teams – Ep. 12]

In episode 12 of the Pragmatic Works series Building Power Apps in Microsoft Teams, trainer Matt Peterson walks viewers through creating reusable canvas app components directly inside Microsoft Teams. Components help standardize application design, improve efficiency, and allow for easy customization across different apps. This tutorial demonstrates how to build a component library, design a dynamic header, and give users the flexibility to modify properties such as text and color.

Why Components Matter

Reusable components provide consistent design and functionality across apps. Teams and organizations benefit by:

• Ensuring standardized branding with colors, text, and formatting
• Reducing time spent recreating common UI elements
• Allowing controlled customization for end users
• Improving overall app responsiveness and adaptability

Creating a Component Library

Matt begins in the Power Apps section of Microsoft Teams. From the Build area, he creates a new component library called Matt’s YouTube Library. This library serves as a central place to design and save reusable controls for future apps. Even if you’re not working in Teams, the same approach can be applied using make.powerapps.com.

Designing a Reusable Header Component

The first example is a header component. Instead of hardcoding size values, Matt uses formulas to make the component responsive:

• Width: Set to App.Width so it always matches the app’s width
• Height: Defined as 10% of App.Height for consistency across screens

He then applies a fill color and adds an image control tied to the logged-in user’s profile picture. Using formulas, the image dynamically aligns with the right edge of the header regardless of screen size.

Adding Text and Properties

Next, Matt introduces a text label within the header. While it begins with default text, the goal is to allow users to customize it. To do this, he creates a custom property:

1. In the component properties pane, he clicks New custom property.
2. Names it Header Text Label.
3. Sets it as an Input property with a Text data type.

By referencing this property in the label’s text field, users can change the header text directly from the property panel once the component is added to an app.

Publishing and Using Components

After saving the component library, it must be published to Teams before it can be used in applications. Publishing makes the updated components available to all apps connected to the library.

Inside his Student Check-In app, Matt demonstrates how to:

• Insert a new screen
• Import the component library
• Add the header component to the app
• Modify its text from the property panel

Enhancing User Flexibility

To further illustrate customization, Matt adds another custom property called Header Label Color. This property allows users to change the header’s text color dynamically. He sets its data type to Color and maps it to the label’s color property. After publishing the updated library and refreshing the app, users can now modify the header text color in real time.

Benefits of Component Reusability

Matt emphasizes the main advantages of using components in Power Apps:

• Reusability: Save time by reusing elements across multiple apps.
• Standardization: Maintain consistent design and branding across departments or organizations.
• User Empowerment: Enable non-technical users to make simple changes without editing app logic.
• Responsiveness: Dynamic formulas ensure controls scale properly on tablets, phones, and desktops.

More Resources

Pragmatic Works also provides a downloadable package of pre-built components such as headers, footers, slide-out menus, and button controls. These can be installed into environments for quick use without starting from scratch.

Final Thoughts

Through this session, Matt Peterson demonstrates how to create, customize, and publish canvas app components in Microsoft Teams. By mastering component libraries, organizations can streamline app development, enforce consistent design, and give end users simple but powerful customization options. Whether building from scratch or leveraging ready-made components, reusable design is a key step toward efficient Power Apps development.

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