How To Build Responsive Power Apps Forms From Scratch

Power Apps using a responsive design look amazing on all devices whether they are on computer, a tablet or a phone. They are made possible by responsive containers. When a screen changes size, the responsive container also re-sizes itself and tell the controls inside of them their new position in the app layout. To demonstrate how to build responsive Power Apps I have come up with a tutorial where you will build a simple form form scratch.

Table of Contents
• Introduction: The Safety Incident Report App
• Enable Responsive Design In The Power Apps Settings Menu
• Insert The Main Responsive Container And Make It Fit The Screen
• Add The Responsive Form Container And Limit Its Maximum Width
• Create The Responsive Form Header
• Setup The Responsive Form Body Container
• Add A Text Input Field To The Responsive Form Container
• Insert A Date Picker Field Into The Responsive Form Container
• Add The Remaining Questions To The Responsive Form Container
• Position The Responsive Form Top And Bottom Gutters
• Test The Power Apps Responsive Form

Introduction: The Safety Incident Report App

Workers at a construction company use the Safety Incident Report app to submit details about Heath & Safety incidents. The responsive app changes its user interface to fit any screen size.

The form can also floats on top of a background image and can scroll up-and-down.

Enable Responsive Design In The Power Apps Settings Menu

Open Power Apps and create a new app from blank. Open the settings menu and navigate to the display tab. Turn off the Scale to Fit option. Now the screen will expand to fill the browser window at any size.

Insert The Main Responsive Container And Make It Fit The Screen

Go to the Media menu and upload the construction blueprint background image.

Select the screen and use the construction blueprint image as the BackgroundImage. Set the ImagePosition property to Fill.

BackgroundImage: constructions
ImagePosition: ImagePosition.Fill

Add a vertical container to the screen named con_SIR_Main.

Make the container cover the entire screen using these values in its properties.

Height: App.Height
Width: App.Width
X: 0
Y: 0

Set the LayoutJustifyContent property to Top, the LayoutAlignContent property to Center, and the LayoutOverflowY (Vertical Overflow) property to Scroll.

Add The Responsive Form Container And Limit Its Maximum Width

The Safety Incident Report form will float on top of the background image and always remain centered. Add a vertical container named con_SIR_Form inside the container con_SIR_Main.

Give the con_SIR_Form container these properties.

Fill: Color.White
Height: 1000

Set the LayoutJustifyContent property to Top and the LayoutAlignContent property to Start.

The form will fill the entire width of the screen on small and medium screens. But when the screen size is large or extra large we want the form to stop expanding and have gutters to appear on the left-and-right side of the form.

Use this code in the Width property of the con_SIR_Form container.

Min(Parent.Width, Index(App.SizeBreakpoints, 2).Value)

Create The Responsive Form Header

A solid colored header is displayed at the top of the form showing its title and description. Insert a new vertical container named con_SIR_FormHeader into the con_SIR_Form container.

Use this code in the following properties of the con_SIR_FormHeader container.

Fill: RGBA(0, 120, 212, 1)
Height: 120

Set the LayoutJustifyContent property to Top and the LayoutAlignContent property to Stretch and the AlignInContainer property to Stretch. Use the padding property values shown below.

Insert two new labels into the con_SIR_FormHeader container.

Write this code in the following properties of the top label.

Font: Font.'Lato Black'
Size: 20
Text: "Safety Incident Report"

Use this code in the following properties of the bottom label.

Font: Font.'Segoe UI'
Size: 14
Text: "When you mess up, fess up... 😅"

Setup The Responsive Form Body Container

Another container below the form header will hold the form’s fields. Place a new vertical container named con_SIR_FormBody inside the con_SIR_Form container.

Use this code in the following properties of the con_SIR_FormBody container.

Color: Color.White
Height: 1000

Set the LayoutJustifyContent property to Top and the LayoutAlignContent property to Start and the AlignInContainer property to Stretch. Use the padding property values shown below.

Add a new button to the con_SIR_FormBody container with the text Submit.

We want the con_SIR_FormBody container’s height to always be 40 pixels taller than the position of the submit button.

