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

Welcome to part 2 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:
⭐ Exploring the significance of responsive galleries in modern app design.
⭐ In-depth walkthroughs on creating and customizing responsive galleries.
⭐ Crafting a user-centric experience across smartphones, tablets, and desktops.
⭐ Elevating your app's visual appeal with SVG graphics and design elements.
🔗 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 Introduction
01:28 Creating Responsive Containers
02:21 Planning Responsive Container Layout
03:03 Creating Responsive Galleries
04:31 Gallery Best Practices
05:17 Gallery Components and Discussion of Best Practices
09:32 Non Responsive Containers within Responsive Containers
12:36 Final App Layout Review for Responsive Layout Planning
13:13 SVG Overview
14:28 How to Create an SVG Collection
14:52 Using SVGs in a Responsive App
17:16 Creating Responsive Elements within the Gallery
☕ 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

[@cedartree816]

Agree with the commenter below who said this is some of the best explanations I have seen for responsive powerApps. A lot of the vids just build it without explaining the why which makes it really difficult to apply to another custom app. Anxiously awaiting the rest in this series!

[@freckles527]

I stumbled on your Videos searching for Responsive Designed Power Apps. I agree with everyone your explanations are some of the best I have seen so please publish more. Especially on how to make your ContainerDashboard Responsive. I have done this section a few times and still struggling with containers within containers being responsive based on the device type. This would be a great stand-alone video showing horizontal/vertical dashboards/menus - responsive. THANK YOU!

[@lijunchen]

Yet another great video. There is a lot of useful contents with detailed instructions. This is a full-blown app which requires a lot of advanced skills to accomplish. I really appreciate the efforts Steph put in this video. Look forward to the next part.

[@StephMarshall]

Glad you enjoyed it!

[@MrJaviercillo0]

Hello Pleaseeee, the other videos of this serie... please! I've learned a lot from these couple of videos. Please please... Your couple of videos of this serie are awesome!!

[@StephMarshall]

I'm working on it . . . promise!

[@TheSikedSicronic]

Finally someone who made an app that looks modern 😎😎, thank your for making this !!!!

[@StephMarshall]

Glad you like it!

[@romalouis1]

Hi Steph, I was looking forward to the next part of this series only to find that there’s only 2 videos. When will you post the rest. I understand the importance of views in order to determine your strategy going forward but having watched other videos I believe that this series will definitely grow. I have watched many such videos and believe that u have the best content out there. Keep up the great work👏

[@StephMarshall]

I'm working on it....

[@fam.giannakisflores7780]

Hi, same here, the best explanation of how to do it, you are creating good stuff, dont be sad,, in a year o so with this material you will have a lot os people coming in, don get deseaparete, well sorry foy mi english, pls finish what you start, a quick spoiler form a field of dreams movie, finish and they will come!!! a great movie

[@simonball5602]

Great content - thank you.

[@StephMarshall]

Glad you enjoyed it!

[@jray1429]

You did a great job again!

[@StephMarshall]

Oh thank you!

[@Roman2501S]

Great!

[@StephMarshall]

Thank you!

[@emreylmaz2806]

i cant wait next parts these videos are awesome 🕶🕶🕶🕶🕶

[@StephMarshall]

Glad you like them!

[@nickfaulkner6161]

When do you think the other parts of this series are going to come out? This has been very helpful for me. I like to see how other people design their apps.

[@wilconagtzaam587]

same question from me, this is gold!

[@StephMarshall]

Really? The views on this one were so low I didn't think anyone wanted more along these lines?

[@justanormalguy2359]

@@StephMarshallwe need more 😢

[@wilconagtzaam587]

@@StephMarshall You only have 526 subscribers, I think that explains a bit the low count of views I guess. I 100% like your content, but I understand when you do not want to put in the effort when there are so few views.

[@ellimalasan6145]

I am also waiting for the next part of this. I hope you continue the tutorial on this topic. Thanks

[@sachinsrivastava9147]

great work , when we can expect next part please

[@StephMarshall]

Coming

[@lijunchen]

Hi Steph. I cannot see what you did to activate the right arrow for more than 3 announcements. What actions can we apply on the arrowright SVG to achieve that?

[@StephMarshall]

I use a count on the amount of items in the gallery! CountRows(colOpenAlerts)>3

[@abdipowerappsguru1053]

Hi when we expecting next part please

[@StephMarshall]

I'm working on it!