Create a responsive form/app in Power Apps

Learn how to create a responsive app/form in Power Apps

What will we build?

In this blog post we will create a responsive app, focusing on the form component

The app/form will be build to fit on any screen size or orientation

Solution

Step 1
Go to make.powerapps.com and create a new blank canvas app (select phone size)

Step 2
Go to settings and turn off Scale to fit. Lock aspect ratio should automatically be turned off as well

Step 3
In App insert following code

MinScreenWidth =
Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight)) MinScreenHeight =
Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Rename Screen1 to startScreen and change the following properties for your screen

Width =
Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight)) Height =
Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Fill =
RGBA(76, 88, 58, 0.5)

These steps are very important for your app to be responsive, and must be included in all screens

Step 4
In your startScreen insert a vertical container, and change following properties

X = 0
Y = 0
Width = Parent.Width
Height = Parent.Height
LayoutAlignItems = LayoutAlignItems.Stretch
LayoutJustifyContent = LayoutJustifyContent.Center

Step 5
Inside your container insert a new Form, you can use the classic form, or the modern. We will continue with modern

Go to settings -> updates -> new -> modern controls and themes, to turn it on

Use following properties

X = 0
Y = 0
Width = Parent.Width
Height = Parent.Height

Your form should now look something like this

Try to run your app. Not very responsive yet. If you run the form on the mobile, the input fields are also very small.

Select all your datacards (you can select them in the tree view, you just need to hold CTRL and select minimum 3 times with the mouse)

Change the following property

Width = Parent.Width

Try to run your app again. Now we are getting some better responsiveness

Step 6
Go back to app and select OnStart and insert following code

Set(vSmallDatacardHeight, 150);
Set(vSmallDatacardvalueHeight, vSmallDatacardHeight - 50);
Set(vFontSize, 35);
Set(vTitleHeight, vFontSize * 2);

Right click on App and select Run OnStart (this must be done each time your change any of the properties in OnStart)

Step 7
Select all your datacards again and change the following property

Height = vSmallDatacardHeight

Step 8
Select your titles and change the following properties (here you can only change one at the time)

Height = vTitleHeight
Size = vFontSize

Step 9
Select your input field and change the following properties (again only one at the time can be changed)

Height = vSmallDatacardvalueHeight
FontSize = vFontSize

Step 10
We need a submit form button

Select your form and click on Field -> Edit fields

Select the 3 dots and click Add a custom card

Give your new card the following property

Width = Parent.Width
Height = vSmallDatacardHeight + vTitleHeight

Insert a button and give it the following properties (use a classic button)

Fill = RGBA(76, 88, 58, 1)
BorderThickness = 0
Width = Parent.Width - 48
Height = vSmallDatacardvalueHeight
X = 24
Y = DataCardKey1.Y + DataCardKey1.Height + 4 (DataCardKey1 = the name of your DataCardKey)
HoverFill = ColorFade(RGBA(77, 88, 57, 1), -20%)
HoverColor = RGBA(255, 255, 255, 1)
Text = "Submit form"
OnSelect = If(Form1.Valid, Form1.Updates); Notify( "Your form has been submitted", NotificationType.Success, 5000)

Try to run your app in various sizes (and publish it and test it on your phone/tablet)

So far so good, but the width of the inputs are taking the entire screen. It looks OK on a phone, but not so nice on bigger screens. Let’s add some padding

Step 11
Go back to the OnStart property in App and add the following code

Set(vPaddingSmall, 0);
Set(vPaddingMedium, 0.1);
Set(vPaddingLarge, 0.15);
Set(vPaddingExtraLarge, 0.20);

The numbers represent the percentage of padding we would like (on each site), so you can change them to your liking.

Don’t forget to Run OnStart

Step 12
Select your container and insert following code

PaddingLeft =

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, vPaddingSmall,
    ScreenSize.Medium, vPaddingMedium,
    ScreenSize.Large, vPaddingLarge,
    ScreenSize.ExtraLarge, vPaddingExtraLarge,
    0
)

PaddingRight =

Self.PaddingLeft

We now have a form that looks good on various screens

Here is the app on an iPhone in portrait mode Here is the app on the same phone, but in landscape mode Here is the app on an iPad in portrait mode Here is the app on the same tablet, but in landscape mode