Designing Real-world Responsive Apps In Power Apps - Part 1

Welcome to part 1 of our exciting multi-part step by step tutorial series on building a custom Task and Announcement notification and tracking app leveraging responsive app design. This beginner to advanced video will cover step by step how to create a fully responsive (mobile friendly) app! We will go over responsive screen layouts, SVG graphics, dynamic color handling, dynamic text size, SharePoint data sources, dynamic administration, custom filtering by user location, and finally sending notifications with Power Automate.
Whether you're a seasoned Power Platform developer or just getting started, this step-by-step guide will empower you to create stunning and functional apps that adapt to various devices and screen sizes.
📱 In this tutorial, we'll cover:
⭐ The fundamentals of responsive design and its vital role in modern app development.
⭐ Real-world examples showcasing how responsive apps elevate user experience.
⭐ A comprehensive walkthrough of building a dynamic app from the ground up using Power Apps.
⭐ Delegation Handling
⭐ Dynamic SVGs
⭐Techniques for designing and optimizing your app's layout, elements, and interactions.
⭐ Pro tips to ensure your app looks and performs flawlessly across smartphones, tablets, and desktops.
🔗 Ready to take your Power Apps skills to the next level? Don't miss this tutorial! Hit the Like button if you find this video helpful and consider subscribing for more in-depth tutorials on Power Apps, app development, and other exciting tech topics.
🎬 Table of Contents
00:00 Intro
01:53 Real World Use Case and App Demo
02:25 Settings to Make a Canvas App Responsive
03:48 Setting Dynamic Colors Using App OnStart
04:40 Creating a Color Palette Using ColorSpace
06:29 Overview of Responsive Containers Behavior
06:59 Creating Responsive Header Elements
12:18 Setting the Dynamic Visible Properties for Header Elements
13:06 Responsive Layout Settings
15:06 Dynamic Text, Text Size and Text Color from ScreenSize and Time of Day
17:45 Review of Dynamic Menu Structure
19:08 Creation of Dynamic Menu with Buttons and SVGs
20:51 Overview of SVGs Use Cases and Handling within Power Apps
23:34 Creating and Using SVGs within Collections
26:37 Container Behavior vs Responsive Container Behavior
27:34 Creation of Stacked Dynamic Menu
27:55 Connecting SharePoint Datasource
28:55 Delegation Discussion
31:09 Dynamic Width of Controls vs. Width of their parent container
☕ Buy Me a Coffee - www.buymeacoffee.com/stephDR
🎈 Connect with me - / stephanie-marshall-95b...
👩‍💻 Code Snippets - In Comments
#PowerApps #ResponsiveDesign #ResponsiveApps #ResponsivePowerApps #PowerApps #AppDevelopment #ResponsiveDesign #TechTutorial #SharePoint #powerplatform

[@StephMarshall]

🎨ColorSpace - mycolor.space Microsoft Article - Create responsive layouts in canvas apps - learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout#adapting-layout-for-device-size-and-orientation Font Size - Switch(HomeScreen.Size ,ScreenSize.Small,20,ScreenSize.Medium,24,28) Welcome Text Code - If(Text(Now(),"am/pm")= "AM", "Good Morning " & First(Split(User().FullName," ").Value).Value, "Good Afternoon " & First(Split(User().FullName," ").Value).Value)&"!" Power App SVG Code - "data:image/svg+xml;utf8, "&EncodeUrl(" ") SVG Code with Collection - "data:image/svg+xml;utf8, "&EncodeUrl( Substitute( LookUp(colCustomIcons,IconName = "Dashboard").IconData, "currentColor", GrayColorText ) )

[@boyan9600]

The SVG trick is very helpful. Thanks!

[@StephMarshall]

Glad it was helpful!

[@vijaijs]

Hi Steph, thank you so much for creating these videos on Power Apps responsive design. Your explanations are clear and concise, making it easy for viewers to understand the concepts and apply them in their own projects. The examples you provide are also very helpful in demonstrating how to implement responsive design effectively. Keep up the great work! 👍

[@mikedsjr]

I really appreciate the effort you put into this. There are many people i watch and everyone has there different twist to teaching. I really like how did this and for me, it helped me with a few things. I'm still trying to wrap my head around containers but this helped give me ideas.

[@dianaroald5881]

Very informative and nicely structured. Looking forward to Part 2.

[@StephMarshall]

Awesome, thank you!

[@japert00]

Liked immediately for the cat cleaning itself

[@StephMarshall]

Love it!

[@shareqkhan7319]

Good video

[@StephMarshall]

Thanks

[@Davo64207]

Best design ever seen in powerapps

[@StephMarshall]

Thank you! 💗

[@jray1429]

So far, this is awesome, thanks for the work and clear explanation. Great job! One the hardest problems I’m having is using galleries in containers. It seems to not want to scroll.

