Power Apps MODERN Gallery Design | Step-by-Step Tutorial
Ғылым және технология
This video is a step-by-step tutorial on Power Apps MODERN Gallery Designs. You'll learn how to customize Galleries by leveraging Modern controls to represent your data your way.
We will design our PowerApps Gallery like a table / list style or card style, add drop shadow effects, use various modern controls that respect app themes, explore modern style properties & a lot more.
Whether you're a beginner or an advanced user, this Power Apps tutorial is designed to empower you with the knowledge needed to transform your gallery designs.
⬇️ Download App shown in video
➡️ The link is in Community Tab for Channel Members (Silver Club 🥈 or Higher)
#PowerApps #Microsoft #powerplatform
0:00 Introduction to Modern Gallery designs in PowerApps
0:28 Design your Power Apps with modern controls
3:11 Build Gallery with Modern controls step-by-step
15:48 Add Headers to Table/List style Gallery
16:29 Add animated line in Gallery with modern progress bar control
17:00 Modern Gallery designs
Пікірлер: 174
Your video, Reza, was absolutely fantastic! It left me completely amazed. Since joining the club, I've been advocating for more design videos, and your content perfectly aligns with what I've been saying. I found it immensely helpful for the apps I've developed. Thank you immensely for sharing such valuable insights!
@RezaDorrani
2 ай бұрын
Wonderful! Thanks for suggesting for the video idea.
@kamozzi1
2 ай бұрын
When migrating the app to a different environment, I've noticed an unusual issue where the images associated with the used technology aren't displaying; instead, it's showing a blank space. Although it does display the additional technology numbers, the images remain absent. I even attempted to return the title, but to no avail. Strangely, there are no error messages. Any insights on what might be causing this?@@RezaDorrani
@RezaDorrani
2 ай бұрын
@@kamozzi1 My only guess would be some experimental feature or preview feature that might be impacting it.
@kamozzi1
2 ай бұрын
Thanks, is there a way to check and add them ?@@RezaDorrani
@RezaDorrani
2 ай бұрын
@@kamozzi1 One by one manually. Please note: I made a guess
Wow I'm just blown away on the quality of this tutorial. This is fantastic Reza well done. I didn't mind the speed of this presentation because you explained it so well. Once again thank you
@RezaDorrani
2 ай бұрын
Thank you very much!
I always come back to watch your videos as they are always so full of techniques to learn. I struggled a bit with the people column and the new controls. Thank you for sharing.
@RezaDorrani
2 ай бұрын
You are so welcome!
There are no better videos on KZread than yours.
@RezaDorrani
2 ай бұрын
Thanks so much
You’ve improved my power app skills soo much - you’ve helped me ton in my current project - thanks soo much!
@RezaDorrani
2 ай бұрын
You are so welcome!
I was in another world of PowerApps. Thank you so much for this tutorial 🙏🏻🙏🏻
@RezaDorrani
2 ай бұрын
Most welcome
Many thanks! This is an awesome idea for visializing my lists! You rock Reza 🤙🤙
@RezaDorrani
Ай бұрын
Glad it was helpful!
Hello Reza, covering lots of concepts in such a seventeen-minute video is amazing. Thanks a lot, as always. 🙂🙏🏻
@RezaDorrani
2 ай бұрын
Glad you liked it!
Thank you, @RezaDorrani, for yet another excellently produced video. This really shows the advantages of leveraging the themes, especially with the new "Style and Theme" section for setting properties.
@RezaDorrani
2 ай бұрын
You're very welcome!
Thanks Reza for the wonderful video, love the modern control 👍👍
@RezaDorrani
2 ай бұрын
My pleasure!
Raza, this tutorial a gem! your clear explanations and step-by-step instructions make complex concepts seem simple. Whether you're a beginner or an expert, you're bound to learn something new and valuable from this content. Looking forward to more tutorials from you Raza! . Thank you
@RezaDorrani
2 ай бұрын
Thanks so much for the awesome feedback
Its awesome 🎉 specially modern controls
Amazing. Thank you for the video.
@RezaDorrani
2 ай бұрын
Glad you liked it!
Another great one. Thanks Reza!
@RezaDorrani
2 ай бұрын
My pleasure!
Wow you do it all the time. When I am looking for a "How to" you come through. Just what I needed and explained with great detail. Thanks.
@RezaDorrani
2 ай бұрын
You're very welcome!
Fantastic video. Thanks!
@RezaDorrani
2 ай бұрын
Glad you liked it!
Thank you so much Reza!
@RezaDorrani
2 ай бұрын
My pleasure!
🔥 thanks for sharing reza!
@RezaDorrani
2 ай бұрын
Awaiting feedback
💥💥Love what you did with the technologies.... simple.. but VERY effective. Thanks for sharing Reza 💥💥
@RezaDorrani
2 ай бұрын
Most welcome
WOW. means WOW!! you are too good brother!!
@RezaDorrani
2 ай бұрын
Thanks brother
Amazing job at explaining, I enjoy all your videos. I seem to be having a problem with the filter of this particular example. Would love to see how you did it!
@RezaDorrani
2 ай бұрын
Thanks so much. I have done multiple videos on filtering galleries. They are all placed in a playlist named gallery. I will recommend checking that.
I really want to ace this and become like you one day soon in future!
Woww😍😍 amazing gallery UI Reza. A new lesson learnt. I request you to make video on SQL i.e.., connecting SQL server to power apps ( creating views, tables, columns in sql server bringing into PowerApps). A sample power Automate flow with SQL connections. Thankyou 🎉
@RezaDorrani
2 ай бұрын
Glad to hear that! I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.
@hiteshkumar797
2 ай бұрын
@@RezaDorrani Sure 👍
Thank you for this amazing video, Reza
@RezaDorrani
Ай бұрын
My pleasure!
You Re marvelous brother ❤️ 🎉
@Reza my man… you are super duper. Got some nice ideas to improve my app in new fiscal year.
@RezaDorrani
2 ай бұрын
Glad to hear that
Reza, I love your designs for all your applications. It's very inspiring as I'm learning PowerApps, your tutorials and templates made my job easier. Just wondering is it safe to use "Modern controls" that are in "Preview" in your PowerApps? Is it possible that they can stop working or be a glitch while they are in "Preview"? Is it safe to use the modern control now for a person field column?
@RezaDorrani
2 ай бұрын
Glad you like them! It is safe to use them but there can be glitches while in preview. They wont stop working or be removed.
Thansks for this video.
@RezaDorrani
2 ай бұрын
Most welcome!
Thanks!
@RezaDorrani
2 ай бұрын
Thanks Ryan
Nice one Reza. Thank you
@RezaDorrani
2 ай бұрын
Welcome
Your videos are inspiring, Reza!
@RezaDorrani
2 ай бұрын
Glad you like them!
Thanks Reza. It's great to see the content that you provide. I was wondering that with the Modern Controls being almost available (GA I mean), is there a way that we can create our own custom themes (something specific/in line with our organization's design theme) and then make them available to all our users like the 8 out of box custom themes? Right now we can create some variable in OnStart event of App and then use but that we have to do everytime a new app is created. I am talking about something that can be placed somewhere in the Admin Centre and then all Canvas Apps in the environment or even the tenant gets access to.
@RezaDorrani
2 ай бұрын
Custom theming is a planned feature and will be rolling out soon. Wave 1 would be customizing theme at app level only
Thanks for the homework, teacher! 🙂
@RezaDorrani
2 ай бұрын
Any time
amazing as always brother
@RezaDorrani
Ай бұрын
Thanks so much
Your videos are the best.
@RezaDorrani
2 ай бұрын
Thanks so much!
Thanks for sharing
@RezaDorrani
Ай бұрын
Thanks for watching!
Amazing, Reza!
@RezaDorrani
2 ай бұрын
Thank You!
The new controls were on ice but after your video I pulled them out again. Hello Reza, as usual another wonderful video, where do you find the time! ;-) So I started the transformation to the new controls right away, but in nested galleries it all doesn't work so well. Changing field names takes a very long time, about 2 minutes. Reza, do you have any idea why the modern controls produce very poor performance in (nested) galleries? The new controls are going on hold again for a while!
@RezaDorrani
Ай бұрын
Glad you like them! I almost always avoid nested galleries as they lead to performance challenges in general. I have not tested them with modern controls so not sure if there is an impact there.
Excellent video 👍
@RezaDorrani
2 ай бұрын
Thank you very much!
Very great video Reza! Would it be possible to quickly click in the app to go to the specific list item to make changes?
@RezaDorrani
27 күн бұрын
Possible! You can use form control in power apps to allow user to make changes to item.
The best💯💯💯💯
@RezaDorrani
2 ай бұрын
Thank You
This video is GOLD for me. I have a model driven app that I would like to build more efficient and attractive user interfaces for in Canvas. Reza-future video request. Please consider a video on building a canvas app from multiple related Dataverse tables, including parent, child, grandparent, etc. relationships. I have many related tables in dataverse and still quite fuzzy on how to best add fields from them into the same canvas app. Just a suggestion. Love your work.
@RezaDorrani
2 ай бұрын
Great to hear! Did you check kzread.info/dash/bejne/lK2J16eodLTQmbg.html
@seang2012
2 ай бұрын
@@RezaDorrani I should have known you already had a vid! Perfect! Thanks!
Reza, that is an excellent video, but one question, if I add new projects into the Sharepoint, would that means this PowerApp gallery would append all of them? Is there a function to say filter projects and split screen based on the start date of the project? Eg. Only show projects that start this year. Sorry i am completely new to Power Apps so want to know the functionality of that :)
@RezaDorrani
2 ай бұрын
Welcome! Possible for sure. Check my playlist on power apps gallery. I have done numerous videos on filtering galleries.
Very nice job Reza. I have not yet started using modern controls, because not all of our customers had them. They might have them now, but what happens if I use modern control and publish it to someone who has not the modern controls???
@RezaDorrani
2 ай бұрын
Modern controls is available for everyone. Parts of them are GA and parts are in worldwide public preview
Awesome stuff as alaways! Thanks for making this video. In addition to this Reza, could you please create one more where we can potentially solve the problem of create dynamic columns in a gallery? Basically a matrix like turnaround with initial 3-4 columns as stattic columns and then right side will be all dynamic columns just like how power bi matrix is all about, all distinct values present in a column of a sharepoint list could be your no of columns to be created?
@RezaDorrani
Ай бұрын
Most welcome! Dynamic columns selection in gallery or table control is currently not an option.
thank you @RezaDorani for this, when are you releasing the card style gallery design (Part 2)? Would it be possible to also demonstrate the use of filters in Part 2?
@RezaDorrani
2 ай бұрын
I have shared the entire app (check description for details) I have done videos on card format earlier. Check for gallery designs.
This is so amazing. There are going to be a lot of Apps out there that look like your App 😊. This is totally responsive?
@RezaDorrani
Ай бұрын
Thanks so much. Yes, responsive
@RezaDorrani another wonderful video. Can you please make more videos about Model Driven apps?
@RezaDorrani
2 ай бұрын
Thanks! I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.
Another excellent demo on modern galleries brilliant delivery as well. I will definitely be implementing these techniques in future project. One quick question though..... In terms of Themes, do we have the ability to create Custom Themes yet? My organisation is very particular in terms of branding so would want us to use its colour themes in everything for consistency.
@RezaDorrani
2 ай бұрын
Thanks so much Doug. Custom theming is coming soon.
@dougydoe
2 ай бұрын
@@RezaDorrani Brilliant!! Can't wait for that to happen. Thanks
Thank you reza , amazing customization as usual,just one concern,does placing the control inside the container make the app responsive?
@RezaDorrani
2 ай бұрын
Not in a standard container. You would need to put in responsive containers + there is other work needed. I have a full playlist on responsive design which explains all the concepts.
@fadiahdab
2 ай бұрын
@@RezaDorrani thank you i am fully aware of most of videos
amazing video. How did you activate the suggestions while you type? If I type I get standard suggestions but not as many as you :)
@RezaDorrani
2 ай бұрын
What time in video did suggestions show up?
Thank you very much for your video. I can't find one video to take it as a bad example 👏 I had one question, how can I change the date format to "dd/mm/yyyy"? Somehow modern table control doesn't allow it. And other modern controls are the same.
@RezaDorrani
2 ай бұрын
Most welcome! Modern table control is currently in preview. Chaning formats is currently not supported.
@aqoraj
2 ай бұрын
@@RezaDorrani thank you for the reply. Keep up the good work! 😃
Excellent video, as always. Question. Why are you not using solutions when you develop an app?
@RezaDorrani
2 ай бұрын
Solution by default is ON so my apps auto land in solution
I love your editable grids. Can’t wait for the future controls. I’m curious what you like to do for mobile apps with editable grids on a screen. Do you like to have mobile specific screens in that case or do you just use one screen regardless of device and conditionally rearrange the formatting of the grid and headers for mobile view? I am finding myself doing the latter, but not sure if that’s the best approach for screens w grids where I want to show all the data on mobile view without horizontal scroll. Works fine but feels like a lot of calculation and formatting on the fly.
@RezaDorrani
2 ай бұрын
Thanks so much! Editable grids are not meant for mobile devices. Even with scrolling it's not a great user experience. I did do a video which shows responsive editable grid but one has to scroll in mobile view.
@SierraSlopes
2 ай бұрын
@@RezaDorrani Agreed on the experience. To that point, I am limiting it to view only, and conditionally wrapping all the fields based on screen width, so it looks more like what the new Table control looks like in mobile list view. But it’s a lot of conditional formatting and trickery. Ok thank you!
@RezaDorrani
2 ай бұрын
Thats a lot of work. Hopefully new table control grows more powerful in future.
@SierraSlopes
2 ай бұрын
@@RezaDorrani would that kind of stuff impact app performance, in your opinion? Thank you for all the replies!
@RezaDorrani
2 ай бұрын
@@SierraSlopes depends on the code used
tq reza 🎉🎉🎉
@RezaDorrani
2 ай бұрын
Most welcome
Hey, Reza! On my Power Apps i dont have this functions available yet. Do you now if that is normal and i need to wait for the pack be uploaded?
@RezaDorrani
2 ай бұрын
Under General settings of app, enable modern controls. It is available for all.
Looks great. The challenge I often face is the customer need for more columns that the screen width allows. I’ve built a horizontally scrolling experience but it feels less than fluid. Is this a more natural and easier to build concept now?
@RezaDorrani
2 ай бұрын
Table control is 1 option. I have also done videos on gallery as a grid where I have shown horizontal + vertical scroll.
@dmvogan
2 ай бұрын
Thx Reza. That’s what I’ve built but wish was simpler. The table control leaves a lot to be desired 🤔🙂
@RezaDorrani
2 ай бұрын
@@dmvogan Table is in preview. Give it time.
You are great sir How many years of experience you have to come to this stage in power apps and power automate
@RezaDorrani
Ай бұрын
Passion > years of experience
Thank you, @RezaDorrani, please tell How to do Leader Board App using power apps
@RezaDorrani
2 ай бұрын
I do not have a video reference on this scenario. I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted topic ideas get added to my backlog. Make sure to suggest this idea whenever the next topic suggestion post is out.
What can I do if want that my app shows an indication like change colour if the minimum quantity of the product is crossing or equivalent in canvas app the app is for inventory management
@RezaDorrani
2 ай бұрын
Conditional formatting was shown in this video. Similar concept but formula will be specific to your scenario.
Are modern controls worth enough to not be able to set up automated test cases on test studio?
@RezaDorrani
2 ай бұрын
I have done limited work with test studio so not sure
@elirdz
2 ай бұрын
@@RezaDorrani I understand, great content, as always. A lot of us appreciate all of your guides/tutorials!
is the modern controls free inside the 365 license or it requires a premium license?
@RezaDorrani
2 ай бұрын
Free. Controls which are premium have a diamond symbol next to them.
Hi Reza, This is really a goof Video. Can u pls let me know how to include the Multi- Line column in this view
@RezaDorrani
Ай бұрын
Same as any other column type.
@vipindhore7285
Ай бұрын
@@RezaDorrani thanks for your reply. I tried but I have a error of external class
@RezaDorrani
Ай бұрын
@@vipindhore7285 I have not faced that error. I will recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com
@vipindhore7285
Ай бұрын
@@RezaDorrani thanks, will post the same thanks
Can you do a video how to handle more than 10k records and get those items using the flow.
@RezaDorrani
2 ай бұрын
kzread.info/dash/bejne/ZJd_xdulo6rSgMo.htmlsi=Ri4isF7Nx8_MN-Zq
You do a really good job for Power Apps. Still hope that Microsoft will push more the imperfect controls. Themes must be customize-able. Can't be difficult to put the colors into a variable, so that many companies can use their colors. Hurry up MS, better stop AI therefore. Or let AI do the job quicker.
@RezaDorrani
2 ай бұрын
Custom themes for modern controls has been announced and is on the roadmap
Question how can I have my app present percentage from my list on sharepoint display on my power app
@RezaDorrani
27 күн бұрын
Not something I have tried so not sure
hi, i'm from Indonesian. can you teach us to create login button with Excel/Dataverse database. I'm very grateful if you help us
@RezaDorrani
2 ай бұрын
Thank you for the suggestion. My rule for making videos is set - "I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted topic ideas get added to my backlog. Make sure to suggest this idea whenever the next topic suggestion post is out."
Hello Reza, please did you type in the title names or is it automatically populated. I am finding it really difficult to follow. Please help urgently
@RezaDorrani
Ай бұрын
Title names for what? What time in video was this shown?
@paulaganbi5236
Ай бұрын
Thank you for your response Reza. From 04:21 minutes on the video…I am confused how the columns start getting populated with data. I have connected to my sharepoint list already. Please help
@RezaDorrani
Ай бұрын
@@paulaganbi5236 Thats my SharePoint list which already has data. SharePoint has out of box forms which you can use to input data.
@paulaganbi5236
26 күн бұрын
@@RezaDorrani thank you for your response Reza, i appreciate it. But when i follow your exact steps the columns and rows from my sharepoint table are not showing in the gallery. Please help Reza
@RezaDorrani
26 күн бұрын
@@paulaganbi5236 Video description has link to download entire app (members only - check description for details) It also includes a read me file on how to set things up.
He raza actually I have one task want face recognition in power apps can you help me
@RezaDorrani
2 ай бұрын
I have not done any work around this.
@shareqkhan7319
2 ай бұрын
@@RezaDorrani oo. i am trying from 4-5 days but no any solution get from r. n d 🙏🙏
@RezaDorrani
2 ай бұрын
I have no clue about this
How can I downlod this App? I have Silver Club
@RezaDorrani
Ай бұрын
Link is in community tab of my channel
@reex8243
Ай бұрын
@@RezaDorrani The video is from August 14, 2023. Are the sources still available for it? I urgently need them.
@RezaDorrani
Ай бұрын
@@reex8243 Video description has details on how to get it (members only - check description for details)
how to download , i have just subscribed
@RezaDorrani
Ай бұрын
All download links are in community tab of my channel
Hi there! Thank you so much for this video. So helpful in making my app look more modern. Question. Im having an issue with the person column image not showing. It was showing and now it no longer shows. Its the "ThisItem.PersonColumn.Picture" image. Any help would be much appreciated.
@RezaDorrani
Ай бұрын
Person column image does not work on mobile app. This has always been a limitation.
Caso alguém que fale português esteja com o mesmo erro que eu. A função exige que use " ; " ao invés de " , ". Segue como exemplo o código que utilizei: Switch( ThisItem.'Status da Proposta'.Value; "Em Aprovação"; RGBA(64; 73; 255; 1); "Aprovado"; RGBA(110; 140; 3; 1); "Recusado"; RGBA(247; 15; 15; 1) )
@RezaDorrani
2 ай бұрын
Thanks for sharing
Nice Video Reza. Loved the progress bar trick. 🫡
@RezaDorrani
2 ай бұрын
Thanks!