How to increase performance by trashing extra screens and controls

Introduction - Screens and controls

Screens and controls are the most fundamental building blocks of an app. Think of them as resources that are needed to build an app. As you add more of them to an app, it becomes resource heavy and can eventually start affecting performance. So it is crucial to minimize their count used in an app and repurpose/reuse as many of them as possible. To learn about all their properties, click here.

An example with multiple screens and controls

Consider a very simple example. Let's say we want to create a set of welcome messages introducing users to Power Platform. Here is a demo:

One way to achieve this is to have 3 screens. Each screen will have an image control, a label, and 1 or 2 icons. The icon's OnSelect would navigate users to the next/previous screen. With this approach, the total number of screens will be 3 and the total number of controls will be 10 (3 on the 1st, 4 on the 2nd, and 3 on the 3rd).

Same example with reduced screens and controls

The exact same behavior can be achieved by using just 1 screen and 4 controls (one image control, one label, and two icons). Here are the steps:

1. Screen
   1. OnVisible:

      UpdateContext({locSelectedPage: 1});

2. Image control's
   1. Image property:

      Switch(
          locSelectedPage,
          1,
          powerplatform,
          2,
          powerapps,
          3,
          powerautomate
      )

   2. X:

      (Parent.Width - Self.Width) / 2

3. Label
   1. Text:

      Switch(
          locSelectedPage,
          1,
          "Welcome to Power Platform!",
          2,
          "Power Apps is cool!",
          3,
          "Power Automate is NOT cool!"
      )

4. Left Icon:
   1. X:

      If(
          locSelectedPage = 3,
          (Parent.Width - Self.Width) / 2,
          (Parent.Width - Self.Width) / 2 - Self.Width 
      )

   2. Visible:

      !(locSelectedPage = 1)

   3. OnSelect:

      UpdateContext({locSelectedPage: locSelectedPage - 1})
      

5. Right Icon:
   1. X:

      If(
          locSelectedPage = 1,
          (Parent.Width - Self.Width) / 2,
          icnLeft.X + icnLeft.Width + 20 
      )

   2. Visible:

      !(locSelectedPage = 3)

   3. OnSelect:

      UpdateContext({locSelectedPage: locSelectedPage + 1})

And that's it! There is no demo for this, as it looks exactly the same as the previous demo!

Recent articles

1. How to get rid of cross screen dependencies
2. Optimize data calls inside a gallery
3. How to make concurrent multiple unrelated data calls