Use this code in the Height property of the con_SIR_FormBody container.

btn_SIR_Submit.Y+btn_SIR_Submit.Height+40

We also want to ensure the con_SIR_Form container expands to the size of it’s child conatiners con_SIR_FormHeader and con_SIR_FormBody.

Use this code in the Height property of the con_SIR_Form container.

con_SIR_FormBody.Height+con_SIR_FormHeader.Height

Add A Text Input Field To The Responsive Form Container

The first question on the form captures a response using a text input control. It will always stretch to fill the entire width of the form. Insert three new controls at the top of the con_SIR_FormBody container:

• Label – lbl_SIR_QuestionTitle1
• Text Input – txt_SIR_QuestionValue1
• Label – lbl_SIR_Spacer1
  
  

Use this code in the following properties of the title label called lbl_SIR_QuestionTitle1.

AlignInContainer: AlignInContainer.Stretch
Font: Font.'Segoe UI'
Height: 60
PaddingTop: 20
PaddingBottom: 5
Size: 12
Text: "1. Incident Location"

Set the AlignInContainer property to Stretch. Use the padding property values shown below.

Write this code in the following properties of the text input txt_SIR_QuestionValue1.

AlignInContainer: AlignInContainer.Stretch
Font: Font.'Segoe UI'
Height: 40
Size: 12

Then use this code in lbl_SIR_Spacer1.

AlignInContainer: AlignInContainer.Stretch
Height: 40

Insert A Date Picker Field Into The Responsive Form Container

The second question on the form receives a response using the date picker control. This datepicker will have a fixed width. Insert three new controls at the into the con_SIR_FormBody container:

• Label – lbl_SIR_QuestionTitle2
• Date Picker – txt_SIR_QuestionValue2
• Label – lbl_SIR_Spacer2
  
  

Use this code in the following properties of the title label called lbl_SIR_QuestionTitle2.

Font: Font.'Segoe UI'
Height: 40
PaddingTop: 20
PaddingBottom: 5
Size: 12
Text: "2. Date Of Incident"

Write this code in the following properties of the text input txt_SIR_QuestionValue2.

AlignInContainer: AlignInContainer.Left
Font: Font.'Segoe UI'
Height: 40
Size: 12
Width: 300

Then use this code in lbl_SIR_Spacer2.

AlignInContainer.Stretch
Height: 40

Add The Remaining Questions To The Responsive Form Container

Question #3 in the form is setup exactly like Question #1 with a label, a text input and a label.

Question #4 in the form is follows the same design as Question #2 having a label, a dropdown and a label.

Set the Items property of the drp_SIR_QuestionValue3 dropdown control to this code.

[Blank(), "Yes", "No"]

The final question #5 has the same elements as Question #1 but it a multi-line text field.

Use this code in the following properties of the txt_SIR_QuestionValue5 text input to change it from single line text to multiple lines of text.

Height: 120
Mode: TextMode.MultiLine

Position The Responsive Form Top And Bottom Gutters

With all of the form input fields added there’s just one thing left to do. We want to gutters appear at the top and bottom of the responsive form so it does not touch the edges of the screen. Insert a new horizontal container named con_SIR_Header into the con_SIR_Main container.

Use this code in the Height property of con_SIR_Header container.

40

The top gutter should only appear when the screen size is Large or Extra Large. Write this code in the Visible property of the con_SIR_Header container.

App.ActiveScreen.Size>=ScreenSize.Large

Add a new horizontal container named con_SIR_Footer into the con_SIR_Main container.

Use this code in the Height property of con_SIR_Footer container.

40

The bottom gutter should only appear when the screen size is Large or Extra Large. Write this code in the Visible property of the con_SIR_Header container.

App.ActiveScreen.Size>=ScreenSize.Large

Test The Power Apps Responsive Form

Preview the responsive form to test it out. When the screen width expands and shrinks the form should change its size like this.

The form should also float on top of the background and scroll like this.

Questions?

If you have any questions or feedback about How To Build Responsive Power Apps Forms From Scratch please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.