Modern PowerApps Gallery UI Design Tutorial - Beginner to Advanced
Vložit
- čas přidán 25. 07. 2024
- 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 CZcams or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For CZcams 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:
CZcams- / @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 - Věda a technologie
What is the name of the display element at 1:07
Facepile
No way😂😂. After almost 1 year and 70k+ views someone finally gave me the answer. Thanks 🫡
Great tutorial. I learned so much and can now I can go back and polish up all my old apps.
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!
This is a great video! Very informative with detailed steps and great humor sprinkled throughout.
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!
Thanks for the kind words. A video on this topic is already in the works. Subscribe to get notified once its live
My man, you've got a new follower. Liked the content and animation effects. Shout out from Brazil
Fantastic job! The app looks amazing
Awesome Job Tolu!
Great content! A video showing the top portion including Search, Filter and adding new button would be amazing.
yess pleasee
agreed, yes please
This video already exists
czcams.com/video/dNGlFA6yNvg/video.html
@@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.
@@toluvictor This is a different video in the link can you make a video for the top portion and can we do multi-select on the list records.
Nice. Thanks for sharing. Some real gems in there 👍👍
Thanks for sharing the amazing video on modern view. It's great video. Keep posting such amazing video. Love from India
I love this modern design. Looking forward for more!
😁 More is on the way
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.
great video, I will implement that but with fewer containers
Awesome tutorial. I spent a lot of time to try and find how to add SVG icons into PowerApps. Please keep making more videos!
Happy you learnt something 🙂
New subscriber alert! Love your videos! Thank you!
Great video, i really like you content, you're awesome! Please make more videos.
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 :)
Wow, thanks!
Great job Victor I learned a few formatting skills from this video. Mad skills bro and thanks for posting..
Thanks for the kind words
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 👌
Thanks for the engagement 😋
Awesome tutorial! Thanks for sharing, Tolu
🙂
Thanks Victor. Excellent video. Keep them coming 👍
Thanks for the kind words 🙏
Keep these great videos coming. AWESOME JOB
That's the plan💪. Thanks for the kind words
Excellent work, I learned new things and applied them to my project in my company, thanks for sharing.
Thanks for the kind words🙂
Your content is amazing! I found this extremely useful! Thank you for sharing.
👍
Thank you for these design guides!
🫡Thanks for the engagement
Tolu, this is brilliant, best in the game. Keep up with the great work you are doing.
Thanks
Very informative video ! Keep going @Tolu Victor....Looking for more content from you on Power Apps Development in Depth
More content on the way🙂
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.
Glad you liked it!
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!
Glad it was helpful!
Awesome UI skills. Please do more like this!
Thanks, will do!
Super awesome...i used to check Reza Dorani's video and i can tell you leven up
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
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.
Thanks a lot 😁
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
absolutely fantastic explained. thank you
You're welcome🙂
My dude!!! You just got yourself a new subscription! Holy moly what a video quality! Can't wait to watch all your videos!
🤩 Glad you liked it. There's more to come
@@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!
I agree, best of luck on your journey
Great Work!!! Thnks
so thankful i found you
I really like your videos Tolu
You are the best powerapps youtuber there is man best of luck to you
Awesome content, it will be great if you make a live example of this. Thanks a lot for your effort.
Incredible work, thanj you!!
Glad you liked it!
Love the design. Subscribed❤
😇
Genius svg solution, great video. Thank you.
Thanks for the engagement 🙂
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.
😇
Amazing Tutorial Tolu. 😍
Thanks Ricardo
Your videos are hilarious. Thank you. You have saved alot of people's jobs!
Glad you like them!
Honestly this is a great video. Making gallery look sleek
Thanks
Great content
Salute you Tolu ... you are the best of the best...
Thanks for the kind words
Really great video. 👍
😁
Awesome video man. Keep posting🤩
Thanks 😇
I'd love to see how you setup the filter menu.
Thanks for the inspiration and walktrough.
I already created a video on that. Check it out here czcams.com/video/dNGlFA6yNvg/video.html
Congratulations on the application, very cool I liked it a lot I will follow you on CZcams
Thanks for the kind words
Great job!
Thanks👍
Buen vídeo!!
thank you , very useful and so good explication
🙂
Wow. Very nice gallery my friend 👍🏼
Thanks a lot🙂
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.
Thanks for the tip!
Great vid thank you, would also live to see a video on adding the filter features.
Thanks. The video already exists czcams.com/video/dNGlFA6yNvg/video.html
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.
Thanks. I'll consider it as one of my future video ideas
This is really great 👍
Glad you think so!
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...
OK, I would work on this video. Thanks for the engagement
Me too I want it oo
Lol. Don't worry, it's the next video🙂
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
The video is now live. Check it out here czcams.com/video/dNGlFA6yNvg/video.html
Now i know how to use the containers ty.
Hi, could you make a video explaining about the search bar and filter please?
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.
good job bro, thanks for sharing
😁
Nice App design 🎉🎉
Great video. Please share a video on hiw to make user initial circles in different colors. Thanks
Alright. I'll see how I can incorporate into a future video
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?
OK. I'll consider this idea in a future video 👍
Welldone sir
Good job very nice design
Thanks 😊
Fantastic video! Could you explain us the previous work, please?
Thank you so much!
Hi. I've just put out a new video explaining this, check it out here czcams.com/video/dNGlFA6yNvg/video.html
thanks a lot it was very helpful video, please explain the gallery filters and row in next video ^-^
The video already exists. Check it out here czcams.com/video/dNGlFA6yNvg/video.html
Very nice ❤
Thanks 🙂
That intro with the "HUH!?" @ 0:50 caught me off guard... got me laughing out loud and my dog looking at me crazy.
😂😂😂
Here I'm your 1000. sub! Hope to see 100k as well.
My OG!!!!!!. thanks a lot
Keep it up victor
Thanks for the kind words🫡
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 😊
I have. Here it is czcams.com/video/dNGlFA6yNvg/video.html
Thanks 😊
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.
It would be great if you tell us how to add the data table to the power app.
Good Job!!! 😳😳
🫡
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. 😉
Hmmm cool. Maybe you should come and help me make videos too. I need your expertise😂😂
@@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.
very apt content
Bro you rock
Lol thanks 👊
I've been waiting for you Mahn!! Now got a channel for Power Apps design Learning!!
🤣🤣 Sorry I've been procrastinating for 1 year
@@toluvictor Whenever I am searching UI for Power Apps..I've never seen you in the list for past 2 years Mahn...🥹🥹
I've got some cool ideas lined up. Subscribe to get notified once it's live🙂
@@toluvictor Already Done brother! Waiting to get cool inspirations 💤
🫡
Hi
great video ! Can you please do a video on the preliminary work?
Thank you !
Video already in the works👍
@@toluvictor Great job @toluvictor👍 Is the preliminary build video out yet? Can't find it around.
Hi. I've just put out a new video explaining this, check it out here czcams.com/video/dNGlFA6yNvg/video.html
Good job very nice
Thanks🙂
i need the video in head line
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
Hi. I've just put out a new video explaining this, check it out here czcams.com/video/dNGlFA6yNvg/video.html
really Nice design. Making power apps look aesthetically pleasing is the hardest part of building power apps.
Totally agree! Hopefully my videos can help you out😅
@@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.
@@toluvictor I subscribed to your channel also. Appreciate the content
They are used for grouping and layouts in PowerApps
Thanks 😁
Great
🙂
Hi, thank you very much for the video, it's great.
I wanted to know how you export the data to an excel file?
You basically need to use Power Automate. There are some video on youtube that explain this concept really well. Check Reza Dorrani's channel
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
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.
Sure. I'll incorporate it into my next vid
Please can you do a video of the top headers? Thank you kindly.
This video exists already . czcams.com/video/dNGlFA6yNvg/video.html
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.
I will share in my company....
My friend a A plus tutorial, a must is a video showing the top portion including Search, Filter and adding new button
This video exists already
where?@@toluvictor
czcams.com/video/dNGlFA6yNvg/video.html
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?
Great Content!! 🤣
Thanks
@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? ;)
@toluvictor I'm beginner in power apps. Could you explain how to do the header and filters? Thanks a lot
Hi. I've just put out a new video explaining this, check it out here czcams.com/video/dNGlFA6yNvg/video.html