Responsive Canvas PowerApps (Office 365)

This blog will help to implement responsive canvas PowerApps

Let's start from scratch and look at how to implement responsive apps using Power Apps. I prefer to implement responsive apps with Mobile landscape layout, however it's your own individual choice when it comes to  choosing a layout. Let’s go through step by step.

1. Create a blank canvas app where device type will be mobile & orientation will be landscape. In advanced settings we have "Scale to fit" & "Lock orientation". Disable scale to fit, and based on your requirement choose the orientation option.
   
   Lock Orientation - It helps to manage app layout based on device orientation, we can choose to keep it locked
   Scale to Fit - For responsive UI -- keep this option Off
   
   
2. Once all settings are chosen, let's start with some basics on how to detect device types.
   
   
   • PowerApps out of the box provides SizeBreakpoints [600, 900, 1200] or [1200, 1800, 2400] which represent Mobile, Tablet & Web as well as extra large devices
   • If device width is less than 600 / 1200 then it's a mobile device, width in between 600/1200 to 900/1800 represents Tab. Same as web & if it's more than that it's a large device
   • How to get or check device type.(1) Small, (2) Medium, (3) Large & (4) Extra Large (Enum type of object)
     
     
3. Based on device type we need to define height, width, X axis position & Y axis position (by dynamic calculations).These 4 properties are important to make things responsive.
   
   
4. Now let’s start with basic examples for responsive UI. Create responsive header for canvas app. Add label with the below formulas so that it will take full width & on top.
   
   X Axis - 0 + some margin (Number)
   Y Axis - 0 + some margin (Number)
   Height - Number
   Width - Parent.Width
   
   
5. Add textbox side by side for web device & vertical one by one in mobile/Tab
   
   
   • TextInput1
     
     X Axis = 0 + some margin (Number)
     Y Axis = lblHeader.height + some margin (Number)
     Height = Number
     Width = Number
     
     
   • TextInput2
     
     X Axis = If(Parent.Size =ScreenSize.Large Or Parent.Size = ScreenSize.ExtraLarge,TextInput1.X+TextInput1.Width+ Number for gap,Number for gap)
     Y Axis = If(Parent.Size =ScreenSize.Large Or Parent.Size = ScreenSize.ExtraLarge, TextInput1.Y, TextInput1.Y +TextInput1.Height +Number for gap)
     Height = Number
     Width = Number
     
     
6. This way we can manage responsiveness of controls. In some cases we have to use list Edit/View forms or complex screens, for those I would suggest to use separate screen for web & mobile/Tab. To navigate between screens based on device type, please refer to the below sample code.
   
   

References

https://powerapps.microsoft.com/en-us/blog/new-properties-for-responsive-canvas-apps/
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout