Deep Dive | Adding Responsive Design to PowerApps

Introduction

In this day and age, it is normal for a power user to start working on one device and then pick up where he/she left off on another. Hence the need to have similar responsiveness in PowerApps has been requested by the Power Users community and thanks to the PowerApps Product Group, this feature is now available. This new feature is still in its infancy stages and if you create a responsive layout, controls can respond to different devices or window sizes, making the experience on different form factors feel more at home. To achieve a responsive layout, you adjust some settings and write expressions throughout your app. This blog walks you through how you can plan and build an app with a responsive design. Would you like a little intro before diving in?

To create a responsive design, you locate and size each control by using formulas instead of absolute (constant) coordinate values. These formulas express each control’s position and size in terms of the overall screen size or relative to other controls on the screen.

IMPORTANT!!

When you start to use formulas to achieve a dynamic layout, you should avoid dragging controls. Dragging will remove the formulas you’ve added for the dynamic feature and replace it with static numerical values.

Video

Here’s the video that deep dives into how to build your very first app using PowerApps with responsive design:

Here’s the screenshot of the app:

Microsoft PowerApps | Responsive Design

Here is the list of key formulas for each control

Header label or HeaderLabel

X = 0

Microsoft PowerApps | Responsive Design

Y = 0

Microsoft PowerApps | Responsive Design

Width = Max(App.Width)

Microsoft PowerApps | Responsive Design

Height = Parent.Height/20

Microsoft PowerApps | Responsive Design

Submit button or SubmitButton

X = 0

Microsoft PowerApps | Responsive Design

Y = Parent.Height-SubmitButton.Height

Microsoft PowerApps | Responsive Design

Width  = Max(App.Width)

Microsoft PowerApps | Responsive Design

Height = Parent.Height/20

Microsoft PowerApps | Responsive Design

Height of all the remaining controls

We are going to create a temporary label and reference it as a height for all the remaining controls. Create a temporary label and call it HeightLabel and here is the formula

Microsoft PowerApps | Responsive Design

(Parent.Height-(DeviceGallery.TemplateHeight+SubmitButton.Height+HeaderLabel.Height))/12

Full Name Label or FullNameLabel

X = 0

Microsoft PowerApps | Responsive Design

Y = HeaderLabel.Y+HeaderLabel.Height

Microsoft PowerApps | Responsive Design

Width = Max(App.Width)

Microsoft PowerApps | Responsive Design

Height = HeightLabel

Microsoft PowerApps | Responsive Design

Full Name Text Input or FullNameTextInput

X = 0

Microsoft PowerApps | Responsive Design

Y = FullNameLabel.Y+FullNameLabel.Height

Microsoft PowerApps | Responsive Design

Width =  Max(App.Width)

Microsoft PowerApps | Responsive Design

Height = HeightLabel

Microsoft PowerApps | Responsive Design

Here’s a table that provides you the information you need for the remaining controls.

Control Name X Y Width Height
Email Address Label or EmailAddressLabel 0 FullNameTextInput.Y+FullNameTextInput.Height Max(App.Width) HeightLabel
Email Address Text Input or EmailAddressTextInput 0 EmailaddressLabel.Y+EmailaddressLabel.Height Max(App.Width) HeightLabel
State Label or StateLabel 0 EmailAddressTextInput.Y+EmailAddressTextInput.Height Max(App.Width) HeightLabel
State Combo Box or StateComboBox 0 StateLabel.Y+StateLabel.Height Max(App.Width) HeightLabel
City Label or CityLabel 0 StateComboBox.Y+StateComboBox.Height Max(App.Width) HeightLabel
City Combo Box or CityComboBox 0 CityLabel.Y+CityLabel.Height Max(App.Width) HeightLabel
MFR Label or MFRLabel 0 CityComboBox.Y+CityComboBox.Height Max(App.Width) HeightLabel
MFR Combo Box or MFRComboBox 0 MFRLabel.Y+MFRLabel.Height Max(App.Width) HeightLabel
Device Label or DeviceLabel 0 MFRComboBox.Y+MFRComboBox.Height Max(App.Width) HeightLabel
Device Combo Box or DeviceComboBox 0 DeviceLabel.Y+DeviceLabel.Height Max(App.Width) HeightLabel
Device Gallery or DeviceGallery 0 DeviceComboBox.Y+DeviceComboBox.Height Max(App.Width) (DeviceComboBox.Y+DeviceComboBox.Height)-SubmitButton.Height
Device Gallery Image 0 (Parent.TemplateHeight / 2) – (Image1.Height / 2) Max(App.Width) SubmitButton.Y-(DeviceComboBox.Y+DeviceComboBox.Height)

As mentioned in the video here are the remaining formulas on how to filter the combo box controls and how-to setup the Height, Parent Width and the Parent Height labels

StateComboBox items:

‘[dbo].[StateCapital]’

CityComboBox items:

Filter(‘[dbo].[StateCityCounty]’,StateLong=StateComboBox.Selected.State)

MFRComboBox items:

Manufacturers

DeviceComboBox Items:

Filter(Devices,ManufacturerName=MFRComboBox.Selected.Title)

DeviceGallery

Filter(Devices,Title=DeviceComboBox.Selected.Title)

Max(App.Width)

HeightLabel

HeightLabel

X = 0

Y = SubmitButton.Y

Text = (Parent.Height-(DeviceGallery.TemplateHeight+SubmitButton.Height+HeaderLabel.Height))/12

ParentWidthLabel

Text = Concatenate(“W – “,Text(Parent.Width))

X = 0

Y = 0

ParentHeightLabel

Text = Concatenate(“H – “,Text(Parent.Height))

X = Parent.Width-ParentHeightLabel.Width

Y = 0

Don’t forget to check out our blog for more great content from Daniel + other Microsoft MVPs and don’t forget to visit his YouTube channel for more great explanations and walkthroughs! 😁

Helpful links

***

Do you love responsive design? Did you know that Valo Intranet on Modern SharePoint is 100% responsive! Find out more on our website or book a demo to learn how your company can fall in 💛 with their responsive intranet!

***

Like what you’ve just read? Find out more from Daniel Christian in his blog about User-based security in PowerApps.

BOOK A DEMO

Schedule your free demo!

Want to make your life much easier and work more effective? Yes! We’re more than happy to schedule a demo with you! Just contact us and we’ll get back to you.

We keep your information safe. Read more from our Privacy Policy.

Subscribe to our Newsletter

Get our news delivered right into your inbox. We won’t spam, promise!

We keep your information safe. Read more from our Privacy Policy.