Modern PowerApps Gallery UI Design Tutorial - Beginner to Advanced

[@toluvictor]

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

[@bcobra1]

Facepile

[@toluvictor]

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

[@banihas22]

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

[@anapaulaarellanesrodriguez]

yess pleasee

[@Chrissiedeep]

agreed, yes please

[@toluvictor]

This video already exists kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@SimeonEducational]

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

[@karun1369]

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

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

[@ishewolf1]

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!

[@ashtonquincey]

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]

Glad you liked it!

[@traveltrends-yt]

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]

The video is now live. Check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

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

Wow, thanks!

[@normanstiegler1275]

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

[@CorieCornelius]

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

[@toluvictor]

I already created a video on that. Check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

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]

Thanks for the tip!

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

[@adlaimaschiach]

@3:21 If you can post a short video on how to build this , it would be great :)

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

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

[@akilabenjamin8268]

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]

😇

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

[@____merveilleux8412]

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

[@toluvictor]

Thanks

[@matthewruane3253]

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

[@toluvictor]

Video already in the works👍

[@akinisaacslufadeju3474]

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

[@toluvictor]

Hi. I've just put out a new video explaining this, check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@joepdemollin]

Hey Tolu did you ever come around to creating a video about the initial page you use here? Would like to follow your tutorial but even that page is not simple to recreate

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

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

[@sharepointdeveloper602]

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

[@ChrisBahl-i8n]

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

[@toluvictor]

Glad you like them!

[@hashimraza422]

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

[@rickyfuentes]

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.

[@SavvySewing]

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

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

[@adilaishak1476]

Hello Tolu, awesome tutorial! Just a question: if I have 19 columns, how can the table gallery be scrollable?

[@Chrissiedeep]

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

[@toluvictor]

Thanks. The video already exists kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@suelimoraes-t8g]

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

[@toluvictor]

Thanks for the kind words🙂

[@Officekarshi]

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

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

[@MichaelBarrett23]

Awesome UI skills. Please do more like this!

[@toluvictor]

Thanks, will do!

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

🫡

[@marcelofossa4939]

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

[@toluvictor]

Thanks for the kind words

[@fam.giannakisflores7780]

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

[@toluvictor]

This video exists already

[@fam.giannakisflores7780]

where?@@toluvictor

[@toluvictor]

kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@montsemaganapintiado1567]

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

[@toluvictor]

Hi. I've just put out a new video explaining this, check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@chrisshales]

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

[@toluvictor]

This video exists already . kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@irfankazi9295]

Will you please help me with you header and filter row that you used in gallery up side

[@spen2431]

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

[@Ali-ud6lr]

Thanks for this lovely video, just want to point out the visual quality of the video is not clear(maybe its just me )

[@toluvictor]

I recorded in 1080p, so viewing at on a larger laptop (2k and 4k) might not be as clear as what you are used to

[@tomka5050]

I understand that this video is about a non-responsive app. What is the purpose of inserting a horizontal or vertical container into a container?

[@pawellatocha5780]

Fantastic job! The app looks amazing

[@PeterHeffner]

Awesome tutorial! Thanks for sharing, Tolu

[@toluvictor]

🙂

[@Tiketbus-e8d]

Thank you tolu, thats great video, so make tutorial for Advanced_GalleryScreen in your powerapps please !, Thanks mate

[@EmelieOkongwu]

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

[@toluvictor]

Lol thanks

[@Oranges0011]

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]

I have. Here it is kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@Oranges0011]

Thanks 😊

[@Sameer-oy1bd]

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

[@toluvictor]

Thanks for the kind words

[@drpr12]

Now i know how to use the containers ty.

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

[@delsol7878]

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

[@jakequilkey6870]

Awesome Job Tolu!

[@renjithvr3098]

Awesome video man. Keep posting🤩

[@toluvictor]

Thanks 😇

[@kevmscotland]

Really great video. 👍

[@toluvictor]

😁

[@PruebasDevOps]

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.

[@ajayrathod7777]

In your patreon , we can download this full functional app and customise it? Does it comes with user level security ,admin and multi user login and approval request flow ?

