This guide covers the 11 best practices you need to optimize your canvas apps.
- Enable Loading Spinner for galleries
Loading Spinners indicate to users that content is still being loaded, reducing confusion or likelihood of leaving the page.
In the Gallery panel, under the Advanced tab, change LoadingSpinner.None to LoadingSpinner.Controls or LoadingSpinner.Data based on your needs.
- If using more than 20 images, insert them as HTML text
Images uploaded through the Media panel increase the app’s load time. If using more than 20 images, insert them as HTML text to minimize load. For example: Uploading 25 images through the Media panel results in a 3-second load time, whereas uploading 25 images using a tag result in a 1-second load time.
Go to Insert > Text > HTML text and enter “< img src='INSERT HYPERLINK'>” in the formula bar.
- Create components for common elements
To save time and unify design across screens or apps, create components for frequently used elements like headers and footers. This enables you to easily reuse elements so you don’t need to recreate them.
In the Tree view pane, go to Components > +New component and build your component.
- Use Concurrent function if formula execution is nonsequential
If you have more than one formula in no particular sequence, evaluate the formulas using the Concurrent function. The Concurrent function evaluates multiple formulas simultaneously, enabling your app to load data faster.
- Use delegable calls over non-delegable calls
When calling data sources, some functions are delegable while others are not. Delegable functions are evaluated on the server with higher performance. Non-delegable functions require the data be downloaded to the client and evaluated locally. This process is slower and more data-intensive than a delegable call.
- Use IfError for exception handling
The IfError function tests values for errors. If the function finds an error, it replaces the error with a valid value so downstream calculations can continue without delay.
IfError is a Power Apps experimental feature and is turned off by default. To enable it, go to Settings > Upcoming features > Experimental and turn on “Formula-level error management”. Once it’s enabled, enter IfError(1/0, Notify(“Error has occurred”, Error), Notify(“Success”, Success)) in the formula bar.
- Store data in a collection
To avoid repeated calls to the data source (which takes more time), store data in a collection or use the Set function to cache data from the lookup tables locally and then use it everywhere inside the app.
- Use a global variable or collection to share information between screens
To avoid control dependencies, use a global variable or collection to share information between screens.
Example: Do not use ‘Gallery.selected.columnName’ in screens other than where this gallery exists. Instead store this value in a global variable i.e., Set(galData, Gallery.selected.columnName) and then use this variable.
- Use combo boxes instead of drop downs
Combo boxes are a combination of a search bar and a drop down. They enable users to search for items or view items by category, instead of having to scroll through long traditional drop down lists.
To add a combo box, go to Insert > Input > Combo Box
- Use themes
A theme defines the design properties for controls and components such as colors, fonts, and borders.
Using themes enables you to maintain design consistency across your app.
Under the Home tab, use the Theme drop down to choose a theme.
- Limit code inside the OnStart property
Limit the code within the OnStart property to improve the debug process and use StartScreen property to prevent complex, long-running formulas in App. OnStart can significantly slow the startup time of an app.