Canvas Apps Controls Responsiveness User Experience

S – Size Break Points – Learn how to use them!

Different sized screens
Different sized screens

Introduction

Size break points are a key element of making your apps responsive. It is a property of the app control.

How to use size break points

Size break points help you define when to change the behavior of a control (e.g. its X position, or Y position, or width etc.) based on screen width. The default values are [600, 900, 1200]. This gives me 4 ranges to play with:

  1. Less than 600
  2. Between 600 and 900
  3. Between 900 and 1200
  4. Greater than 1200

This translates into the size property of a screen. The above 4 ranges translate into sizes 1, 2, 3, and 4. You can then have expressions like the following for, lets say, the wrap count of a gallery:

Switch(
    'Screen1'.Size,
    1,
    1,
    2,
    2,
    3,
    3,
    4,
    4,
    4
)

Or simply

Screen1.Size

The advantage of translating break points into sizes is if you ever want to change your break points, all you will need to do is update the app's SizeBreakPoints property. Otherwise you would have to go to every control that has any dependency on these break points. Here is a demo:

Screen Size & gallery wrap count
Screen Size & gallery wrap count

To learn more about creating responsive apps, click here.

Stay tuned for the remaining 7 tips!

Recent articles

Leave a Reply