[@toluvictor]

Hi The solution downloads contains the apps I build in my videos as it is. You have the ability to modify it for your needs or even use some of the components

[@ajayrathod7777]

​@@toluvictorGreat will subscribe, please make next video on muti user login and approval flow in power apps if possible

[@nabilsidrak4495]

Hi Tolu, how can we use images from the media in the "Set Icons" defined in the formulas instead of using bootstrap?

[@toluvictor]

Hi, you can just reference them directly with their name . Eg. 'Image 1' or 'Image 2'. However, note that if you want to store it in a collection, you need to make sure the column types do not clash. I suggest to have 2 columns 1 for the Bootstrap icons and the other for your Images.

[@nicolasnowicki5827]

thank you , very useful and so good explication

[@toluvictor]

🙂

[@tuizz01]

Love the design. Subscribed❤

[@toluvictor]

😇

[@uzoruchenna4863]

Hi Tolu, I noticed that you didn't make mentioned of where the users in the Product Team column is being retrieved from. I know its a column in your Table, but are you getting the users from Azure AD in Dataverse or you are using a lookup to another Dataverse Table

[@toluvictor]

Its a lookup to the default "User" table. This table gets its data from Azure AD

[@julianacsmartins]

@toluvictor I'm beginner in power apps. Could you explain how to do the header and filters? Thanks a lot

[@toluvictor]

Hi. I've just put out a new video explaining this, check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@rommelramoneda738]

How are we going to view the other columns/fields if you have more than what can be fit on the screen? I used a slider before to freeze some columns and scroll other columns that are not shown during design. How can we achieve this with the method you provided? your response is very much appreciated.

[@toluvictor]

Just one step actually, set the horizontal overflow of the container containing both the gallery and header to "Scroll". And then you can add as many columns as needed. There would be a scroll bar at the bottom

[@ParaagPatel]

Great Video! In the gallery, how to you have a thicker line and then a thinner line?

[@toluvictor]

I'm not sure exactly what you're referring to but I assume it's the rectangle width you're referring to. Just change the width to match your desired thickness

[@ParaagPatel]

@@toluvictor sorry, maybe it’s just me, but it looks like there is a thicker line separating every other item in the gallery.

[@toluvictor]

Oh I see what you're talking about. That's just a PowerApps studio visual bug that occurs on smaller screens. I recorded this video on a small screen

[@ParaagPatel]

@@toluvictor got it thank you

[@supermariaworld64]

New subscriber alert! Love your videos! Thank you!

[@wonderfullysketched7353]

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?

[@avinash445]

Can you please make a video on Size and scale to fit settings in making canvas apps, I didn't find any right information in any site or KZbin video. Please make a video on necessary steps to make my app look full screen in any device.

[@toluvictor]

Hi. For that, you'll have to build your app as a responsive app. A video on this topic is already in the works🙂

[@tayyabatahira8324]

Why You are not using responsive container how can we manage our design for mobile and tablets view? please post a tutorial to handle responsive containers

[@toluvictor]

A video is already in the works for this topic 👍

[@gabrielomotoyosi2981]

This is really great 👍

[@toluvictor]

Glad you think so!

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

Hi. I've just put out a new video explaining this, check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@JasonCiani]

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.

[@sridharreddy1607]

The design1 is it responsive since you have used non responsive containers in it ??

[@toluvictor]

Hi, In this video I was mostly using the containers for grouping and not for responsiveness

[@lalasahebgaikwad1154]

Nice App design 🎉🎉

[@abenezerkassu1786]

Can you explain the step by step on how to start from scratch? Thank you

[@toluvictor]

Hi. I've just put out a new video explaining this, check it out here kzbin.info/www/bejne/mn-qnXl3a96BrMk

[@ABAcoding]

Hello can i implement this using a sharepoint database?????

[@toluvictor]

Yes. It can be implemented using any datasource

[@wrajer]

Great job!

[@toluvictor]

Thanks👍

[@gabrielomotoyosi2981]

