Canvas Apps Performance

Enhanced performance for hidden controls

ALERT: If you are not interested in my story behind this post, jump straight to the Super Mario Story! (yes, you will have to read at least one of the two stories, both would be ideal!)

A couple of days ago, I had created what I thought was a great app - it was going to be used by an organization to track their mask creation process (yup, COVID-19 has now officially entered my work and my blogs). I was all excited about presenting the app to their CEO. Without going into the details about the features of the app and how it was designed, the thing that is relevant to this post is that I had a timer control on the home screen. As is almost always the case with timer controls, something happens at the end of the timer (OnTimerEnd property).

When I played the app during the demo, everything looked good until the moment when the timer was supposed to kick in. I waited and waited but the timer did not start and the events that were supposed to happen at the end of the timer, well, never happened. I then asked for a quick break so I could investigate the issue because this was all working fine before the demo, isn't that always the case?

Whenever I have used a timer control, I have almost always set its visibility to false. That's how my timer control was configured in this app as well. Since I was now testing and debugging to figure out why timer didn't start during the demo, I changed its visibility to true. When I previewed the app within the studio, it worked. I then decided to do my demo from within the studio (never a good idea, I DO NOT recommend this to anyone). Since I didn't want the timer to be visible during the demo, I changed its visibility to false. And guess what, it worked! I was able to save the demo. I was happy but still perplexed as to why it didn't work the first time. I had changed nothing other than making my timer visible and then hiding it again.

THE SUPER MARIO STORY: To illustrate this, I created a small app - Super Mario walking and being lazy, so instead of avoiding hurdles, he simply walks past them! A timer is used to control the X position of Mario. The timer's visible property is set to false and it is configured to start automatically (AutoStart set to true and Repeat set to true). With these settings, you would expect Mario to start walking as soon as the screen shows up but guess what happens? It seems as if he is walking on a treadmill!

Mario walking on a treadmill!

If I made the timer visible without changing anything else, Mario was free to walk again!

Mario walking with the timer visible

This was not ideal, we don't want timers to be visible in our apps. I then stumbled upon a new app setting under experimental features. This setting attempts to enhance performance by not creating hidden controls until they become visible! I have no idea how this experimental feature was turned on.

Experimental feature for hidden controls (click to enlarge)

Given this knowledge, I had 2 ways to make it work.

  • Turn this feature off and keep my timer hidden, or
  • Keep this featured turned on but hide the timer by sending it to back (so it goes behind all other screen controls) instead of setting its visibility to false

With either of the two approaches, I achieved the desired end result!

Mario Walking!

I am not sure if this experimental feature will ever come out of the experimental phase but I really hope it does! In my scenario, I could use either of the two approaches listed above since I had only one control that was hidden, so turning this feature off would not have had any positive impact on performance. However, there can be apps that have a lot of controls that stay hidden until a certain condition is met. For those apps, this feature can have a positive impact.

Long story short, if you have a lot of controls in your app that become conditionally visible, you should consider turning this feature on (although its an experimental feature and they are always risky since their behavior can change any time) and hiding the controls by layering them behind other controls. You can also make the control transparent but be careful with the placement of the control. A transparent control can prevent the user from clicking on a control that may be layered behind it (although the user will see no reason why they cannot click on a control). Note that once a control becomes visible for the first time, it gets created and if it gets hidden again, it still stays as an existing control. In other words, a control will not go through this cycle repeatedly even if it gets hidden or visible multiple times.

Hope this helps save time if you suddenly find your controls behaving as if they don't exist!

Have fun! Get addicted!

1 thought on “Enhanced performance for hidden controls”

Leave a Reply