Modifica

Share via

UI/UX component details for canvas apps

  • Articolo

In this article, we dive into the various components that constitute the layout of canvas apps and explore their purposes, design considerations, and best practices.

Overview

One of the quickest and easiest ways to build a canvas app is to automatically generate an app from simply describing the app to existing UI designs and driving it from data that already exists:

  • Existing data: This can be existing tables in Dataverse or uploaded from an excel file or using external data in SharePoint or SQL. Learn more with Create a canvas app with data from Microsoft Dataverse.

  • Existing template: There's a large library of full-functional business app templates, which can be used as is or customized to fit requirements. Learn more with Create a canvas app from a template.

  • AI Copilot: Describe what the application should, including the data behind and the AI that designs the app. Learn more with AI Copilot overview.

  • Express design: Using an Image or a Figma design to instantly transform the visual design into an app. Learn more with Express design.

  • Page designs: Choose from an existing set of initial page designs or a blank canvas.

There's no right or wrong decision when choosing a starting point for a canvas app as this will depend on several factors:

  • The purpose of the app and the availability/type of data sources that the app uses.

  • The level of customization and control that the maker needs over the UI/UX, and functionality required in the app.

  • The amount of time and effort that the maker is willing to invest in the app development process.

  • The existing knowledge and skills of the maker in UI/UX design and app development.

With Power Apps, makers can quickly create a usable version of the app that allows users to experience the actual working app early in the develop process, which means the best practice is to produce a minimal viable product and quick iterate new versions with more features. Learn more at Introduction to Planning a Power Apps project.

Diagram showing the Agile V 2 development pipeline, showing the connection between Design, First M V P, Version 2, 3, 4, and 5.

Screens

A screen in a canvas app is the area where you can add your controls (like buttons, labels, etc.). Through navigation, you can also build a user experience to various features and data. When you add a new screen, there are various screen layouts and templates to choose from. Learn more at Add a screen to a canvas app and navigate between screens.

Most users use canvas apps on devices with different form factors, which means it's necessary to create apps with a responsive layout. This means that the controls can respond to different devices or window sizes, making the user experience feel more natural. This means that the Scale to fit setting in the app should be turned off and the application should be designed for changing screen sizes and orientations. Learn more about building responsive applications at Building responsive canvas apps and Create responsive layouts in canvas apps.

When considering the screens in canvas apps, it's best practice to:

  • Minimize the number of screens: Keeping the number of screens to a minimum reduces the overall footprint of the app. This is especially important for users with older devices, or users in locales where there's a higher latency or reduced bandwidth. Be sure to delete any screens that aren't used in the app.

  • Consider splitting apps with multiple personas: For example, having both admin and client screens in the same app won't only increase the app size and but also its complexity. Consider splitting these into individuals' apps as this will improve performance, allow multiple makers to work on the apps simultaneously, and reduce regression testing when making app changes.

  • Screen names: These shouldn't only reflect the purpose of the screen in the app but should use plain language and include spaces. Don't use abbreviations as these are read aloud by screen readers for users who have vision accessibility needs. We recommend that they end with the word Screen, so the context is understood when the name is announced.

  • Hidden screens: Hidden screens are a part of many apps because they provide a quick place for developers to capture important information without allowing users to change anything. They're hidden from your app's users but not from the makers. It's common to add hidden screens for documentation for makers or as a template to maintain consistency for look and branding for controls.

  • Maintain consistent navigation between screens: The key to effective navigation in canvas apps is to ensure that it's intuitive, responsive, and consistent across all screens. This enhances the user experience and makes your app more efficient and user-friendly. Therefore, ensure apps have the same navigation on each screen, such as providing next and back buttons in the header or footer.

Controls

Controls in Power Apps are essential for building interactive and user-friendly applications. They allow users to interact with the app and perform various actions, such as inputting data, navigating through the app, and triggering specific functions. As part of the continuous update and improvements a new set of modern controls are being released based on the Microsoft Fluent 2 design system, proving a more cohesive and visually appealing experience for end-users. We recommend that makers make use of newer controls when building the apps as they provide many benefits:

  • Improved accessibility and usability: Modern controls are designed with a focus on accessibility and usability, making them highly functional and intuitive to use.

  • Performance: Modern controls are built for performance, not only ensuring faster and more fluid app experiences for users but also quicker and simpler for makers to configure.

  • Modern theming system: Modern controls include a new modern theming system that allows an app's look and feel to be modified from a central place.

  • Composite controls: These controls combine multiple basic controls into one, providing more complex interactions out of the box that reduce the number of controls needed in an app.

At the time of writing, not all of the modern controls are generally available and transitioned over the coming year. Learn more about modern controls at Recap of modern controls evolution in 2023 and a glimpse into 2024 innovations.

For a full list of all of the modern controls, see Overview of modern controls and theming in canvas apps.

For a full list of all the existing controls, see Controls and properties in canvas apps.

There are two more controls that can be added to enhance canvas Apps:

  • Chatbot control: Allows a maker to embed a published Copilot Studio chatbot's into canvas apps. This can assist end-users with various requests from providing simple answers to common questions to resolving issues requiring complex conversations. Learn more at Add Chatbot control to your canvas app.

  • Copilot control: The Copilot control is a next-generation AI assistant that makers can add to their canvas apps for end-users. This AI-powered experience allows app users to get insights about the data in their apps through conversation in natural language. Learn more at Add Copilot control for canvas app users.