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

[@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 ) )

[@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! 👍

[@Davo64207]

Best design ever seen in powerapps

[@StephMarshall]

Thank you! 💗

[@boyan9600]

The SVG trick is very helpful. Thanks!

[@StephMarshall]

Glad it was helpful!

[@dianaroald5881]

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

[@StephMarshall]

Awesome, 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!

[@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.

[@DavidPhilip-yk2yl]

Really awesome content Steph and Supefloof. I have been trying to get the encoded URL for the icons to work. I typed the code word for word, but I keep getting errors

[@StephMarshall]

Can you post the code you are using and I'll test?

[@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!

[@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

[@shareqkhan7319]

Good video

[@StephMarshall]

Thanks

[@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!

[@zerokhan858]

this prove extremly useful!

[@StephMarshall]

Glad you think so!

[@sharepointdeveloper602]

Very useful video and help us to create responsive design

[@StephMarshall]

Glad it was helpful! 😻

[@JapLomm]

Liked immediately for the cat cleaning itself

[@StephMarshall]

Love it!

[@thatsweetfriend]

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

[@StephMarshall]

So nice of you

[@jamiblenner790]

Loving this so much! I am having trouble on the 2nd containter where the button is either visible or the image is visible. The visibility is working amazing but when I look at it from a mobile view, the container itself is not getting smaller if that makes sense like it does on your video. So I can only see one image when I should see 4.

[@StephMarshall]

Do you mean the main menu buttons at the top? I'm about to do another video in this series shortly so if you can provide the code or more details I can perhaps add it to that.

[@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 ♥

[@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?

[@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@

[@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!

[@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!

[@zulnordin8041]

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

[@StephMarshall]

Super-Floof is very convincing!

[@OptimalTrainingGroup]

EXCELLENT!!

[@StephMarshall]

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

[@kingquadri1850]

Awesome

[@StephMarshall]

Thank you!

[@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 😁

[@codeaffection10]

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

[@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?

[@vito3074]

The 16:03 text = Switch( Language(), "en-US", "Good " & If(Text(Now(), "am/pm") = "am", "Morning", "Afternoon") & " " & First(Split(User().FullName, " ")).Value & "!", "fr-FR", "Bonjour " & First(Split(User().FullName, " ")).Value & "!", "es-ES", "Buenos " & If(Text(Now(), "am/pm") = "am", "Días", "Tardes") & " " & First(Split(User().FullName, " ")).Value & "!", "de-DE", "Guten " & If(Text(Now(), "am/pm") = "am", "Morgen", "Tag") & " " & First(Split(User().FullName, " ")).Value & "!", "it-IT", "Buongiorno " & First(Split(User().FullName, " ")).Value & "!", "zh-CN", "早上好 " & First(Split(User().FullName, " ")).Value & "!", // Simplified Chinese "zh-TW", "早安 " & First(Split(User().FullName, " ")).Value & "!", // Traditional Chinese "Good " & If(Text(Now(), "am/pm") = "am", "Morning", "Afternoon") & " " & First(Split(User().FullName, " ")).Value & "!" // Default fallback for any other language ) ///for 24:56 its now changed to ClearCollect( colCustomIcons, { IconName: "Home", IconData: "your url here to your svg icon in sharepoint library" } );