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 FormIntroduction: 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: constructionsImagePosition: ImagePosition.FillAdd 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.HeightWidth: App.WidthX: 0Y: 0Set 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.WhiteHeight: 1000Set 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: 120Set 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: 20Text: "Safety Incident Report"Use this code in the following properties of the bottom label.
Font: Font.'Segoe UI'Size: 14Text: "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.WhiteHeight: 1000Set 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+40We 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.HeightAdd 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.StretchFont: Font.'Segoe UI'Height: 60PaddingTop: 20PaddingBottom: 5Size: 12Text: "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.StretchFont: Font.'Segoe UI'Height: 40Size: 12Then use this code in lbl_SIR_Spacer1.
AlignInContainer: AlignInContainer.StretchHeight: 40Insert 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: 40PaddingTop: 20PaddingBottom: 5Size: 12Text: "2. Date Of Incident"Write this code in the following properties of the text input txt_SIR_QuestionValue2.
AlignInContainer: AlignInContainer.LeftFont: Font.'Segoe UI'Height: 40Size: 12Width: 300Then use this code in lbl_SIR_Spacer2.
AlignInContainer.StretchHeight: 40Add 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: 120Mode: TextMode.MultiLinePosition 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.
40The 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.LargeAdd 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.
40The 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.LargeTest 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.
Did You Enjoy This Article? 😺
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
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.
