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.
- 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
- 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)
- 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.
- 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
- 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
![]()
- 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