Modern PowerApps Gallery UI Design Tutorial

Modern PowerApps Gallery UI Design Tutorial - Beginner to Advanced

Рет қаралды 85,897

Күн бұрын

This is an In-Depth Crash Course Video on how to create Modern Galleries in PowerApps. There are 3 gallery designs being taught in this video.
You can get the SVG Embed code and Circular Display Bar Code from my GitHub repo
GitHub Repo
github.com/ToluVictor/YT_Gall...
Follow me on LinkedIn: / victorsanwoolu
Video ID: #PP_0005
📥 App and Dataset Download for Members (on KZfaq or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For KZfaq 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:
KZfaq- / @toluvictor
Patreon- / toluvictor
Chapters
0:00 Intro
1:47 Data Model Overview
2:54 Screen Overview
3:40 Gallery Design 1 - Wireframe
9:50 Gallery Design 1 - Add Components
19:59 Text - Pills
24:53 Multi-User-Profile-Image-Or-No-Initials-If-No-Display-Picture
35:42 Horizontal Progress Bar
43:08 Not a Sponsor
43:26 Gallery Design 2
1:07:25 How to Embed SVG
1:13:15 Gallery Design 3
1:15:28 Circular Progress Bar
#powerapps #gallery #crashcourse #canvasapps

Пікірлер: 292

@toluvictor Жыл бұрын

What is the name of the display element at 1:07

@bcobra1 3 ай бұрын

Facepile

@toluvictor 3 ай бұрын

No way😂😂. After almost 1 year and 70k+ views someone finally gave me the answer. Thanks 🫡

@normanstiegler1275 8 ай бұрын

This is a great video! Very informative with detailed steps and great humor sprinkled throughout.

@luisfernandomacedo1451 9 ай бұрын

My man, you've got a new follower. Liked the content and animation effects. Shout out from Brazil

@laszlokovacs7411 Жыл бұрын

Awesome tutorial. I spent a lot of time to try and find how to add SVG icons into PowerApps. Please keep making more videos!

@toluvictor Жыл бұрын

Happy you learnt something 🙂

@SavvySewing 9 ай бұрын

Great tutorial. I learned so much and can now I can go back and polish up all my old apps.

@shaikhasabti1335 Жыл бұрын

I love this modern design. Looking forward for more!

@toluvictor Жыл бұрын

😁 More is on the way

@jeffeklund2224 Жыл бұрын

Tolu - this is a phenomenal video, you've done an outstanding job. I am new to Power Apps and trying to learn as quickly as possible. I wanted to build a report for one of my apps that I'm building, and even though I suspected a gallery control could be used I couldn't figure out how. I searched, and searched for hours. I've built Power BI reports and tried to create hidden views and filters in power bi that could be used in power apps. I had a poorly working report that I was very unhappy with and it took me probably 3-4 days to build. I have done more in a few hours with this video and have a simple, functioning report now. I found this by accident after looking for a solution to a different problem - if you did a "Build a report" title on a video like this you would probably get a lot of hits. Thank you so much. There is some great content out there already on the Power Platform, but you bring a unique perspective and it is much appreciated.

@eduardomorenocerda353 Жыл бұрын

Thanks for sharing us step by step all the different components to create this amazing table view. You are a Pro on Power Apps ! This may be the only video with this content because I didn't find another one explaining it. New subscriber! Greetings from Mexico :)

@toluvictor 11 ай бұрын

Wow, thanks!

@ishewolf1 3 ай бұрын

YOUR VIDEOS ARE AMAZING! please release a video showing the top portion including search, filter and exporting! I learn and have a good time while watching your videos, thank you so much! will join now!

@ufukkeles6229 18 күн бұрын

You are the best powerapps youtuber there is man best of luck to you

@jakequilkey6870 Жыл бұрын

Awesome Job Tolu!

@pawellatocha5780 7 ай бұрын

Fantastic job! The app looks amazing

@banihas22 10 ай бұрын

Great content! A video showing the top portion including Search, Filter and adding new button would be amazing.

@anapaulaarellanesrodriguez 9 ай бұрын

yess pleasee

@Chrissiedeep 5 ай бұрын

agreed, yes please

@toluvictor 5 ай бұрын

This video already exists kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@SimeonEducational 3 ай бұрын

@@toluvictor no Sir. It is not the same sir. I am doing that vidoe and the second part from the top of this video's top part is not there.

@supermariaworld64 14 күн бұрын

New subscriber alert! Love your videos! Thank you!

@ChEwYninetyfive Ай бұрын

Absolutely fantastic video tutorial, thank you for sharing your knowledge in such a clear and concise fashion. Looking forward to learning from the rest of your content!

@toluvictor Ай бұрын

Glad it was helpful!

@spen2431 Жыл бұрын

Nice. Thanks for sharing. Some real gems in there 👍👍

@bobleach Жыл бұрын

I've not yet managed to watch the whole thing yet, but from what I've seen so far I think you have done a great job on this, although I can do all of this myself already, I did learn a couple of different tricks and ideas on formatting. So thank you so much for posting this tutorial. Subscribed for more 👌

@toluvictor Жыл бұрын

Thanks for the engagement 😋

@HokieInChicago Жыл бұрын

Keep these great videos coming. AWESOME JOB

@toluvictor Жыл бұрын

That's the plan💪. Thanks for the kind words

@user-nt7vg6zd8b Жыл бұрын

Wow, thank you very much for the video, it teaches really well how to work with containers, and precise design. Thank you very much. We would really appreciate it if you made a video about the search bar as well, thank you very much!

@toluvictor Жыл бұрын

Thanks for the kind words. A video on this topic is already in the works. Subscribe to get notified once its live

@____merveilleux8412 3 ай бұрын

Tolu, this is brilliant, best in the game. Keep up with the great work you are doing.

@toluvictor 3 ай бұрын

Thanks

@garrybaisden4230 Жыл бұрын

Thanks Victor. Excellent video. Keep them coming 👍

@toluvictor Жыл бұрын

Thanks for the kind words 🙏

@ashtonquincey7858 11 ай бұрын

dude. absolutely hilarious but I think this is the best video I've seen for modern views in Power Apps. everyone else makes it look square and basic. this is great. please keep doing more videos that make functionality and user experience better.

@toluvictor 11 ай бұрын

Glad you liked it!

@kabz231 Жыл бұрын

Great job Victor I learned a few formatting skills from this video. Mad skills bro and thanks for posting..

@toluvictor Жыл бұрын

Thanks for the kind words

@sombrasesegredos123 Жыл бұрын

Excellent work, I learned new things and applied them to my project in my company, thanks for sharing.

@toluvictor Жыл бұрын

Thanks for the kind words🙂

@sharepointdeveloper602 10 ай бұрын

Thanks for sharing the amazing video on modern view. It's great video. Keep posting such amazing video. Love from India

@TheOver18years Жыл бұрын

My dude!!! You just got yourself a new subscription! Holy moly what a video quality! Can't wait to watch all your videos!

@toluvictor Жыл бұрын

🤩 Glad you liked it. There's more to come

@TheOver18years Жыл бұрын

@@toluvictor Can't wait! Just starting out on PowerApps, i want to implement it as a new product for my MSP business, so many companies in denmark could use their own company apps!

@toluvictor Жыл бұрын

I agree, best of luck on your journey

@blazehawkins2759 Жыл бұрын

Thank you for these design guides!

@toluvictor Жыл бұрын

🫡Thanks for the engagement

@PeterHeffner Жыл бұрын

Awesome tutorial! Thanks for sharing, Tolu

@toluvictor Жыл бұрын

🙂

@oseiyere2713 6 ай бұрын

Your content is amazing! I found this extremely useful! Thank you for sharing.

@toluvictor 6 ай бұрын

👍

@MichaelBarrett23 11 ай бұрын

Awesome UI skills. Please do more like this!

@toluvictor 11 ай бұрын

Thanks, will do!

@pratikdarak8863 Жыл бұрын

Very informative video ! Keep going @Tolu Victor....Looking for more content from you on Power Apps Development in Depth

@toluvictor Жыл бұрын

More content on the way🙂

@jhonquishpe6329 3 ай бұрын

great video, I will implement that but with fewer containers

@uzoruchenna4863 7 ай бұрын

Honestly this is a great video. Making gallery look sleek

@toluvictor 7 ай бұрын

Thanks

@0001destroyer 8 ай бұрын

so thankful i found you

@rembautimes8808 Жыл бұрын

I’m watching this at 2 am in Singapore 🇸🇬. Really excited to follow this tutorial. Your have great skills in UI design and a wonderful for you to share it with everyone

@rembautimes8808 Жыл бұрын

Maybe there can be a rule table to switch colours based on the initials or a function that takes the initials and squishes it to a number range.

@toluvictor Жыл бұрын

Thanks a lot 😁

@toluvictor Жыл бұрын

That's a nice idea, you can also add the ascii values of both letters, and then get the modulus of the addition based on the number of possible color codes. So if addition is 203 and you do a modulus of 5, you get 3 and then you select the 3rd color value in your color rule table. That way a set of initials will always give the same color and the bigger your color rule table the less chance of color overlap

@Tooxcade Жыл бұрын

absolutely fantastic explained. thank you

@toluvictor Жыл бұрын

You're welcome🙂

@asbjborg Жыл бұрын

Genius svg solution, great video. Thank you.

@toluvictor Жыл бұрын

Thanks for the engagement 🙂

@okidipekimbambo Жыл бұрын

Amazing Tutorial Tolu. 😍

@toluvictor Жыл бұрын

Thanks Ricardo

@ChrisBahl-i8n 4 күн бұрын

Your videos are hilarious. Thank you. You have saved alot of people's jobs!

@toluvictor 3 күн бұрын

Glad you like them!

@musicinme8 Жыл бұрын

Incredible work, thanj you!!

@toluvictor 11 ай бұрын

Glad you liked it!

@Sameer-oy1bd 10 ай бұрын

Salute you Tolu ... you are the best of the best...

@toluvictor 10 ай бұрын

Thanks for the kind words

@patrickwood6851 10 ай бұрын

I really like your videos Tolu

@tuizz01 Жыл бұрын

Love the design. Subscribed❤

@toluvictor Жыл бұрын

😇

@renjithvr3098 6 ай бұрын

Awesome video man. Keep posting🤩

@toluvictor 6 ай бұрын

Thanks 😇

@akilabenjamin8268 10 ай бұрын

Thank you so much bro for this video. We can use your techniques to our industrial Level Apps. Please keep doing these kinds of videos and do more complex ones also.

@toluvictor 10 ай бұрын

😇

@loicbrou6321 7 ай бұрын

Super awesome...i used to check Reza Dorani's video and i can tell you leven up

@hashimraza422 5 ай бұрын

Awesome content, it will be great if you make a live example of this. Thanks a lot for your effort.

@marcelofossa4939 Жыл бұрын

Congratulations on the application, very cool I liked it a lot I will follow you on KZfaq

@toluvictor Жыл бұрын

Thanks for the kind words

@kevmscotland Жыл бұрын

Really great video. 👍

@toluvictor Жыл бұрын

😁

@btoz6237 Жыл бұрын

Wow. Very nice gallery my friend 👍🏼

@toluvictor Жыл бұрын

Thanks a lot🙂

@ingdavidpalacio 8 ай бұрын

Great Work!!! Thnks

@wrajer Жыл бұрын

Great job!

@toluvictor Жыл бұрын

Thanks👍

@cmoremee1186 Жыл бұрын

You are a Pro, bro, and I am glad I discovered your channel. This is amazing step by step tutorial. We would really appreciate it if you made a video about Employee gift match Request form with mullite level approval process using power app and power automation.

@toluvictor 11 ай бұрын

Thanks. I'll consider it as one of my future video ideas

@Chrissiedeep 5 ай бұрын

Great vid thank you, would also live to see a video on adding the filter features.

@toluvictor 5 ай бұрын

Thanks. The video already exists kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@nicolasnowicki5827 Жыл бұрын

thank you , very useful and so good explication

@toluvictor Жыл бұрын

🙂

@Bodyalert Жыл бұрын

Hello Tolu, First of all, thank you for such a detailed explanation. It would be very helpful if you could explain how to create the template part of the project. For example, how did you create the logo bar and filter bar at the top? I love and carefully follow the videos of rare channels with Power apps content. I'm sure your channel will grow soon. Greetings from Turkey...

@toluvictor Жыл бұрын

OK, I would work on this video. Thanks for the engagement

@gabrielosaji8920 Жыл бұрын

Me too I want it oo

@toluvictor Жыл бұрын

Lol. Don't worry, it's the next video🙂

@shashipaul6279 Жыл бұрын

It is required for all beginners in it .... I know power bi part n want to work on power apps n I need best platform with basic explanations ... I hope you will come up with

@toluvictor 11 ай бұрын

The video is now live. Check it out here kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

8 ай бұрын

Great work. Really beautiful. You don't need a collection to store Icon information, you can use a record, that is a plain json object and reference them as Icons.name.data or something similar.

@toluvictor 7 ай бұрын

Thanks for the tip!

@gabrielomotoyosi2981 Жыл бұрын

This is really great 👍

@toluvictor 11 ай бұрын

Glad you think so!

@CorieCornelius 11 ай бұрын

I'd love to see how you setup the filter menu. Thanks for the inspiration and walktrough.

@toluvictor 11 ай бұрын

I already created a video on that. Check it out here kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@VanNguyen-lw2ty 8 ай бұрын

Great content

@binhfboong Жыл бұрын

good job bro, thanks for sharing

@toluvictor Жыл бұрын

😁

@drpr12 8 ай бұрын

Now i know how to use the containers ty.

@lalasahebgaikwad1154 5 ай бұрын

Nice App design 🎉🎉

@johnson8423 Жыл бұрын

I've been waiting for you Mahn!! Now got a channel for Power Apps design Learning!!

@toluvictor Жыл бұрын

🤣🤣 Sorry I've been procrastinating for 1 year

@Johnson-ht8qm Жыл бұрын

@@toluvictor Whenever I am searching UI for Power Apps..I've never seen you in the list for past 2 years Mahn...🥹🥹

@toluvictor Жыл бұрын

I've got some cool ideas lined up. Subscribe to get notified once it's live🙂

@Johnson-ht8qm Жыл бұрын

@@toluvictor Already Done brother! Waiting to get cool inspirations 💤

@toluvictor Жыл бұрын

🫡

@jeremieduplessis-savard9557 Жыл бұрын

Good job very nice design

@toluvictor Жыл бұрын

Thanks 😊

@shreyasd4663 Жыл бұрын

Keep it up victor

@toluvictor Жыл бұрын

Thanks for the kind words🫡

@powermyapps Жыл бұрын

Here I'm your 1000. sub! Hope to see 100k as well.

@toluvictor 11 ай бұрын

My OG!!!!!!. thanks a lot

@saojoaomeriti Жыл бұрын

Great! Thank you so much! Can you create a video in the future about change status in bulk (the same time) using checkbox or anything based on Sharepoint column?

@toluvictor Жыл бұрын

OK. I'll consider this idea in a future video 👍

@gabrielosaji8920 Жыл бұрын

Welldone sir

@McIlravyInc Жыл бұрын

Great video. Please share a video on hiw to make user initial circles in different colors. Thanks

@toluvictor 11 ай бұрын

Alright. I'll see how I can incorporate into a future video

@valentinanunez8192 5 ай бұрын

Buen vídeo!!

@rajaniprasad2706 Жыл бұрын

Very nice ❤

@toluvictor Жыл бұрын

Thanks 🙂

@Oranges0011 11 ай бұрын

This is excellent! I've just started watching. Please can you do a video showing how you made the header and filters section from the beginning of your video. Thanks 😊

@toluvictor 11 ай бұрын

I have. Here it is kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@Oranges0011 11 ай бұрын

Thanks 😊

@juanchizarabozo4232 10 ай бұрын

Hi, could you make a video explaining about the search bar and filter please?

@montsemaganapintiado1567 Жыл бұрын

Fantastic video! Could you explain us the previous work, please? Thank you so much!

@toluvictor 11 ай бұрын

Hi. I've just put out a new video explaining this, check it out here kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@rusulmay7999 9 ай бұрын

thanks a lot it was very helpful video, please explain the gallery filters and row in next video ^-^

@toluvictor 9 ай бұрын

The video already exists. Check it out here kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@greggapowell67 4 ай бұрын

really Nice design. Making power apps look aesthetically pleasing is the hardest part of building power apps.

@toluvictor 4 ай бұрын

Totally agree! Hopefully my videos can help you out😅

@greggapowell67 4 ай бұрын

@@toluvictor I never used containers. What are they primarily used for? It's funny because, in 3 years, I never noticed they are there as components they can be added to a power app.

@greggapowell67 4 ай бұрын

@@toluvictor I subscribed to your channel also. Appreciate the content

@toluvictor 3 ай бұрын

They are used for grouping and layouts in PowerApps

@toluvictor 3 ай бұрын

Thanks 😁

@AssassinUK 4 ай бұрын

Great video. I've been using PowerApps for over 7yrs and you are coding very similar to me. I jump ahead sometimes and when I play, you have done something very similar or exactly the same. At the end, that was a nice SVG hack but you don't need to do that. Just get a pie chart, stick a smaller circle in front of the pie chart, stick a text label in front of the circle. Same difference, just a bit easier. 😉

@toluvictor 4 ай бұрын

Hmmm cool. Maybe you should come and help me make videos too. I need your expertise😂😂

@AssassinUK 4 ай бұрын

@@toluvictor lol, you doing fine by yourself mate! lol Keep up the good work! Slight Tip. Talk slower/Slow your videos down, that's all.

@user-gl8uj4ky6i 6 ай бұрын

Excelente contenido, muchas gracias. puedo obtener una barra de desplazamiento horizontal y si es así agregarlas al contenedor de encabezados y al contenedor del cuerpo de la tabla y que al mover cualquiera de las dos se mueva también la otra para no perder la perspectiva de tabla? pues estoy realizando esto pero necesito reflejar 15 columnas.

@nathaniel-.- Жыл бұрын

That intro with the "HUH!?" @ 0:50 caught me off guard... got me laughing out loud and my dog looking at me crazy.

@toluvictor 11 ай бұрын

😂😂😂

@alexanders.5879 Жыл бұрын

Good Job!!! 😳😳

@toluvictor Жыл бұрын

🫡

@delsol7878 Жыл бұрын

It would be great if you tell us how to add the data table to the power app.

@funshoakerele8873 11 ай бұрын

very apt content

@2347matte 4 ай бұрын

Bro you rock

@toluvictor 4 ай бұрын

Lol thanks 👊

@matthewruane3253 Жыл бұрын

Hi great video ! Can you please do a video on the preliminary work? Thank you !

@toluvictor Жыл бұрын

Video already in the works👍

@akinisaacslufadeju3474 11 ай бұрын

@@toluvictor Great job @toluvictor👍 Is the preliminary build video out yet? Can't find it around.

@toluvictor 11 ай бұрын

Hi. I've just put out a new video explaining this, check it out here kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@MohammadAli-ts2ev Жыл бұрын

Hey Tolu, that's a great video with a number of awesome concepts. I want to know as how did you do the "Export Product" cliker. I need the function that you used - to click to download. I have subscribed and waiting for more incredible concepts

@toluvictor 11 ай бұрын

Hi. I've just put out a new video explaining this, check it out here kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@rickyfuentes 4 ай бұрын

I would LOVE if you could show a way to bring in data from the Microsoft planner app. Allow the user to filter on 'Planner boards', 'Assigned to', 'buckets', 'tasks',, 'Due dates', etc. Then on each card be able to see the comments, attachment links (if any), checklist items, etc. I understand all that is available in Planner but I'm looking to create a ALL IN ONE SOLUTION where people can access anything that was created from a power platform tool.

@user-np5lg4lh5k Жыл бұрын

Good job very nice

@toluvictor Жыл бұрын

Thanks🙂

@user-np5lg4lh5k Жыл бұрын

i need the video in head line

@shreyasd4663 Жыл бұрын

Great

@toluvictor Жыл бұрын

🙂

@user-xn2sj3jt5s 10 ай бұрын

Hey Brother @37:39 for the horizontal progress bar, how can I make this Vertical, from bottom to top? I applied the same properties to the hieght and it works, but its from top to bottom. Ive been messing the with the fill and still not able to get it. Any advice would be appreciated.

@paulaganbi5236 Ай бұрын

Hi Tolu. i am confused. How are you able to get multiple rows and separators in the vertical gallery? thanks. please I really need help

@wonderfullysketched7353 9 ай бұрын

Fantastic! I got stuck on the multiperson field. After adding the blank gallery then try to insert image within the gallery, it doesnt add inside the gallery, only inside the container where gallery is added. Tried to use the gallery with layout (image, title, subtitle) but it still doesnt show the images. Have you encountered anything similar?

@rembautimes8808 Жыл бұрын

Hi Victor will it be possible to show how you setup the filter pane in the first demo. Am trying myself so I want to check if I am adopting your same strategy. Thanks a lot.

@toluvictor Жыл бұрын

Sure. I'll incorporate it into my next vid

@fam.giannakisflores7780 9 ай бұрын

My friend a A plus tutorial, a must is a video showing the top portion including Search, Filter and adding new button

@toluvictor 7 ай бұрын

This video exists already

@fam.giannakisflores7780 7 ай бұрын

where?@@toluvictor

@toluvictor 7 ай бұрын

kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@gabrielosaji8920 Жыл бұрын

U are d real OG

@toluvictor Жыл бұрын

Thanks for the kind words🫡

@user-gs2go2ut5u 11 ай бұрын

Nigga where were you hidden since. I am so glad i found this channel. How can i subscribe a million times

@toluvictor 11 ай бұрын

Lol thanks

@qoryhanisagal 4 ай бұрын

Great Content!! 🤣

@toluvictor 4 ай бұрын

Thanks

@qoryhanisagal 4 ай бұрын

@toluvictor I am trying to follow along in the video…..ha! I am confused on how components work.. Will you do a video about them? ;)

@chrisshales 9 ай бұрын

Please can you do a video of the top headers? Thank you kindly.

@toluvictor 7 ай бұрын

This video exists already . kzfaq.info/get/bejne/mrR3n6lym9-ypps.html

@marcelofossa4939 Жыл бұрын

I will share in my company....

@user-it7vf5fz5g Жыл бұрын

Hi, thank you very much for the video, it's great. I wanted to know how you export the data to an excel file?

@toluvictor 11 ай бұрын

You basically need to use Power Automate. There are some video on youtube that explain this concept really well. Check Reza Dorrani's channel