Responsive Screen:
In this blog, We will See How To Create Responsive Screen With Gallery & Filters- Beginner To Advanced.
Step-1:
Create a New App:
- Open Power Apps.
- Click on “Create” and choose “Canvas app from blank.”
- Select “Tablet” or “Phone” layout based on your requirement. Tablet is generally more flexible for responsiveness.
- I choose Header and Footer screen.
Next add label on header container and rename the label.
Step-2:
Next add Horizontal gallery on body container.
Next add a vertical container on gallery.
Next turn off the flexible width of the gallery and width-300.
Next change the drop shadow to Extrabold.
Next connect gallery to your data source, Now i am connecting to SharePoint(Student Registration) list. 
Next click on pencil icon and add horizontal container in gallery.
Next change the container
- width :parent.width
- Height:Parent.TemplateHeight
- X:0
- Y:0
Next change the template size to 50.
Now change Template padding to 20
Next change the container Drop shadow to regular.
And Next add label’s based on your requirement and change the alignment of the label and on the flexible width the below screen.
Next change the label’s data with your actual field name
Next add a vertical container for filtering purpose.
Next add a vertical container and right click on the container next click on the option “Move to start”.
Next cut the first gallery and paste to the new container.
Next change the font and colors according to your requirement.
Now we create Filter, Firstly add filter icon on header container and change the height and width of the container. and add the below formula on on-select property of filter panel.
Next change the visible property of that container true — Showpanel
Now test the filter it is working or not on play mode of the app.
Remaining part we will see in part-2.
For any Help or Queries Contact us on info@crmonce.com or +91 8096556344
