3 Enhancements for Your Canvas App

Introduction

Canvas Apps are one of the two forms of Power Apps you can create in the Power App design studio. These design-focused apps are built and manages with the user experience in mind. They consist of dynamic components that can be arranged based on what you want to present to your user. Model-driven apps are heavily focused on data and content versus customizations. Although the two are very similar, the use cases for them vary greatly.

There is no definitive answer on when to use a Canvas App vs. Model-Driven apps in Power Apps, as it depends on the specific needs of the organization and the individual apps being created. In general, canvas apps are more flexible and can build a wider variety of apps, while model-driven apps are more suited for creating repeatable business processes. However, there are many exceptions to this rule, and it is often helpful to use a combination of both canvas and model-driven apps to create the most effective and efficient apps.

Why Are Canvas Apps Essential for User Experiences?

There are many reasons why canvas apps are essential for users’ experiences. Some of the reasons include:

Canvas apps are more immersive and engaging than traditional web pages.
Canvas apps are more responsive and faster than traditional web pages.
Canvas apps are more intuitive and easy to use than traditional web pages.
Canvas apps are more visually appealing than traditional web pages.
Canvas apps provide a better user experience than traditional web pages.

When building a Canvas App, it is critical to consider the end-user. The end-user is the person who will be using the app, and it’s essential to make sure that the app is easy to use and meets the user’s needs. This means designing the app in a user-friendly and easy way to navigate. It also means making sure that the app is reliable and functions correctly.

Here are three different user experience enhancements to include on your next Canvas App.

Add a Timer Component

There are three types of timer components in a Microsoft Canvas app:

Timer interval: The timer interval component is used to set the interval for a timer.
Timer delay: The timer delay component is used to set the delay for a timer.
Timer: The timer component is used to start and stop a timer.

Timer components allow you to create and manage timers in your app. You can use timers to track elapsed time, a countdown to a specific time, or schedule repeating events. To create a timer, open the Timer component and specify the timer’s name. To start the timer, set the Start property to True. To stop the timer, set the Start property to False. To view or modify the timer settings, open the Timer dialog. The dialog displays the timer’s name, current time, remaining time, and status.

To create a repeating timer, open the Timer component and specify the timer’s name. To start the timer, set the Start property to True. To stop the timer, set the Start property to False. To configure the timer, open the Timer dialog. The dialog displays the timer’s name, current time, remaining time, and status. In the Repeats section, specify the number of repetitions and the interval.

To create a countdown timer, open the Timer component and specify the timer’s name. To start the timer, set the Start property to True. To stop the timer, set the Start property to False. To configure the timer, open the Timer dialog. The dialog displays the timer’s name, current time, remaining time, and status. In the Countdown section, specify the time and interval.

Create an Automatic Buffer Screen

Buffer screens are used in canvas apps to improve performance or user experience aesthetics. When a user scrolls a canvas app, the Power App can need time to recalculate the position of all the elements in the app or load data. This can cause a significant slowdown, especially on mobile devices. A buffer screen is a static display while the user scrolls. This allows the browser only to calculate the elements’ position on the buffer screen instead of the entire app, which significantly improves performance. The following steps will help you combine the previous timer component with the ability to create an OnStart buffer screen in your next Canvas App.

OnStart Buffering Screen and Timer Set Up

Find a buffering Gif and upload it to your Canvas App media
Add a Timer function to your screen
Ensure the items are correctly labeled like the image, label, and redirect timer component
Format your buffer page appropriately for your design ideas
- You can choose to hide the timer or have it present on your screen
- For this specific OnStart buffer screen, I have hidden it behind the gif of choice
Set up your Timer component
1. OnTimerStart =True
2. OnTimerEnd= Navigate(‘Insert screen of choice here”)
  - This allows your Canvas App to navigate to the next screen when the Timer ends.
3. Start= True
4. Duration=3000 (equivalent to 3 seconds)
5. Repeat=False
6. Reset=False
Define the App OnStart Action to the “StartScreen” or screen of choice
Publish and Test

Power Platform Demo

Learn more about the benefits of Microsoft's Power Platform in a one-on-one demo.

Book Demo

Include User Identification

There are many reasons you might want to use Office 365 users in your canvas app. Perhaps you want to restrict access to certain features or data in your app to only Office 365 users. Or you might want to use the Office 365 user profile to gather information about your users.

You can leverage this by auto-generating a user’s photo-based on who is accessing the Canvas App. You can follow this step by step guide to incorporate it into your next Power App:

Add a new screen
Insert Media [Image]
Insert the following function into the Image Fx line: User().Image

You can enhance this by adding a label such as “Welcome” or possibly adding an employee name field utilizing a similar formula like User().FullName to pull the app user’s full name.

These customizations would result in the following screenshots below.

Empower Developers with Component Framework

The Power Apps component framework allows meta-data driven components to be packaged into standard Power App Solutions and re-purposed in the Power Apps Design studio. This allows for easy movement across environments and dual-use within Canvas Apps and Model-Driven Apps.

The Component Framework allow for developers to extend the purpose of the Power App beyond it’s possibilities in addition to developing custom widgets. Some of the developer components we’re seeing within the Power Apps community are:

Dual-language interface
Pop Up Additions
Relevance Search Enhancements

Leverage Canva inside your Canvas Apps [Bonus]

To do this, you would open the web app Canva and create a design from scratch using custom dimensions of 640×1134 pixels. Once your design in Canva is finalized, you would then export that design as a PNG. When inside a Canvas App screen, you can upload this PNG to your Canvas App screen and build interactive components on top of the invention.

Closing

Your app needs to be more than just a blank canvas. It needs to be easy to use, with features that make it a pleasure to use. That’s what sets canvas apps apart from traditional web apps. With a standard web app, you must type in a URL, navigate to the page you want, and start typing. Canvas apps are different. They’re designed for quick and easy access, with a built-in search bar and a menu that makes it easy to find the app you want. Plus, they’re always up to date, with the latest features and enhancements. So if you’re looking for an app that’s easy to use and packed with features, a canvas app is the way to go, and these user experience enhancements can help set you apart. Our team at Avantiico can provide guidance and expertise in Power Apps and the overarching Power Platform.