Overview:
This blog provides a step-by-step guide to building responsive Power Apps forms from scratch. By following these simple instructions, readers will be equipped to create aesthetically appealing and efficient forms for various needs.
1. Create a New Canvas App
2. Change App settings to enable Responsiveness
Turn off those two features “Scale to fit”, “Lock aspect ratio”
3. Add vertical container into the screen
Reference: Vertical container control in Power Apps
from the tree view select the container and change update the following properties :
Width= Parent.Width
Height= Parent.Height
X=0
Y=0
LayoutJustifyContent = LayoutJustifyContent. SpaceBetween
LayoutAlignItems = LayoutAlignItems.Center
LayoutOverflowY= LayoutOverflow.Scroll
Fill= RGBA(186, 202, 226, 1)
4. Inside that container add another vertical container and change the following details:
Width= Max(Parent.Width*0.4,320)
Height = Max(Parent.Height*0.4,650)
Fill= RGBA(255, 255, 255, 1)
DropShadow= DropShadow.ExtraBold
LayoutAlignItems= LayoutAlignItems.Center
5. Insert a label inside that container2 for header :
Text= "Registration Form"
FontWeight= FontWeight.Bold
Width= Parent.Width
Height= 50
Size= 20
Align= Align.Center
Color= RGBA(255, 255, 255, 1)
Fill= RGBA(56, 96, 178, 1)
AutoHeight= false
VerticalAlign= VerticalAlign.Bottom
6. Add another label for 1st question inside container2 with following properties :
Text= "Name"
FontWeight= FontWeight. Semibold
Width= Parent.Width*0.85
Size= 15
Heigt= 60
7. Add text input for first question with following properties :
Default= ""
HintText= "Name"
8. Now our form with 1st question is created for remaining questions just copy paste the same label and textinput and change the text values (height of next labels will be 50 and all other details will be same) :
9.Now lets add the last element (the submit button) insert vertical container in container2 and change the following properties :
LayoutJustifyContent= LayoutJustifyContent.Center
DropShadow= DropShadow.None
10.Then after adding container3 add a button inside container3 and change the following properties :
AlignInContainer= AlignInContainer.Center
Text= "Submit"
11.Our Form Is Ready :
Conclusion:
Building responsive forms in Power Apps can seem challenging, but with the right approach and guidelines, it becomes a straightforward task. By leveraging the power of containers, properties, and design elements, one can craft user-friendly and visually appealing forms for any application.
