Power Apps MODERN Gallery Design | Step-by-Step Tutorial
HTML-код
- Опубликовано: 27 май 2024
- 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 
Наука
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!
Wonderful! Thanks for suggesting for the video idea.
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
@@kamozzi1 My only guess would be some experimental feature or preview feature that might be impacting it.
Thanks, is there a way to check and add them ?@@RezaDorrani
@@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
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.
You are so welcome!
Hello Reza, covering lots of concepts in such a seventeen-minute video is amazing. Thanks a lot, as always. 🙂🙏🏻
Glad you liked it!
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
Thanks so much for the awesome feedback
You’ve improved my power app skills soo much - you’ve helped me ton in my current project - thanks soo much!
You are so welcome!
Many thanks! This is an awesome idea for visializing my lists! You rock Reza 🤙🤙
Glad it was helpful!
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 🎉
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.
@@RezaDorrani Sure 👍
Thanks Reza for the wonderful video, love the modern control 👍👍
My pleasure!
I was in another world of PowerApps. Thank you so much for this tutorial 🙏🏻🙏🏻
Most welcome
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.
You're very welcome!
There are no better videos on RUclips than yours.
Thanks so much
Amazing. Thank you for the video.
Glad you liked it!
Another great one. Thanks Reza!
My pleasure!
Fantastic video. Thanks!
Glad you liked it!
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.
You're very welcome!
Thanks for sharing
Thanks for watching!
Thank you so much Reza!
My pleasure!
Its awesome 🎉 specially modern controls
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!
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.
🔥 thanks for sharing reza!
Awaiting feedback
WOW. means WOW!! you are too good brother!!
Thanks brother
💥💥Love what you did with the technologies.... simple.. but VERY effective. Thanks for sharing Reza 💥💥
Most welcome
Thansks for this video.
Most welcome!
I really want to ace this and become like you one day soon in future!
amazing as always brother
Thanks so much
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?
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.
Nice one Reza. Thank you
Welcome
Thank you for this amazing video, Reza
My pleasure!
Thanks!
Thanks Ryan
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.
Custom theming is a planned feature and will be rolling out soon.
Wave 1 would be customizing theme at app level only
@Reza my man… you are super duper. Got some nice ideas to improve my app in new fiscal year.
Glad to hear that
You Re marvelous brother ❤️ 🎉
Thanks for the homework, teacher! 🙂
Any time
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.
Great to hear!
Did you check ruclips.net/video/byUuEoDQjiU/видео.html
@@RezaDorrani I should have known you already had a vid! Perfect! Thanks!
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!
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.
Very great video Reza! Would it be possible to quickly click in the app to go to the specific list item to make changes?
Possible! You can use form control in power apps to allow user to make changes to item.
This is so amazing. There are going to be a lot of Apps out there that look like your App 😊. This is totally responsive?
Thanks so much.
Yes, responsive
Excellent video 👍
Thank you very much!
@RezaDorrani another wonderful video. Can you please make more videos about Model Driven apps?
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.
Thanks so much Doug.
Custom theming is coming soon.
@@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?
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.
@@RezaDorrani thank you i am fully aware of most of videos
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?
I have shared the entire app (check description for details)
I have done videos on card format earlier. Check for gallery designs.
amazing video. How did you activate the suggestions while you type? If I type I get standard suggestions but not as many as you :)
What time in video did suggestions show up?
Your videos are inspiring, Reza!
Glad you like them!
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???
Modern controls is available for everyone.
Parts of them are GA and parts are in worldwide public preview
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.
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.
@@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!
Thats a lot of work. Hopefully new table control grows more powerful in future.
@@RezaDorrani would that kind of stuff impact app performance, in your opinion? Thank you for all the replies!
@@SierraSlopes depends on the code used
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?
Most welcome!
Dynamic columns selection in gallery or table control is currently not an option.
Excellent video, as always. Question. Why are you not using solutions when you develop an app?
Solution by default is ON so my apps auto land in solution
You are great sir
How many years of experience you have to come to this stage in power apps and power automate
Passion > years of experience
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 :)
Welcome!
Possible for sure. Check my playlist on power apps gallery. I have done numerous videos on filtering galleries.
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.
Most welcome!
Modern table control is currently in preview. Chaning formats is currently not supported.
@@RezaDorrani thank you for the reply. Keep up the good work! 😃
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?
Table control is 1 option.
I have also done videos on gallery as a grid where I have shown horizontal + vertical scroll.
Thx Reza. That’s what I’ve built but wish was simpler. The table control leaves a lot to be desired 🤔🙂
@@dmvogan Table is in preview. Give it time.
Your videos are the best.
Thanks so much!
The best💯💯💯💯
Thank You
Nice Video Reza. Loved the progress bar trick. 🫡
Thanks!
Amazing, Reza!
Thank You!
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?
Under General settings of app, enable modern controls. It is available for all.
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
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?
I have done limited work with test studio so not sure
@@RezaDorrani I understand, great content, as always. A lot of us appreciate all of your guides/tutorials!
tq reza 🎉🎉🎉
Most welcome
is the modern controls free inside the 365 license or it requires a premium license?
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
Same as any other column type.
@@RezaDorrani thanks for your reply.
I tried but I have a error of external class
@@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
@@RezaDorrani thanks, will post the same thanks
Thank you, @RezaDorrani, please tell How to do Leader Board App using power apps
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.
Question how can I have my app present percentage from my list on sharepoint display on my power app
Not something I have tried so not sure
Can you do a video how to handle more than 10k records and get those items using the flow.
ruclips.net/video/2cKcylsGlPg/видео.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.
Custom themes for modern controls has been announced and is on the roadmap
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
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
Title names for what? What time in video was this shown?
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
@@paulaganbi5236 Thats my SharePoint list which already has data. SharePoint has out of box forms which you can use to input data.
@@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
@@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
I have not done any work around this.
@@RezaDorrani oo. i am trying from 4-5 days but no any solution get from r. n d 🙏🙏
I have no clue about this
How can I downlod this App? I have Silver Club
Link is in community tab of my channel
@@RezaDorrani The video is from August 14, 2023. Are the sources still available for it? I urgently need them.
@@reex8243 Video description has details on how to get it (members only - check description for details)
how to download , i have just subscribed
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.
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)
)
Thanks for sharing