[@StephMarshall]

It is really tricky and can be hard, just keep trying different configurations!

[@muthukumaran9541]

Wonderful walk-through. This is the one i was looking for. 👍 Providing the links to the websites/tools you use is extremely appreciate.

[@StephMarshall]

Glad it was helpful!

[@GustavoSilva-vx2os]

Hi Steph! Greattings from Brazil! I´m learning a lot with your videos. Thanks for sharing! You´re amazing!

[@StephMarshall]

You're so welcome! Thank you ♥

[@MedariKeshava]

Thanks for this video, hardest part in power apps is building responsive app design for both tablet and phone form. Can you please continue this series and new ideas in power apps

[@StephMarshall]

I will soon!

[@ellimalasan6145]

Looking forward for more tutorial. I love it now im looking forward for more

[@StephMarshall]

Part 2 is out there, if you have any questions let me know!

[@thatsweetfriend]

I am glad I found your youtube channel..very informative...

[@StephMarshall]

So nice of you

[@General_halap]

Awesome content! Where have you been hiding?😂 I'll be sharing this video/channel on Nigeria power platform group 🙏

[@StephMarshall]

Thank you so much@

[@sharepointdeveloper602]

Very useful video and help us to create responsive design

[@StephMarshall]

Glad it was helpful! 😻

[@OptimalTrainingGroup]

EXCELLENT!!

[@StephMarshall]

Thank you so much! I'm glad you enjoyed it!

[@lijunchen]

Thanks, Steph for the wonderful video. I was able to replicate most of what you instructed. But one big snag I met is that when in the vertical orientation of the phone mode, only the first icon (dashboard) is shown because the 2nd and the rest extend out of the screen. This icons container does not seem to respond to the phone orientation. Can you advice what may be the problem?

[@ashokpershad]

Very useful video and help us to create responsive design but could you please keep your photo in video part of smaller size because its taking too much of real estate of video. Our main point of watching video is to learn powerapps. Hope you understand. Thanks

[@StephMarshall]

Noted

[@codeaffection10]

i love your cat ,, me too having a cat.. 😍🤩😘☺

[@zulnordin8041]

Subscribed after just seeing this video for less than a minute. Most probably your cat convinced me.😂

[@StephMarshall]

Super-Floof is very convincing!

[@kingquadri1850]

Awesome

[@StephMarshall]

Thank you!

[@aderibigbeadeyinka7136]

Nice content. please can you do a video on how to make langing page for an app in power apps responsive?

[@StephMarshall]

That sounds like a great idea!!

[@silumkomagwa389]

Hi Steph, I really love how you code. It is so Brilliant. I would like to learn as much as I can from you. Tell me do you have a Mentorship program? Please tell me you do. Thanks

[@StephMarshall]

Not yet!

[@lot5953]

Hi I have a question. Is there an option in PowerApps where we can disable PowerApps from executing our code statement during the design mode, not the preview mode? Because during the designing, my button disappears and that is because I write a statement to make it visible or hide if logic is met, and it executes correctly during the preview mode, but during the designing mode, I would like to see the button to give me better visibility of the layout. Otherwise I will have to comment out the logic statement so is there an option?

[@StephMarshall]

Not that I'm aware of, I usually make them visible but make a note to re-do the code prior to go live. A crazy color on the item can help remind you! Happy coding :-)

[@lot5953]

@@StephMarshall oh I see. I guess there is no option. Thank you for replying back to let me know. I appreciate that. It's also good that you're using the same approach to re-do the code before go live. Happy coding 😁

[@venukolar7999]

Hi madam, I am not getting containers alined like how you are doing, it's getting overlapping even though how many times I tried, please suggest any alternative to overcome this issue. Looking forward to your reply.

[@StephMarshall]

Where are you getting stuck?

[@basehumax]

Still no update?

[@StephMarshall]

I'm back at my video recording...stay tuned!

[@MarieCastine]

Why wouldn't you put all this in 1 variable? We use a lot of theme items and just found it easier to make it 1 variable with subitems. Easier to troubleshoot and maintain. Set( colThemes, { PrimaryTitle: Font.'Open Sans', PrimaryTitleSize: 16, PrimaryTitleWeightBold: FontWeight.Semibold, PrimaryColor: RGBA(1,46,103,1), PrimaryColorText: RGBA(51,51,51,1), SecondardTitle: Font.'Open Sans', SecondardTitleSize: 11, SecondardTitleWeight: FontWeight.Normal, SecondardColor: RGBA(245,121,107,1) } );

[@wesDEVS]

This can all be set in the App.Formulas property now. No need to run OnStart anymore.

[@77ryan0341]

@@wesDEVS Is there a requirement when testing to "activate" this or should the formulas autoload?