Responsive Screen with Gallery & Filters

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.

https://www.crmonce.com/how-to-set-up-website-in-power-pages/

And delete the footer part.

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.

Onselect—Set(Showpanel,!Showpanel)