Canvas App Size
A canvas app runs in a client browser as a single web page and the larger the canvas app size, the greater the device memory that can be required for the app to run
If an app contains a large number of controls and particularly if a single screen contains many controls, an app can become visibly slow. This can be especially evident when using a mobile device such as a smart phone or tablet
To prevent performance issues, Microsoft recommend that a Canvas App contain a maximum of 500 controls with no more than 300 controls on a single screencanvas
How Many Screens?
In a Canvas App,
screens load individually when the user navigates to them. When a user navigates away from a screen, any
data not required for the next screen is removed from memory. This concept is important
to take into account when building a Canvas App
Splitting an app’s functionality
across several screens rather than combining into a single screen helps performance as long as there aren’t cross-screen dependencies. If a control in a screen takes its value from
a control in the previous screen viewed by the user, that’s fine because the
required value is retained in memory during screen transition. However, if the control takes it value from a
control in a different screen, that screen has to load into the device memory first,
to obtain the required value. This will
create a delay and is not good practice.
It should be avoided where possible and there is often a simple
workaround such as saving values to a variable or collection
A good screen
structure for an app is very important both in terms of performance and
usability. There aren’t any
recommendations from Microsoft on the maximum number of screens to use in a
canvas app. However, I would suggest that the maximum number
of screens should really be no more than 15.
This makes sense because although an app with too few screens can create
performance issues, an app with too many screens can become difficult for users
to navigate and use. Taking into account
the 500-control recommendation, for an app with 15 screen the average number of
controls per screen will be around 30
For further guidance
on the use of screens and other ways to optimise performance of a canvas app
the Microsoft Performance Guidelines are very helpful
App Checker Warnings
The recommended maximum
of 500 controls per app and 300 controls per screen is a recommendation rather
than a hard rule, and it is not enforced
If the recommended
limits are exceeded, the only warning you’ll get in Power Apps Studio is that
the App Checker will alert you to those screens that contain more than 300
controls
No warning is
displayed if the recommended number of 500 controls in an app is exceeded
Counting Controls
Using Power Apps
Studio, it’s easy to count the number of screens an app contains. However, Power Apps Studio doesn’t have any
functionality to tell you the total number of controls in an app or the number
of controls on an individual screen. Manually
counting controls can take some time!
You can use a utility
such as the Power Apps Code Review Tool This is
a canvas app created to help validate the coding of other canvas apps. It can be downloaded from the link above and uploaded
into any environment. The Code Review
Tool can then be used to assess any canvas apps within that environment. One of the metrics produced is a count of the
number of controls an app contains on each screen. This is a useful way of being able to keep
track of the size of a canvas app while it is under construction
Alternatively, unpack
the MSAPP file and view the entropy.json file in the entropy folder in Visual
Studio. The total number of lines in
this file gives the number of controls
You are likely to find there are differences between the number of controls identfiied using the two methods above. Bearing in mind that the control limit is a recommendation rather than a hard rule, the results are close enough
Exceeding Maximum Number of Controls
Because the recommended
maximum of 500 controls per app and 300 controls per screen is a recommendation
rather than a hard rule, it is possible to keep adding controls after the
limits have been reached and build a Canvas App with many more controls
Some very large Canvas
Apps have been created with over 5,000 controls, 10 times the recommended limit! These large apps work but are slow both to edit
and use. The data can often be seen cascading
down the screens while loading, similar to updating a very large Excel
spreadsheet. That isn’t a good user
experience!
However, my view is that the 500-control limit is
conservative. Whilst it is important to
not exceed 300 controls on a single screen, modestly exceeding the recommended
500 controls in an app is not likely to degrade performance significantly,
particularly if the other Microsoft Performance Guidelines have been followed
Ways to Reduce the Number of Controls
If you find that your canvas
app has too many controls or you simply want your app to run as efficiently as
possible, here are some tips on what you can do:
Make use of Components
If there are controls
that are duplicated across screens, such as headers, footers or menus, then
these are great candidates for components.
Components are created once and used many times
throughout an app. With Component
Libraries the same components can even be used in multiple apps! Components
save time when creating and updating apps as well as reducing the number of
controls and improving performance
Remove Unnecessary Controls
Rather than overlay
several controls on top of each other and use the ‘Visible’ property to define
which control to display, use a single control with an ‘If’ statement to
produce the same result. This both
reduces the number of controls and makes an app much easier to debug and
update
It can be tempting to
use hidden controls on screens, and this is often the case when calculations
are required. Avoid the temptation to do
this. Power Apps is not design for
complex number crunching. If Dataverse
is your datasource, then, if possible, use a calculated field instead. If this is not possible then consider using
Power Automate to complete the calculations.
This will improve the performance of the app as well as reducing the
number of controls
Add Additional Screens
Too many controls on a
single screen can be a symptom of inadequate app design. Think through how users will use the
app. If the user will be following a
logical step by step processes, then consider splitting functionality across
additional screens to reflect this
Use Galleries for Repeating Controls
Galleries are designed
to display repeating content. This not
only applies to data but also to controls such as buttons. Rather than adding individual buttons, create
a gallery containing a single button and link the ‘Items’ property of the
gallery to the text to be displayed in each button instance. Simple and efficient!
Split Functionality into Seperate Apps
The functionality of an
overly large app can be split into separate apps. The Launch function can be used in one app to
open a second app in a separate browser window.
This is much better than cramming lots of functionality, some of which
may only be used occasionally, into a single app
Does the Physical File Size of an App Matter?
There are no limitations on the physical file size of a Canvas App
Typically, the size of an individual Canvas App will only be several mega-bytes, so not a very large file at all. However, the size of a Canvas App is heavily influenced by any photos or videos the app contains so a media heavy app could be much larger. The size of an app can be seen when it is downloaded locally from Power Apps Studio and saved as an msapp file
Although there are no hard restrictions, for performance reasons, it’s always important to consider the media used in a Canvas App and to optimise the definition of images and videos where possible
Summary
Canvas apps are incredibly powerful and flexible and because of this it can be tempting to keep adding more screens and functionality
Being aware of the Microsoft sizing recommendations and the Microsoft Performance Guidelines will guide understanding of how canvas apps operate and highlight the best practices
Here’s an earlier post of mine discussing in more detail how tune Canvas App performance: 25 Great Tips to Optimise Power Apps Performance