Microsoft Power Platform just introduced Modern Controls for Canvas Pages. These controls not only bring a modern aesthetic but also significant improvements in terms of user-friendliness and flexibility. In this post, I'll show you how to use the new Modern Controls in a Canvas Page within a Model-Driven App to create a customized list view with a filter function, resulting in a more user-friendly and efficient interface.
What are Modern Controls and Why Are They Important?
Modern Controls are the latest development within the Microsoft Power Platform, offering an enhanced design that is not only visually appealing but also more intuitive. Unlike traditional controls, which were often rigid and difficult to customize, Modern Controls provide a more dynamic, fluid user interface that fits perfectly with the Fluent UI design system of Model Driven Apps.
Key Benefits of Modern Controls:
Consistency and Modern Design: All controls follow a unified design principle, making the user experience more consistent and visually engaging.
Improved Usability: Modern Controls are responsive and adaptive, enabling better interaction on both mobile devices and desktops.
Faster Development: Thanks to pre-built and optimized components, it's easier to develop complex user interfaces quickly without needing to code custom controls.
Modern Controls in Action: Integrating a Canvas Page into a Model-Driven App for a Customized List View
In this section, I’ll show you how to integrate a Canvas Page into a Model-Driven App to create a customized list view. This integration allows for a more user-friendly and efficient interface tailored to the specific needs of users.
1. Creating a Custom Page
Open the Power Apps Portal and navigate to your Model-Driven App. Click the New button at the top left and choose the Custom Page option.
2. Enabling Modern Controls
After creating the Canvas Page, go to the page settings and enable the "Modern Controls and Themes" option under Updates. This ensures that all the modern controls are available in your app.
3. Adding and Using Modern Controls
In the Insert tab, you’ll now see a range of new controls marked with a "Preview" tag. These include modern components such as grids, buttons, text fields, and more.
Creating Filters with DatePicker Components
To demonstrate the power of Modern Controls, we’ll add two modern DatePicker components, allowing users to filter records in a table by date. These DatePickers are not only visually appealing but also much more user-friendly than classic controls.
Filtering Data in the Table
Once you’ve added the DatePickers, you can apply a simple filter rule in the Advanced tab to filter the table based on the selected dates. This is a basic feature made even easier with Modern Controls.
If( !IsBlank(Von.SelectedDate) && !IsBlank(Bis.SelectedDate), Filter(Reports, Datum <= Bis.SelectedDate && Datum >= Von.SelectedDate), Reports )
You just need to integrate this component into your app.
Why Are Modern Controls a Game-Changer?
The introduction of Modern Controls offers numerous benefits for developers and users:
Responsive Design: Modern Controls automatically adjust to different screen sizes, which is especially useful for mobile devices.
Optimized User Experience: The clear and consistent design of the controls significantly improves the user experience. Users can navigate faster and receive more intuitive feedback.
Easy Integration: The controls can be easily integrated into existing Model-Driven Apps without requiring extensive customization.
Best Practices for Using Modern Controls
Efficient Data Loading: Modern Controls often offer additional features like data preloading or asynchronous processing. Use these features to improve your app's performance.
Test Responsiveness: Since Modern Controls are responsive, ensure that the user interface displays correctly across various devices.
Leverage Customization: Many Modern Controls are highly customizable. Be sure to design them according to your users' needs and workflows.
Frequently Asked Questions (FAQ)
Are Modern Controls available in all apps? Currently, Modern Controls are available in "Preview" and can be used in Canvas Pages within Model-Driven Apps. They are expected to be fully integrated into other parts of the Power Platform soon.
Can I combine Modern Controls with classic controls? Yes, Modern Controls can be combined with classic controls. However, make sure the user experience remains consistent.
Why should I use Modern Controls instead of classic controls? Modern Controls offer enhanced usability, are responsive and customizable, and make it easier for developers to create user-friendly interfaces.
Conclusion
The introduction of Modern Controls in Canvas Pages marks a significant step forward in the evolution of the Microsoft Power Platform. With these new controls, you can not only make your apps more visually appealing but also greatly improve user-friendliness. Whether you need simple filters or more complex user interactions, Modern Controls offer a variety of options to take your app to the next level.
Comments