Tutorial on "How to build Responsive Power Apps" 07-27-2021 06:17 AM - last edited 09-07-2021 10:17 AM

[RezaDorrani]

This video is a step-by-step beginner’s tutorial for creating Responsive Canvas Power Apps.

The responsive layout containers & screen templates will let us build truly responsive Apps that works across Desktop, Mobile and Tablet experiences.

A responsive Power App is one in which controls in the App can respond to different devices or screen sizes.

Video covers key Microsoft PowerApps responsive UI design principles & concepts:

✅ Horizontal & Vertical Responsive Containers

✅ Container Properties - Stretch, Fill, Flexible width, Flexible height, etc.

✅ Screen Layout Templates

✅ Responsive Dynamic Tabs

✅ Responsive Gallery

✅ Responsive Form Control

✅ Responsive Filter Container Controls

Thanks,
Reza Dorrani, MVP
YouTube
Twitter

watch?v=1o2L0DADzKQ

[bbsin]

Hi @RezaDorrani 

I was following your video but not sure why mine tab and display didn't turn up like yours.  Can you kindly help.  Thank you

On canvas, the tab was not showing all - there are 7 tabs  and original formula

when the change the formula to .. there's a gap and it's not auto sizing nicely?  

The tab all squeeze together there is a big gap on the right side

The gallery also got chop off?

Tab -Wrapcount = 1

Tab -Templatesize = Parent.Height

Where did I do wrong? Can you please help me.  Thank you

if I change wrap count to the formula, it become like that.

[vishalholam007]

@RezaDorrani 

I seen your complete video and try same 4 to 5 times but app not showing responsive is there any version issues of any other setting you made and miss in video.  My current version showing 3.21112.22

Please let us know can we make fully responsive app so we are looking for other customize tool like lightning and nitex

[RezaDorrani]

@vishalholam007 

video description has link to download sample app.

[roryafrancis]

I don't see the link to download the sample app. I am also having problems with the showing the tabs correctly.

[RezaDorrani]

@roryafrancis @vishalholam007 

here is the link

https://github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip

[roryafrancis]

Thanks!