#PowerPlatformTip 69: 'Optimize Loading with Fullscreen Reference'

TL;DR: For fullscreen root containers, size them from the source value instead of the screen: Width = Max(App.Width, App.MinScreenWidth) and Height = Max(App.Height, App.MinScreenHeight). That is the same value the screen uses, without the extra hop through the screen’s own formula, and it adapts to window resizes and device rotation.

Every size formula in a canvas app is part of a dependency chain. The shorter the chain from the window size to your containers, the fewer formulas have to be recalculated in sequence when the app starts or the window changes.

💡 Challenge

Fullscreen layouts are usually built with Parent.Width and Parent.Height on the top-level container. Parent is the screen, and the screen’s own Width and Height are formulas based on the app window. Every root container therefore waits for the screen’s formula, and every nested control waits for its container.

✅ Solution

Reference the app window directly in your root containers. The App.Width and App.Height properties correspond to the dimensions of the device or browser window in which the app runs. The screen’s default formulas are:

Width  = Max(App.Width, App.MinScreenWidth)
Height = Max(App.Height, App.MinScreenHeight)

Use the same formulas on your root containers and they get the screen’s size straight from the source.

🔧 How It’s Done

1. Set the root container to the window size.

🔸 Select the top-level container of the screen and set:

Width  = Max(App.Width, App.MinScreenWidth)
Height = Max(App.Height, App.MinScreenHeight)

🔸 Keep the Max(..., App.MinScreen...) part. A plain App.Width gets smaller than the screen when the window is narrower than the minimum screen width, and the layout no longer fills the screen.

2. Keep Parent inside the containers.

🔸 Child controls continue to use Parent.Width and Parent.Height. Their Parent is now the container anchored to the window, so the chain stays short.

3. Set the minimum screen size once.

🔸 Define MinScreenWidth and MinScreenHeight on the App object (Properties > Advanced). Below these values the screen scrolls instead of shrinking the layout.

4. Check responsiveness.

🔸 In Settings > Display, turn off Scale to fit, so App.Width and App.Height follow the real window.

🔸 Play the app and resize the browser window, or rotate a tablet. The screen formulas are reevaluated when the window size changes, and the containers follow immediately.

🎉 Result

The root containers get their size directly from the app window, the layout stays identical to a Parent-based one and adapts to every window size and orientation.

🌟 Key Advantages

🔸 Shorter dependency chain: root containers no longer wait for the screen’s size formula.

🔸 Same layout: Max(App.Width, App.MinScreenWidth) is exactly what the screen uses.

🔸 Responsive by default: resizes and rotation are picked up automatically.

🛠️ FAQ

1. Why not simply use App.Width and App.Height?

Because the screen never gets smaller than MinScreenWidth and MinScreenHeight, but App.Width and App.Height do. Wrap them in Max() with the minimums to get the same size as the screen.

2. Will this change affect my existing app layouts?

Not if you use the Max() formulas above: the container gets the same size as before. Nested controls keep their Parent references.

3. Why doesn’t my layout react to resizing the browser window?

Scale to fit is still on. With it, the app scales one fixed design canvas instead of reflowing. Turn it off in Settings > Display to build a responsive layout.

🔗 Related Tips

🔸 #PowerPlatformTip 32: ‘Optimize with GroupBy’ - another startup-time win, loading data once instead of per dependent filter.

🔸 #PowerPlatformTip 78: ‘Efficient Control Reset’ - a similar small formula change with an outsized performance benefit.