Modern PowerApps Screen/UI Design- Beginner to Advanced

This is an In-Depth Crash Course Video on how to create Modern Screens and UIs in PowerApps.
You will learn how to create Custom Header Components, PowerApps Menu Bars, Custom Powerapps buttons, custom powerapps galleries, custom powerapps search bars, powerapps drop shadows and more.
Follow me on LinkedIn: / victorsanwoolu
Video ID: #PP_0006
📥 App and Dataset Download for Members (on KZbin or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For KZbin Members: Check the membership tab on the channel page for the download links.
For Patreon Members: Download links will be available on the Patreon Page
🎁Not a member yet. Join the Tolu Victor Community:
KZbin- / @toluvictor
Patreon- / toluvictor
Chapters
0:00 Intro
1:25 App Colors Setup
1:53 Theme Selection
2:44 Adding Images
3:22 SVG Management
5:35 Updated SVG Management
6:38 Layout
7:34 Custom Header Component
14:47 Custom Buttons
17:09 Horizontal Transparent Galleries
28:33 Stacking Galleries
33:09 Menu Bar Component
43:49 Other Pages
45:38 Custom Search Bar
50:46 Outro
#powerapps #gallery #crashcourse #canvasapps

[@iangrant3615]

Thanks so much for posting these step-by-step videos. They are very helpful. I look forward to more!

[@debajdu]

Nice video. Never thought a power apps video can be so entertaining and at the same insightful. Keep the great work coming.

[@stelianrusu9881]

Your tutorials are great! Thanks for making them!

[@kuldeepkhare3053]

This is out of the world. You're a true PowerApps Legend.

[@ashtonquincey7858]

Heck yeah! this looks so awesome!

[@reynaldikarundeng974]

Hi! Really appreciate the video! shoutout for your big effort. Nice editing, effect, and material so clean Hope you grow fast!

[@ABDOUDIALLO-gx9um]

Thank you so much for sharing your knowledge. This is Great !!!

[@MyBarylka]

Looks very nice! Many useful tips - thank you!

[@isaacbrehane2884]

I'm truly amazed by your incredible talent and dedication. Your work is outstanding, but I'd appreciate it if you could slow down a bit; sometimes, it's challenging to follow. I hope your next video will be even better. Thank you very much for creating such amazing content!

[@ErnestoBalanzar]

This is a very high level video, great job!

[@dyoureDONE]

Thanks for this wonderful tutorial. It's a really great help for us aspiring Power Apps Developer.

[@gslvqz8812]

Excellent UI Design Tutorial. Thank you for sharing!

[@dharmendars8483]

Wow, this is awesome....looking forward for more content.

[@hecksongomes462]

You are legendary! Excellent teaching

[@mikehorner5811]

Excellent video! Factual, educational, and entertaining... Bravo!

[@toluvictor]

Thanks for the kind words

[@israellezama6890]

Wuoo excelente contenido, es sorprendente!!! Muchas gracias por compartir este contenido 👏👏

[@CuriousJo1122]

I love it! Thank you.

[@schattedaenker]

Directly followed your account, very well done. Looking forward for more

[@rajeshjurukuntla7165]

this is really fantastic bro. This is one of the best power app tutorials i have ever watched...It will be helpful for me if you do a full-length app development for a responsive app. Thanks a lot..Keep the great infotainment app development work going...want more tutorials like this bro ... with love raj

[@Bamwich]

This is great! You're a legend! My biggest challenge is adapting it to be a dynamic resolution app. Not a fan of static sized containers.

[@dirknmeerkotter9854]

Very cool! Thank you. I enjoyed this video a lot!

[@toluvictor]

🙂

[@jadha_ravi]

Great Tips And Trick Share Thank you So Much

[@ralphlagos4210]

I learned so much! Amazing teaching style

[@toluvictor]

👊

[@jamsoy07]

this is magnificent! thank you

[@toluvictor]

😁

[@nickt166]

Entertaining and informative video! Rare in this space. Thanks for the content!

[@toluvictor]

Thanks

[@TengriTunes]

NICEEEEEEEEEEEEEEEEEE! DONT STOP

[@BhoopeshSharma]

This is awesome! I never thought that PowerApps app could be designed so beautifully. You are PowerApps God 😎 Keep it up!

[@toluvictor]

Thanks a lot 😊

[@Evolvingways]

Amazing and absolutely brilliant,I’m taking a cue from you to build dynamic UI powerspps❤

[@toluvictor]

Best of luck👍

[@seshadrir85]

you are goooooooooooood at this brother...

[@trollking99]

Thank u for showing us de way.

[@SimmsLive]

This is brilliant 👏🏿 👌🏿

[@andreash6163]

its so beautiful. im gonna try this one out

[@toluvictor]

Thanks 😇. Enjoy!!

[@kingstat1]

Real Work great

[@Linkudoo]

Hello, I am from Brazil and I recently started working in an internship and I develop with PowerApps, your tutorials have helped me a lot, thank you!

[@toluvictor]

Great to hear that

[@kake7627]

very beautiful, very nice😆

[@oluwadolapobifarin105]

Nice one. Senior man!

[@hesatrap7739]

So impressed with your criativity. Keep it up

[@toluvictor]

Thanks

[@bellcore1]

This is awesome

[@toluvictor]

😁

[@sultanSurya]

Awesome design. Great effort. Can you explain more about containers in a video? when to use horizontal, vertical and nonresponsive containers.

[@toluvictor]

Alright I'll consider it in a future video

[@gabrielosaji8920]

wow wow .. thank u

[@olydamy2546]

Well done

[@akitup]

love your tutorials Tolu, very detailed 🫡

[@toluvictor]

Thanks so much 😊

[@JluispazJ]

This video it's the best. ¡Thanks!

[@toluvictor]

😁

[@denisskorikov6234]

Respect!

[@General_halap]

Weldone chief

[@youngdataio]

haha love your content man !

[@toluvictor]

😅 Thanks

[@Sameer-oy1bd]

haha...I love 51:31 ... you nailed it...😂😂😂

[@grimmersnee]

great tips

[@toluvictor]

Thanks

[@binhfboong]

thank for sharing

[@toluvictor]

Thanks for watching

[@abdullahkamal6502]

you are the best

[@samuelumeofia9125]

Great 👍

[@toluvictor]

Thank you 👍

[@TechChaitu]

Hi Tolu, Great Video! How you got the rounded corners for the label at 21:30

[@toluvictor]

I applied the border radius to its parent container, so everything within it will be rounded

[@valentinanunez8192]

Hi, your videos are amazing!! Can you please upload the dataset used in this video, please!

[@user-ck8xx1yc7s]

thank you so much

[@toluvictor]

You're welcome!

[@lolosan7522]

Great video; thank you for sharing; Now i know the secret of containers .

[@toluvictor]

Lol. Glad it was helpful!

[@dipteshbose]

Genius....🎉

[@toluvictor]

😇

[@jasonjacome5963]

I just saw you amazing post on Linkedin is a pleasure to follow and learn from you

[@ishwaryadoss1421]

You are awesome! Btw I'm curious to know how you are learning all this!!! This is soo new

[@toluvictor]

Thanks Mostly by trial and error sadly 😅

[@abdullahkamal6502]

keep forward

[@oluwapelumiabimbola9024]

Really sensational🔥

[@toluvictor]

💪💪

[@jdriele]

4:25 I used to store icon svg text in a SharePoint list readable by all the company.

[@iamluann_]

The videos and content are undeniably impressive, yet they present a significant challenge for beginners like myself to follow and learn from. While the quality of the content is exceptional, it seems geared towards more experienced individuals. I sincerely hope that you consider making your videos more beginner-friendly. Alternatively, creating a dedicated video tailored specifically for beginners would greatly enhance accessibility and understanding. Despite my efforts to engage with your content, I find myself struggling to keep up. Thank you, for your attention to this matter.

[@toluvictor]

Hi Lawrence. looking back, I indeed noticed I was really fast paced in my earlier videos making it difficult for complete beginners. In my recent and upcoming videos, I tried to make them slower paced to help all expertise levels. I also plan to revisit some of my earlier topics and recreate them as slow-paced videos for complete beginners, but that would be in the future.

[@aj4354]

@@toluvictor Reza Dorrani is a great example of how slowly he talks in order to ensure watchers understand the material and his videos aren't that long either. Also not talking ahead too fast while moving to the next action. I had to pause multiple times because as soon as you were completing a thought you moved quickly to the next task. I will say your design is better than his. I just think you're really close to make a perfect video.

[@daniyalzahid8997]

can you also provide the data sets to which you are applying these controls too?

[@thatshitcray]

Great vid. You put the big names to shame with this and won my sub. Would it be possible to expand a single item from a list (0:18) to card view like in the gallery?

[@toluvictor]

Thanks If you're talking about a collapsible gallery, it is possible if you use the flexible height gallery

[@thatshitcray]

@@toluvictor Thank you sir.

[@aditiarora45]

Hi great video Can you create a video on how to export data in gallery in CSV format in power app

[@toluvictor]

I'll consider implementing it into one of my future videos👍

[@0001destroyer]

Could you explain the process you used to implement the spinner icon during a screen transition?

[@toluvictor]

It is automatic. It mostly happens when data is taking a while to load in galleries

[@bgigliotx]

Stunning. Great job!

[@toluvictor]

Thanks

[@esdrasmarques]

Hey, Victor! Thanks again for this great video! Just a suggestion: You speak a little bit quickly and often the video frame is ahead of what you say, which makes it difficult for those who are watching and trying to follow along with the video. Try to improve at this pont if its possible! Thanks for all!

[@toluvictor]

Thanks for the tip

[@hiteshkumar797]

Hey great video Victor

[@toluvictor]

😅😅 I was just joking. That was a component I built. Follow along in the video to see how I built it

[@reganli4371]

Do you find longer loading time in the app if you have too many (10-20) SVGs on a page? Also, would it require an internet connection when using SVG images?

[@toluvictor]

I haven't really done any load testing. But svgs are just like any other media, if there are too many of them, I assume it will take a while to render. As for the second question. SVG should render for both online powerapps and offline powerapps

[@Proxcss]

Once again an amazing video. With well made explanation. But be carefull with the word "Next" you use it alot! So maybe use some alternative words to mix it up.

[@toluvictor]

Thanks for the tip.❤️

[@chayakornsureekamonchai5006]

When I use in mobile, in the first screen I've click of this menu bar then it disappear. Only see this menu bar in the first screen. Please help😭

[@PrathameshArolkar]

How is the currentselection for menu bar indicator changing for you? Shouldn't it be a dynamic value?

[@PrathameshArolkar]

LookUp(customNavigation,PageNavigation=App.ActiveScreen,MenuID) -> I used this to make the menu bar selection indictor dynamic as per selected icon.

[@toluvictor]

Thats great

[@jeanpierreragequit1726]

24:09 U don"t need the EncodeURL function at this stage ?? This is a great tutorial as a great svg user in PowerApps ( editing them only with Notapad ^^ )

[@toluvictor]

I used EncodeURL, you can also check the Gallery Designs video for the full details

[@nicowallace1282]

Hi Tolu, how would you set onselect properties of each individual button in the Menubar?

[@toluvictor]

It depends. If the button would be for navigation alone, I would set the navigation value in the gallery data source, and then use the navigate function and that value to make each button navigate to the designated screen. Check out my side menu video here, i did something similar. kzbin.info/www/bejne/aHyVhYd7ltyShJYsi=BDKUsxLZRJPQ8UXl&t=694 If I want to run custom behavior code, I would go through another process, I've explained that in another video. Check it out here kzbin.info/www/bejne/f6vPXn6Kq5p2fqssi=lZVwFzrLzUDKxmRG&t=866

[@NicoWallace-et7yl]

Ah great! Im mpre interested in the second link you provided as I have two buttons I want to add to the memu bar, "Create New" amd " business card Scanner". Will follow the links and let you know how it turns out! Thanks heaps and keep up the great content

[@toluvictor]

Happy I could be of help

[@SimeonEducational]

Mr. SIr, Where can I get the Product Catalogue table sir?

[@toluvictor]

Hello. This is available to all channel members

[@edrainiery]

Where I can get the database that you used in this video?

[@toluvictor]

This is available to channel members, please check the membership tab on my channel page

[@user-zh2vd5il6x]

What do I do to get the input "customIcons" recognized?

[@toluvictor]

Please watch the chapter on SVG management

[@danieliberi]

maybe i’ll learn powerapps too haha

[@toluvictor]

Lol. Oya now

[@bestnocture]

Came for the UI, stayed for the memes :D

[@toluvictor]

😂😂fair enough

[@rajeshjurukuntla7165]

hi Tolu the data model is not explained in this video how to know it and with out knowing data model i can't code the fx formulas

[@toluvictor]

I actually recorded it, but it didn't make it to the final video cut because I wanted the video to focus more on the UI than the actual data

[@banihas22]

@@toluvictor would be great to see this part as well to complete the series for this app! Thanks in advance.

[@user-yy7sm1pe6i]

Hello!! The formula doesn't work for me: "data:image/svg+xml;ut8, "& EncodeUrl( LookUp(customIcons,IconName = "NextIcon").IconData ) my sales mistake: (customIcons, Help me Please

[@toluvictor]

Hi, As far as syntax goes, this is correct but since I don't have full context of your app, I can't really pinpoint where your error is. Just make sure you check that your customIcons collections are initialized with the correct name and correct colum names (check if there are no typos)

[@ishwaryadoss1421]

It isn't working for me when i used substitute to change the color! Couldn't find the error.."data:image/svg+xml;utf8," & EncodeUrl( substitute( LookUp(customIcons, IconName = "InfoCircle").IconData, "currentColor", "White" ) )

[@JimmyNguyen368]

Could u share this app in video

[@toluvictor]

All apps from my videos are now available to channel members. Search the Membership or Community tab for the solution download links.

[@amirtwoprince9756]

Hi Tolu, is it possible for you to share this app to us? I really learn a lot from you, but sometimes there are things that I cannot understand. I hope you can share the app to us. So we can see what you did in there..

[@toluvictor]

All apps from my videos are now available to channel members. Search the Membership or Community tab for the solution download links.

[@mervyndeanhilary2831]

Sound like a rapper, i have to listen like im memorizing eminems song

[@toluvictor]

🤣🤣🤣. I'll try to slow down in my subsequent videos

[@modupeola4988]

That SuperCool Menu Bar joke was not very nice 😂😂😂, you got me wondering why my app didn't have it. Not Cool Tolu

[@toluvictor]

🤣🤣🤣 I'm sorry

[@Ashif_Saifi]

Just tell me the screen recorder name 😂😂😂😂

[@itxhamza5543]

Absolutely not The Great Leader Imran Khan 🥰🥰🥰🥰

[@Coastalgafiretrn]

Great job just wearing out my pause button😅

[@toluvictor]

😅 Sorry.

[@786gnafis]