Responsiveness – the fundamentals!

Concepts to learn responsiveness

Introduction

Certain concepts are foundational to responsiveness. Hence, I thought they deserved a separate post. Especially before illustrating specific responsive designs in detail.

Responsive concepts

Controls

1. Container - It is a Power Apps control used to group other controls to create hierarchies. And just like other controls, containers have their own properties. On the other hand, groups do not have properties. To learn more about the differences between containers and groups, click here. To add a traditional container, click on the Insert tab, and then under Layout, select Container.

   

App properties

1. Screen Size - The screen’s size specifies the device's size or window being used. This property has four possible values: Small (1), Medium (2), Large (3), and ExtraLarge (4). To calculate these values, Power Apps compares the width of the device/window to what are called breakpoints. These breakpoints have default values of [600, 900, 1200]. To define these values, use the SizeBreakPoints property of the app control. With these values, the screen sizes are defined as:
   • • 1 = width < 600 (phone)
     • 2 = width > 600 and < 900 (tablet held vertically)
     • 3 = width > 900 and < 1200 (tablet held horizontally)
     • 4 = width > 1200 (desktop)

   In order to achieve a responsive button positioned at Y=10 on mobile devices and Y=100 on desktops, set its Y position to:

   Switch(
       'Home Screen'.Size,
       1,
       10,
       2,
       10,
       3,
       100,
       4,
       100
   )

2. SizeBreakpoints - A property of the app control to define the values that are used to calculate the size of a screen. As described above, the default values are [600, 900, 1200]. However, these can be changed to any custom values. Also, you can define any number of break points.

Operators

1. Parent - An operator to reference a control that is up one level in the hierarchy of layered controls. You can use the parent operator to make properties of a control based on its parent. This, in turn, makes it easy for you to move controls around to achieve responsiveness. Continuing with the example of a button from above (assuming the button is directly on the Home Screen), you can define the Y position as:

   Switch(
       Parent.Size,
       1,
       10,
       2,
       10,
       3,
       100,
       4,
       100
   )

Gallery properties

1. Wrap Count - A property of the gallery control that specifies the number of columns for a vertical gallery. While for a horizontal gallery, it specifies the number of rows. It is common practice to make wrap count dependent on screen size for responsiveness.
2. Template Size - A property of the gallery control that specifies the height of each item for a vertical gallery. While for a horizontal gallery, it specifies the width of each item.

Recent articles related to responsiveness

1. How to create responsive Power Apps!
2. Create a Pinterest like gallery!
3. Calculate the height of a flexible height gallery!