Please, how I display sharepoint person column in powerapps gallery. Also, I see you have an export data button. Can you make a video that will allow export of FromDate ToDate (date range) in powerapps?

[@toluvictor]

To export data, you need power Automate, there are a lot of tutorials on youtube explaining how to export data from powerapps using power Automate.

[@marcelofossa4939]

I will share in my company....

[@shreyasd4663]

Keep it up victor

[@toluvictor]

Thanks for the kind words🫡

[@ravithavutu3537]

amazing🎉 never think in this way. GitHub application giving error while importing. unable to use in my application 😢

[@toluvictor]

Hmm. What's the error

[@ravithavutu3537]

while importing it saying something went wrong. please try again later getting same in different tenants

[@ajayrathod7777]

​@@ravithavutu3537is it resolved now ?

[@2347matte]

Bro you rock

[@toluvictor]

Lol thanks 👊

[@gabrielosaji8920]

Welldone sir

[@teekleton]

For 9:23 i cant place the container within the other container, it sits underneath it. Anyone else experienced this?

[@toluvictor]

Hi. Make sure to select the parent container first before adding the new container, that will place the new Container within the parent container. Another option is to click the "Add item" or "+" sign within the empty container, that will bring up the insert menu

[@teekleton]

Sorted, thanks 😅

[@toluvictor]

Great 👍

[@richardhedley6751]

You had me hello, but as canvas designer myself; sorry you're first action using a button in edit mode as your background, just failed accessibility for keyboard tabbing and will call out as clickable on listening softwares, when actually not setup to do anything. Though very nice design thinking.

[@toluvictor]

Yes. Thanks for the call out. I went for this approach because some people really do not want to or know how to write HTML, using an HTML control and creating a rounded rectangle is actually the best option, but using the button is a simpler approach for beginners. Hopefully Microsoft adds a rounded rectangle control so we won't have to go through all these

[@richardhedley6751]

@@toluvictor makes sense with that approach.

[@toluvictor]

👍

[@rajaniprasad2706]

Very nice ❤

[@toluvictor]

Thanks 🙂

[@binhfboong]

can you share data source?

[@toluvictor]

Ive uploaded the table (unmanaged Solution) as well as the excel data to the Github link in the video description. So check it out there

[@funshoakerele8873]

very apt content

[@alexanders.5879]

Good Job!!! 😳😳

[@toluvictor]

🫡

[@nomagugusiwela992]

please step by step

[@girlinhishoodie]

Can it add new data?🥺

[@toluvictor]

This is a Gallery control. Form Controls are used to add/edit data from datasources. You can also use patch function to add/edit data from a Gallery, however i didnt discuss that in this video. Also check out my video on how to build Modern looking forms of you're interested

[@girlinhishoodie]

@@toluvictor thank you so much 🙏🏻

[@shreyasd4663]

Great

[@toluvictor]

🙂

[@Hitesh222-c7n]

circular progress bar i want to pass Label value( how to do this) ?ValueCircle_Circumference: (Label5.Text/100) * 169.646, this not showing any data

[@tebogolawrence1844]

Thank you very much. Your design is awesome but the only issue I have is that your videos are too long

[@toluvictor]

Yeah. I'm working on trimming them down now

[@dasilvadanilo]

Container lover 😂😂😂

[@toluvictor]

🤣🤣 I don't know if that's a good thing or bad thing

[@jhonquishpe6329]

great video, I will implement that but with fewer containers

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

[@juanbobadilla5954]

Great video, i really like you content, you're awesome! Please make more videos.

[@sofeaezzaty3435]

why does my code keep having error eventhough i already copied exactly the way you did.

[@ahsanmehmood4023]

Dear I have also Emailed you. Please make a detail video on the portion you have missed.

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

[@kambhampatisreenivarao-qb1wi]

How to select 2nd or 3rd item in default?

[@Harishkumar-lt6pu]

AWESOME!!! CAN U MAKE FOR THAT SEARCH AND FILTER ROW TOO............

[@toluvictor]

The video already exists. Check it out here. kzbin.info/www/bejne/mn-qnXl3a96BrMk