Controls reuse to improve performance

Background

The number of controls on a screen can affect an app's performance. As a best practice, run the App Checker within the studio to review performance improvement suggestions (among other warnings and issues). One of the performance warnings that I have run into recently is that there are too many controls on a screen. It tells the app maker that the screen may not be performant and also suggests ways to fix it.

Too many controls - An example

Given this information about performance, it is advised that an app maker should try to reduce the number of controls on a screen as much as possible. A very common example in any app is needing to sort a gallery by different columns in ascending/descending order.

Here is an example of a gallery of accounts with headers that allow sorting by the different columns. Each header (which is a button control) sets a variable to a value to define the column that will be used to sort the gallery. It also sets the value of another variable to true/false to define the sort order. The Items property of the gallery is as shown below:

Switch(
    gblSortBy,
    "name",
    Sort(
        Filter(
            Accounts,
            'Accounts (Views)'.'Active Accounts'
        ),
        'Account Name',
        If(
            gblSortOrder,
            Ascending,
            Descending
        )
    ),
    "phone",
    Sort(
        Filter(
            Accounts,
            'Accounts (Views)'.'Active Accounts'
        ),
        'Main Phone',
        If(
            gblSortOrder,
            Ascending,
            Descending
        )
    ),
    "city",
    Sort(
        Filter(
            Accounts,
            'Accounts (Views)'.'Active Accounts'
        ),
        'Address 1: City',
        If(
            gblSortOrder,
            Ascending,
            Descending
        )
    ),
    "number",
    Sort(
        Filter(
            Accounts,
            'Accounts (Views)'.'Active Accounts'
        ),
        'Account Number',
        If(
            gblSortOrder,
            Ascending,
            Descending
        )
    ),
    "contact",
    Sort(
        Filter(
            Accounts,
            'Accounts (Views)'.'Active Accounts'
        ),
        'Primary Contact'.'Full Name',
        If(
            gblSortOrder,
            Ascending,
            Descending
        )
    )
)

To provide a visual indication of the column by which the gallery is currently sorted, it is a good idea to add 2 controls  (arrow icons) next to each header. One is used to denote the descending sort order and the other for ascending sort order. The Visible property of the icons can be used to make the relevant icon visible based on the sort order and the sort column. With 5 columns in this example, this amounts to 10 icons.

Reusing controls

There are a couple of ways that can help reduce the number of controls (icons) down to 2 or even 1!

• Instead of using 10 icons, add only 2 - one down arrow and one up arrow. Based on the sort order, make the up or down arrow visible. Based on the sort column, change the X position of the down and up arrow to place it next to the appropriate header.
• To even further reduce the number of icons to 1, use only one arrow - either down or up based on the default sort order. For example, if the default sort order is ascending, use the up arrow and if the default sort order is descending, use the down arrow. Then, set the Rotation property of the icon as shown below:

  If(gblSortOrder, 0, 180)

  gblSortOrder is the variable that is used to denote the sort order. The OnSelect of each header toggles its value between true and false. This expression states that if the value of gblSortOrder is true, which in this case denotes ascending sort order, the rotation should be 0. If the value of gblSortOrder is false, the rotation should be 180. This simply means that the up arrow changes into a down arrow to denote descending sort order.

Following these 2 simple steps, we reduced the number of controls (icons) needed from 10 to 2 and further down to 1! Find more performance improvement techniques here.

Summary

1. Too many controls on a screen can adversely affect performance as each control consumes resources
2. Try to reuse as many controls as much as possible to help performance
3. Use properties such as Rotation for icons to use one icon that can denote both ascending and descending sort order

Related Articles

1. Power Apps Monitoring
2. Global vs Context variables
3. Enhanced performance for hidden controls