Power Apps Responsive Design

Do you want to build your Power Apps app to be responsive so that it works on mobile phones, iPad tablets, and desktop browsers? Then this is your video. In this video we kick off a deep dive into all things responsive design by showing you a full working app and a couple of testing techniques.

With the demo done, we then set out to build the exact app starting from scratch. We start with a mobile Power Apps app, adjust the scale to fit settings, and then start adding containers and controls.

0:00 It Starts
1:38 Demo
3:28 HideNavBar=true
8:26 Start building a responsive Power Apps app from a blank screen by choosing from Tablet or Phone
10:21 Configure the app Display Settings by turning off Scale to fit and discuss Lock orientation
11:22 Add a Layout Vertical Container for the whole screen + discussion of MinScreenWidth and MinScreenHeight
14:38 Change the Align in Container setting to change the default alignment
16:50 Add a Layout Horizontal Container at the bottom of the screen to spread out some controls in a single row
17:45 Discussion on Width of Controls vs. Width of their parent container. Align in Container Stretch and Minimum Width
19:45 Flexible Width in PowerApps
26:28 Explain the issue caused by to large of a Minimum Height

#PowerApps #ResponsiveDesign #ResponsiveApps #ResponsivePowerApps

[angrybatvoice]

Shane, would you say you do a lot of responsive apps as part of your day-to-day or are they more of a special/as-requested type of thing?

[MichaelDeBlasis]

Thanks again Shane! Can you recommend a good book or fairly inexpensive course to refine my skills some more? I can't seem to get enough of this stuff. What's a good learning path? I'm fairly new to app dev but I have some python and html exp as well as 15 years in IT Networking. I'm hoping to switch fields or to hybrid dev with sharepoint, power apps, and standard IT admin by summer time. TIA!

[NarnawareSunil]

Awesome Shane. The Debug Mode Trick is Killer One. Really Liked It. Learnt Something New. 🤟. Is there a way to actually check the app version instead of putting V1/V2? That would be welcome way to check if user is on accurate app version?

[BeateRothel]

Hi Shane, greetings from Germany :) Very good and informative video. Too bad I didn't find it until after I had created an app. Unfortunately, it doesn't adjust in size. So, my questions is: Can you add containers to a finished app to make dynamic sizing possible?

[tilman]

Hi Shane, thanks for bringing this topic up again. To be honest, I put a lot of hope in it when all this started based on layout containers a year ago or so. Then, trying to implement it consequently in my - relativley complex - apps, I regularly failed to achieve satisfying results. Like, just as an example, when it comes to textboxes with unknown text length, contradictions between flexible height and autoheight etc. Finally, I returned to the - burdensome but at least reliably working - method of relating screen dimensions and x, y, height values of the single elements to each other. May have been my fault or that I had missed something. Anyway, watching this new series with great interest and really curious about what has changed. Thanks for all your work!

[brendanv]

Shane, I have built 4 apps now for customers so I am still very fresh but they all requested it to be responsive on ipads, phones, computers etc. I had to literally hit save and publish and check all items when building them. You have found the game changer for me 3 minutes in! Thank you

[sirishayerramasu]

Hi Shane,
Is there any way or possibility to make components or app responsive when scale to fit is in enable mode?
Thanks in Advance!!

[RanmaSaotome]

Fantastic Video Shane!!!! I have to admit that i've got a bit of PTSD watching it :D last year when they released the containers I've already commented on one of your video because i've played the same way as you :D since than i didn't create any new "responsive app " only the demo one that i use to present this functionality.... is there still the "bug" that if you do too many container - in - containers, starts to rotate elements on it's own? :D

[saradehond]

Shane, do you think MS will make responisiveness easier to achieve? Double quotes is a lot and I would rather then stick to having one modeldriven and one canvas to achieve the same goal.

[sakthiswaryalaganderan]

hi shane can u upload a video for after submit the form it will email the sender the details in the form automatically

[fam.giannakisflores]

Hi shane, there is a part 2 of this video, this one is great!!!!

[calebessilva]

Thanks for the video! amazing explanation

[PowerAppsEdu]

I remember that you said in one of your videos months (or years) ago that you'd not make videos on responsive design because of some of vertical/horizontal containers problems, it wasn't mature yet. So, the question is: how mature is it now? I confess that based on that I ended giving up making responsive apps...

[mwmstals]

Thanks Shane, i have been wrestling with containers and the flexible heights/widths. I also like the debug button. I use kind of the same thing in some of my apps. i.e. An input field that is normally hidden for the user is visible when the User().FullName is my name. This gives me the opportunity to play with different inputs while creating and testing my app. Maybe this is helpful for others as well.

[DutchNorthAtlanticAlliance]

@7:50 you could do edit below show data ;p

[MichaelDeBlasis]

I would love to see another video like this, but using components as well. I'm still a bit fizzy on if this needs to be done when building components or if they just get dropped into the containers we set.

[Gigi-bqpw]

I'm a beginner in Power Apps and I'm struggling with the responsive design, is really more complicated than I thought it would. Thanks for the vid, great content as usual 😊

[AdityaSarkar]

Well explained Shane… I believe most developers are looking for responsive designs nowadays… I prefer using scrollable screens which makes the app more versatile and more space for users… hope you can also try such examples in future

[mikelockheed]

Hi Shane, I think in one of your videos about (local) variables you have made a pop-up to confirm an action to the user. I wonder how such would have to be done with responsive design. For example, a button is at bottom of the screen, I can use the Notify to send a message once the user presses it but my "testers" missed that as their eyes were focused on the bottom of the screen. I try to prevent hitting "Send" multiple times as they missed a kind of confirmation of their action. I could "Navigate" to a completely different screen and back tho ...
Thank you!

[Kris_PC]

Hi Shane, great video!
I don't know if you are taking requests for any video ideas, but I am currently working on a Power Automate that gets fired off every time a new entry form is submitted in my Power App, which is connected to a Dataverse (for Teams Table). The flow connects the the data from the first table (the one that gets entered into from the Power App), and then does some calculations in the flow and then enters it into the second Dataverse (for Teams) table. My question is: how do you efficiently loop through that flow to update the rows that have been entered into the second data table? I can do math the first time by entering in X amount of rows into the second data table, but I am having a hard time understand how to "update" all the rows the second time around. If you can help with this, it would be much appreciated. Thanks, and have a great weekend Shane!