Power Apps Modern Controls & Component Libraries in Web Design
Power Apps
Oct 31, 2023 1:00 PM

Power Apps Modern Controls & Component Libraries in Web Design

by HubSite 365 about Andrew Hess - MySPQuestions

Currently I am sharing my knowledge with the Power Platform, with PowerApps and Power Automate. With over 8 years of experience, I have been learning SharePoint and SharePoint Online

Citizen DeveloperPower AppsLearning Selection

Become a Power Apps Champion by mastering modern controls with components & component libraries for seamless app creation and organization-wide consistency!

Andrew Hess opens up the world of Power Apps in his YouTube video, where he illustrates the use of modern controls within components. Importantly, he teaches how to set up a component library in your organization or work environment that can be used across various apps.

  • 0:00 Introduction
  • 0:49 The Modern Tab List
  • 2:50 An Issue using Modern Tab List
  • 3:30 Visibility with TabList
  • 6:48 Pin the Component Library
  • 8:08 Creating our Own TabList Component
  • 12:28 Using Modern Buttons in Component
  • 14:00 Using our Component in Component Library
  • 16:33 Modern Buttons Type/Appearance Property
  • 19:40 Conclusion

His video aims to demystify the benefits of using components, emphasizing how they can maintain consistency while providing a reusable facility. If deployed effectively, the component library brings a level of efficiency to your workspace that's consistently beneficial.

Hess takes it a step further in his demonstration by creating a TabList component that can be used in various applications. Moreover, his tutorial also covers visibility issues associated with using the Modern TabList, leaving no stone unturned in his efforts to facilitate smooth navigation for his viewers.

He includes a handy guide in constructing your own TabList component, as well as the deployment of modern buttons within these components. In addition, users can understand and implement the Type/Appearance Property of modern buttons, expanding their proficiency with Microsoft Edge components.

More on Developer Tools

The Value of Modern Controls

A part of the Microsoft Fluent 2 design system, modern controls are simpler yet powerful tools that can be utilized to enhance user experience. Offering better accessibility, usability, and performance, these controls make applications visually appealing, functional, and easy-to-use.

Pivoting around a modern theming system, the Fluent 2 design enables a centralized modification of an app's look and feel. However, it is notable that these tools are classified as "preview" features, meaning they are early-release features subject to changes. They provide customers with an opportunity to use and give feedback before official release.

To harness these controls, users can open their canvas application for editing, navigate to Settings > Upcoming features, and enable Modern controls and themes from the Preview tab. The modern controls can then be accessed from the app authoring menu for insertion, alongside modern themes.

Microsoft consistently works towards improving and adding to modern controls and themes. Feedback from early users helps inform the development of these tools. Users can provide feedback for individual controls within the Power Apps Studio, an example of Microsoft's commitment to enhancing its services based on user responses.

It is crucial to note however, as with all software, that these contemporary controls present unique limitations. By using the tools and information that Microsoft provides, users can safely avoid these limitations, acquiring skills that facilitate ease of use and overall development efficiency.

Developer Tools - Utilizing Modern Controls & Component Libraries in Web Design

Let's Use Modern Controls with Components & Component Libraries


In the YouTube video titled "Let's Use Modern Controls with Components & Component Libraries", Andrew Hess introduces programmers to how to use modern controls accompanied by Components, as well as the application of a Component Library within Power Apps.

The Component Library is a useful tool that can be set up in Power Apps for either an entire organization or on a per-environment basis. What makes Components truly beneficial is their reusability and maintainability, which lends consistency across multiple apps when you utilize the Component Library.

It is vehemently recommended that every organization should start crafting their own Component Libraries. In the video, a TabList is recreated as a component that can be freely used in many apps – illustrating the flexibility and ease of application.

What's Modern Controls?

Modern controls are a recent addition to Microsoft's canvas apps, founded on the Microsoft Fluent 2 design system. These controls offer easy configuration for developers, alongside a cohesive user experience. The emphasis on accessibility, usability, and performance makes modern controls both visually appealing, highly functional, and user-friendly.

Also, modern controls come with a modern theming system that allows for customization, which contributes to the app’s aesthetic appeal.

Disclaimer: It is worth noting that Modern Controls are in a preview phase, meaning that they might still undergo changes and are not suggested for production use.

Enabling Modern Controls

If you are interested in enabling modern controls and themes for your canvas app, follow these simple steps: Open your canvas app for editing, look for Settings in the command bar and select Upcoming features. From the Preview tab, set the toggle for Modern controls and themes to On.

Later you can select Insert from the list of controls to view all the modern controls. For checking out modern themes, click on Themes. For more information on modern themes, refer to the "Use modern themes in canvas apps" guide.

Future of Modern Controls

Constant improvements and additions to modern controls and themes are being made. We recommend keeping an eye on the official blog for updates. For community support or to give feedback, check the community forum.

In conclusion, Modern Controls in canvas apps offer a sleek and intuitive user experience, with an easy-to-use system for developers. Touched upon in-depth in Andrew Hess's YouTube video tutorial, they are an exciting addition to Microsoft's offerings for app development.


More links on about Let's Use Modern Controls with Components & Component Libraries

How if feels when i win with modern controls : r/StreetFighter
Jun 8, 2023 — They let you do specials and super moves with one button press, also easier combos. They do less damage, but they are essentially easier to use.


Modern Controls, Components, Component Libraries, Software Development, Web Development, User Interface, User Experience, Application Design, UI Components, Software Libraries.