No video :(

Modern PowerApps Screen/UI Design- Beginner to Advanced

Подписаться 12 тыс.

Просмотров 70 тыс.

50% 1

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 RU-vid or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For RU-vid 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:
RU-vid- / @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

Опубликовано:

15 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 160

@isaacbrehane2884 10 месяцев назад

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!

@debajdu Год назад

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

@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

@dyoureDONE 9 месяцев назад

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

@Bamwich 11 месяцев назад

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.

@M4croz 26 дней назад

Bro im really impressed by the quality of your videos, just started learning Power Automate and Power Apps and your channel is really impressive, i really appreciate your work!

@toluvictor 21 день назад

Happy to hear that!

@BhoopeshSharma 6 месяцев назад

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

@toluvictor 6 месяцев назад

Thanks a lot 😊

@kuldeepkhare3053 11 месяцев назад

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

@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

@CalvinWongHKG 25 дней назад

cool bro you make it like a mac apps :D keep it up and thx for sharing!

@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

@ErnestoBalanzar 9 месяцев назад

This is a very high level video, great job!

@stelianrusu9881 9 месяцев назад

Your tutorials are great! Thanks for making them!

@iamluann_ 5 месяцев назад

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 5 месяцев назад

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 4 месяца назад

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

@iangrant3615 Год назад

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

@reynaldikarundeng974 Год назад

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

@MyBarylka 4 месяца назад

Looks very nice! Many useful tips - thank you!

@ishwaryadoss1421 4 месяца назад

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

@toluvictor 4 месяца назад

Thanks Mostly by trial and error sadly 😅

@schattedaenker 9 месяцев назад

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

@nickt166 5 месяцев назад

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

@toluvictor 5 месяцев назад

Thanks

@mikehorner5811 Год назад

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

@toluvictor Год назад

Thanks for the kind words

@hecksongomes462 10 месяцев назад

You are legendary! Excellent teaching

@gslvqz8812 9 месяцев назад

Excellent UI Design Tutorial. Thank you for sharing!

@hesatrap7739 5 месяцев назад

So impressed with your criativity. Keep it up

@toluvictor 5 месяцев назад

Thanks

@Evolvingways Год назад

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

@toluvictor Год назад

Best of luck👍

@dharmendars8483 Год назад

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

@ralphlagos4210 Год назад

I learned so much! Amazing teaching style

@toluvictor Год назад

👊

@ABDOUDIALLO-gx9um Год назад

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

@israellezama6890 Год назад

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

@dirknmeerkotter9854 Год назад

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

@toluvictor Год назад

🙂

@bellcore1 3 месяца назад

This is awesome

@toluvictor 3 месяца назад

😁

@esdrasmarques 7 месяцев назад

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 7 месяцев назад

Thanks for the tip

@brandondent2996 Месяц назад

I really appreciate your videos! Any tips on how I can change the SVG's color if I have uploaded my own svg images directly into power apps?

@toluvictor Месяц назад

Thanks a lot. If you upload the SVG directly as an image, you won't have control over it. But if you upload its data as text, you can manipulate however you see fit. Check my recent mini tutorial video, I show something similar: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0j0SePL60m0.html

@TengriTunes 2 месяца назад

NICEEEEEEEEEEEEEEEEEE! DONT STOP

@andreash6163 7 месяцев назад

its so beautiful. im gonna try this one out

@toluvictor 7 месяцев назад

Thanks 😇. Enjoy!!

@ashtonquincey7858 Год назад

Heck yeah! this looks so awesome!

@Sameer-oy1bd Год назад

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

@trollking99 4 месяца назад

Thank u for showing us de way.

@JluispazJ 7 месяцев назад

This video it's the best. ¡Thanks!

@toluvictor 7 месяцев назад

😁

@seshadrir85 11 месяцев назад

you are goooooooooooood at this brother...

@jadha_ravi Год назад

Great Tips And Trick Share Thank you So Much

@lolosan7522 6 месяцев назад

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

@toluvictor 6 месяцев назад

Lol. Glad it was helpful!

@valentinanunez8192 7 месяцев назад

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

@grimmersnee 8 месяцев назад

great tips

@toluvictor 8 месяцев назад

Thanks

@jamsoy07 Год назад

this is magnificent! thank you

@toluvictor Год назад

😁

@CuriousJo1122 Год назад

I love it! Thank you.

@akitup Год назад

love your tutorials Tolu, very detailed 🫡

@toluvictor Год назад

Thanks so much 😊

@oluwadolapobifarin105 10 месяцев назад

Nice one. Senior man!

@SimmsLive 10 месяцев назад

This is brilliant 👏🏿 👌🏿

@jasonjacome5963 Год назад

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

@kingstat1 3 месяца назад

Real Work great

@kake7627 10 месяцев назад

very beautiful, very nice😆

@Proxcss 11 месяцев назад

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 11 месяцев назад

Thanks for the tip.❤️

@aniketzende753 Месяц назад

Could you please provide the link of backgrond image .. it's really looking awsome

@toluvictor Месяц назад

Hi its been a while so I can lt remember the link But I remember searching "Abstract Flowy Background" on freepik.com

@aniketzende753 Месяц назад

@@toluvictor big thanks for reply tolu, i wanted to know why we use non-responsive containers when we having both verti and hori resp containers and also i know how to use them, could u please elaborate to me only the about non-responsive ?..

@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

@chayakornsureekamonchai5006 3 месяца назад

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😭

@jdriele Год назад

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

@daniyalzahid8997 6 месяцев назад

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

@bgigliotx 6 месяцев назад

Stunning. Great job!

@toluvictor 6 месяцев назад

Thanks

@olydamy2546 Год назад

Well done

@PrathameshArolkar 2 месяца назад

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

@PrathameshArolkar 2 месяца назад

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

@toluvictor Месяц назад

Thats great

@samuelumeofia9125 11 месяцев назад

Great 👍

@toluvictor 11 месяцев назад

Thank you 👍

@gabrielosaji8920 Год назад

wow wow .. thank u

@FDSuppliesEnterprises 28 дней назад

i feel it amazing, however when i try to follow, its too fast. cant capture on the minutes 17. ;(

@toluvictor 21 день назад

😅 Sorry about that. I've slowed down in my recent videos

@nicowallace1282 7 месяцев назад

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

@toluvictor 7 месяцев назад

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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2K2TTEaw_N4.htmlsi=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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Izl-KTv5CHI.htmlsi=lZVwFzrLzUDKxmRG&t=866

@NicoWallace-et7yl 7 месяцев назад

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 7 месяцев назад

Happy I could be of help

@youngdataio Год назад

haha love your content man !

@toluvictor Год назад

😅 Thanks

@General_halap Год назад

Weldone chief

@abdullahkamal6502 11 месяцев назад

you are the best

@binhfboong Год назад

thank for sharing

@toluvictor Год назад

Thanks for watching

@abdullahkamal6502 11 месяцев назад

keep forward

@SimeonEducational 4 месяца назад

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

@toluvictor 4 месяца назад

Hello. This is available to all channel members

@dipteshbose Год назад

Genius....🎉

@toluvictor Год назад

😇

@user-ck8xx1yc7s 11 месяцев назад

thank you so much

@toluvictor 11 месяцев назад

You're welcome!

@0001destroyer 10 месяцев назад

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

@toluvictor 8 месяцев назад

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

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

@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

@denisskorikov6234 10 месяцев назад

Respect!

@hiteshkumar797 8 месяцев назад

Hey great video Victor

@toluvictor 8 месяцев назад

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

@bestnocture 4 месяца назад

Came for the UI, stayed for the memes :D

@toluvictor 4 месяца назад

😂😂fair enough

@oluwapelumiabimbola9024 Год назад

Really sensational🔥

@toluvictor Год назад

💪💪

@edrainiery 6 месяцев назад

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

@toluvictor 6 месяцев назад

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

@user-yy7sm1pe6i 6 месяцев назад

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 6 месяцев назад

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 4 месяца назад

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" ) )

@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

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

@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 11 месяцев назад

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

@amirtwoprince9756 7 месяцев назад

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 7 месяцев назад

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