Master Responsive Power Apps Design in just 1 hour | Complete Beginner Tutorial

This video is the third in my series on PowerApps Containers, Layouts and Responsive Design. In this third video, you will learn everything you need to know about responsive design. We'll also go through a live example where we apply these concepts to make our app responsive.

Video ID: #PP_0020

Table of Contents:
00:00 Intro
01:32 Responsive Design Basics Intro
04:07 Power Apps Engine
05:52 Device Screen Size / Breakpoints
14:11 Responsive Canvas App Code
23:14 Live App Example
25:10 Responsive Menu
37:24 Dashboard
51:30 Task And Inspection Section
1:01:35 Forms

📥 App and Dataset Download for Members (on Youtube or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!

For Patreon Members: Download links will be available on the Patreon Page
For Youtube Members: Check the membership tab on the channel page for the download links.

🎁Not a member yet. Join the Tolu Victor Community:

#powerapps #powerplatform #copilot #moderncontrol #crashcourse #canvasapps #ui/ux #uidesign

[Soulebi]

As usual hats off to the UX UI design guys that makes it possible for us to make power apps as modern as possible! I literally suck designing I wouldn't know what to do without these UX UI creators.

[MrRobvanzutphen]

I've been a Power BI developer for years now and only last week entured into Power Apps development. I really like the way you set up and organize your apps and I have found a great teacher in you! Your videos are amazing; The content, the storytelling, and of course the comedy! A big thumbs up to your hard work. I subscribed and joined! 🎉🎉

[maulikmodha]

Thank you for providing valuable knowledge regarding responsiveness of various components.

[vuxuanhai]

Thanks for your great content. Just one trick for the flexible height of the container: you only need to get the Y Value of the last component, add that item height and the self.bottompadding to get the flexible height of container. There is no need to add all the height of all items.

[sarasdeva]

Love your videos.. you are exceptional

[dpukkz_bbq]

As always… just class! Can’t wait to ruin my current apps trying to make them responsive 😂

[LuisSanchez-fyhe]

Contenido de alto valor muhas gracias saludos desde Perú

[DanMotan]

really love your content and do enjoy the memes :)) you really make life easier . Would you make in the future a video on custom components ?

[AssassinSpy]

Just a quick tip regarding the cutting and losing your app bit, Power Apps has multiple auto-saved (or manually saved) versions stored in your environment, Go to your Apps screen where you see all your made apps, select the three-dots for a particular one and go to "Details" and then select the "Versions" tab, from there you can select any saved version of your app and Restore it.

[JCSent]

Thanks for this.. (this is very responsive even in refrigerator 😅)

[siobhanleese]

I've watched this at least 3 times, and at least 3 of your others another 100 😂 I've learnt a lot, and your content is great! But my containers are still sticky. I have a scrollable content container, which scrolls a tiny bit, but all my child containers (a mix of horizontal and vertical), insist on all squishing together on the page, I just want it to scroll and have the child containers stack like yours at 00:07. Any idea where I'm going wrong? 😭

[loic]

Do you reccomand building an app first for one screen device and then transform/adjust is to all screen sizes or the other way around?

[amru]

Just to understand how you will handle the situation where your users will have different browser zooms ? How will you manage this issue ? As many of containers will not work good in browser with higher zoom percentage like 125 and so on . Please reply

[lauraliliom]

Dear Victor, could you please tell me the RGBA code of this beautiful dark blue color you used for this app and the very light purple color? They go so well together. Thank you so much!

[palm]

What did you use to design this? Is it figma?

[SurajRevankar-ui]

HI i tried to import the dataset and ends up getting error on the excel sheet with

The file could not be uploaded for Hospital Inspections: [UnknownError] Type=Microsoft.Dynamics.Integrator.Exceptions.IntegratorClientException, Msg=Excel file with more than one sheet is currently not supported.

Any idea?

[jagadheeshperam]

How to visible/hide a banner container or gallery when user scrolls down the screen.

[brianmorales]

Excelente, pero vas demasiado rápido xD