Power Apps Tutorial - Responsive Screen with Gallery & Filters - Beginner to Advanced
Vložit
- čas přidán 10. 07. 2024
- Welcome to this step-by-step Power Apps tutorial for beginners to advanced users. I will cover various topics related to building Canvas Power Apps - How to build a responsive screen in Power Apps, how to connect to a data source, how to build a responsive Gallery control and apply multiple filters to gallery data.
Firstly, I will show you how to create responsive canvas Power Apps and how to work with responsive design screen templates. I will also demonstrate how to use horizontal and vertical containers, which are essential tools in creating responsive layouts.
I will guide you through creating a responsive gallery control and filter panel and show you how to apply multiple filters to a Power Apps gallery. The filter panel (container) will allow users to make selections to search or filter gallery data. Additionally, the applied filters container will highlight the applied filters and users can remove specific filters or reset the filters if desired.
You will learn how to design PowerApps gallery to showcase it as a Table with responsive headers & how to search and filter power apps gallery data.
I will leverage Microsoft Dataverse as a data source. However, the techniques I will demonstrate can be applied to any data source, and I will also show you an example with SharePoint as a data source.
Power Apps for beginners playlist:
• Power Apps for Beginners
My Responsive Design Playlist: • Power Apps Responsive ...
Working with Power Apps Galleries + Filters
• Power Apps Gallery Con...
#PowerApps #ResponsiveDesign #PowerPlatform #Dataverse #powerapp #tutorial
Table of Contents:
00:00 - Introduction to Power Apps Responsive Design Tutorial with Gallery & Filter Containers
00:49 - Build a Responsive Power App
01:31 - How to build a Responsive Screen Header
03:40 - Build Responsive Gallery + Filters using containers
05:03 - New drop shadow effect for Power Apps containers
06:37 - Connect Power App to a Dataverse Table
07:13 - Create Responsive Gallery & showcase like a Data Table
10:05 - Add Responsive Column Headers for Power Apps Gallery
12:31 - Show and Hide Power Apps responsive container controls
13:40 - Enable responsiveness for a Power App by disabling scale to fit
13:59 - Add Filters container for Power Apps
14:48 - Reset Filters Button
15:03 - Search function in Power Apps Gallery
15:38 - Highlight Column Header when Filter is applied
16:19 - Multiple Filters in Power Apps Gallery
19:54 - Show applied filters in Power Apps
23:09 - Responsive Power Apps Gallery with Filter Panel examples
24:12 - Subscribe to Reza Dorrani Channel
🤝 Let’s connect on social:
🔗 Reza Dorrani LinkedIn: / rezadorrani
🐦 Reza Dorrani Twitter: / rezadorrani - Věda a technologie
You out did yourself with this one. Excellent.
That is a big compliment. Thank You so much 😊
@@RezaDorrani hi reza just a feedback, what I observed that please also explain the reason , use and logic behind code ,
As you just write the code in one go so sometimes we don’t understand why it is used,
For example you used filter in search function, later on I realised that when search function is used on two cards that y u used filter, my point is please also tell the reason y u used which code of function.
@@amanchourasia1870 I used to do that and the feedback I got was the videos are too long (30-40 mins)
@@RezaDorrani ohk i got u, just informed if possible then please explain logic and use of function too, because such videos are more helpful
@@amanchourasia1870 It depends upon the type of video and whether its focused for beginners or intermediate. But I will keep this in mind. Thanks.
It's always amazing to see how you take only things that I already knew but combine them to create something completely new. As with most professions, it's not the tools. It's knowing how to use them and you are surely a master with the PowerApps toolset. Thanks once again, Reza.
You are most welcome and thank you so much for the amazing feedback.
Whenever I need something, Reza comes to my rescue. Thanks.A great lesson
Most welcome
I've been working with and creating power apps for my current company for a few months now, and this video taught me a ton of things I can go and apply. Thank you!
Awesome! Great to hear
Your videos were suggested by a colleague working in another state and they weren't kidding when they said you'd be a good source to learn from!! I followed your video and created my first Power App! I had issues with the combo boxes connecting to columns other than the first column in the excel table I created but I got past it by creating another excel table with a list of choices for Priority and Status. I'm sure I'll figure it out later.
Thank you for putting this together! I learned so much! I'm looking forward to deep diving into the Power platform world!
Thank You so much for watching and liking the video and thank you to your colleague for recommending my channel.
Great Great Tutorial Reza, not only the main content is useful but also the small configuration setting to make the containers more user friendly. Thanks a ton as always. 🙏🏻
You are most welcome
Incredible, thank you Reza! 20 min of new knowledge for me, gz from Brazil!
Thank You
Amazing, thanks a lot Reza. Always coming with great ideas and making it simple, clear and practical.
Glad you like them! Thanks so much for watching
Exactly what I was looking for! Thank yoj so much!
Glad to hear that! Thanks for watching
Thank you @Reza for explaining the controls usage with real time scenarios. Kudos to you✋
Most welcome & thanks so much for watching
Kudos, Reza! Great video as always! Thank's for sharing and congratulations!
Thanks Isabela
Another Great video, thank you again Reza!! Appreciated!
Thanks Rick
Excellent Content Reza, as always! You make it look so easy!
Thank You so much
Reza, as always a great learning presentation; so much material that can turn your app from ho-hum to awesome! Thanks for producing and sharing!
Most welcome! Lets make all the apps awesome
Thank you so much for this video. Much appreciated. You are the best!
You're very welcome!
I love this video!! It has everything for me! Love so much this video! Thank you so so much!
You are most welcome!
Thoroughly enjoyed it..i have been having my nightmares with building a responsive app and this gives a new dimension..thanks reza
Most welcome
Just fantastic. Thank you for this!
Most welcome
This video was awesome. I quickly learned what I came for but then stuck around and just kept learning trick after trick that I wouldn't have thought of doing... Thank you for sharing your knowledge!!!
Glad it helped!
now you did this, after i had to do all of this "by hand", having exactly the same objective like in this your example!! 😭😅 took me hours and hours to align all the widths and x of headers and records for all the columns in tables, in all the screens, to not move around...but, in the name of making our lives easier in future, many thanks, once again! ❤
It takes time and planning to make a good video 😊
Thanks for Sharing Reza, Always on Top !!!!
Most welcome and thanks for the compliment
Thank you Reza, you are the best every time we discover new and great solutions
Thanks Salim
OMG, you are a prince, i can't thank you enough
You are most welcome!
Always amazing and excellent, Thanks you Reza for this video ! i think it allow for every developper in PowerApps to be most confortable with containers and have to use it !
Glad to hear that! Thanks so much for watching and liking the video
Thank you for sharing and teaching me new things, as you always do.
Most welcome
Thanks, great job! I like your work.
Thank you very much!
I'm from México and I have to Say this guy is awesome.
Thank You
Great ! Thank you for your sharing !
Most welcome
This was very informative and explained so well! Worked great also, thankyou very much!
You're most welcome!
Thank you so much, Reza; you are the best, I have learned a lot from you.
You are very welcome
Appreciating your work it help me a lot !!
Glad to hear that!
Great video, Reza. Thanks again.
Most welcome!
Thank you for your straight-forward advice. I love your creative use of the emojis 😊😊
You are so welcome!
Thank you Reza Jan. This helped me a lot.
Most welcome
I really appreciate your Videos, thank you so much.
Most welcome
this was brilliant, learnt a lot, very clearly explained
Most welcome
This is fantastic. Thank you very much 👍👍👍
Most welcome and thanks so much for watching
Wow.. I'm really looking forward for this solution and there you are explaining everything that bugging me for this past week
Happy to hear the video covers most scenarios
Thank you very much Reza for a such a nice explanatory video 🙂
Most welcome
Hi Reza, I am not sure what to say but EXCELLENT!! 😊 this video explain a lot of pieces and of course, thank you for sharing your knowledge!!
Wow, thank you!
you are the best!
Wow! Thanks
You is very smart !!!! Thank you for to share your
knowledge
So nice of you. Thanks for watching
Thank you Reza ❤ ❤ very informative video well explained.
Thanks Priyanka
Uau, many thanks. Its very usefull for me.
Glad to hear that! Thanks for watching
Great video. Thank you
Most welcome
You always impress! Wow!! If I could figure out how to get my people picker column to work with the rest of the Search/Filter, I would be 1/100 as cool as you. I am open to ideas. Everything I have tried has killed the entire gallery.
There is no people picker column in Power Apps :)
More or less it would be a combo box control.
Excellent video. Thanks for sharing.
Thanks for watching!
Very nice. Keep it up Reza. Again a thumps to your efforts🙂
Thanks a lot 😊
This one was such a nice and informative video
Thanks
Most welcome
Thanks!
Thank You
❤ simply
Amazing thanks
Most welcome
It is very good and clever way to do filter, Thank you.
Glad to hear that! Thanks for watching
Thank you!
You're welcome!
Quality video Reza! You really are making working with PowerApps a much easier process so thank you very much. Going to look into Dataverse tables but i fear the license cost could make it not possible in our environment
Thanks Liam. I have more coming on Dataverse
Great work Reza..
Thanks
I appreciate the effort you put into creating such high-quality content. Your presentation style is engaging, and the visuals complemented the explanations perfectly, making it a pleasure to watch and learn from. Thanks and still waiting for your autograph.😉
Thank You so much Samit. Whenever we meet, a selfie is confirmed.
very nice :) thanks a lot.
Most welcome
great video greatings from mexico
Thanks Beto
Great video and looking more like this video's in future which has more content and learning from basic level to advanced
Thanks
Hi Reza, I am new to Power Apps, but this video is absolutely brilliant, with well explained examples and excellent design concepts. Many thanks!
Great to hear!
@@RezaDorrani Hi Reza, I was inspired by this excellent video to create a similar looking Screen, based on the 'Header, main section, footer' layout that you selected. In the main section, I inserted a gallery like you, then edited this gallery to add a horizantal container (just like your 'TaskDataContainer'). I added fields to this container as you did. I also added a checkbox control right at the beginning of this container, so I can select any particular row. Now, when you have a normal gallery (not with a container inside) and have a checkbox control, you can have a label outside of the gallery which can count how many records we have selected using the checkbox. The formula for that would be: CountRows(Filter(Gallery1.AllItems, Checkbox1.Value)) - so this would give you a count of how many records we have selected. This works fine. But in my example, based on your demo, where we have edited the gallery and added a container (TaskDataContainer) - if we add a checkbox there, and then use this formula, the label just displays the total number of records (8 in my case as I have 8 records in total), even though I have only selected just one checkbox. I have recreated the issue on totally separate screens also starting from scratch. It seems that whenever we have containers within galleries, it does this. Are you aware of this issue or have come across it before? If so, do you know of any clever formulaic way to overcome this issue? Or is this one of these 'features' that we just have to accept, and not have containers for each row of data? Thanks in advance.
@@ajingar I am not aware of this issue.
@@RezaDorrani Not a problem, thanks for getting back to me at least.
Very usefull brother, Thanks
You are welcome
Thanks Reza 🙏🙏🙏
Welcome
Great videos... Is it possible to make the appied filters when the comboboxes allow more than 1 selection?
What could be the best solution?
You can use countrows function on combo box selected items property
Thank you
You're welcome
Thank you for this incredible information!! Just a quick question - i have used containers and everything is well and inspace when i preview the apl, but after i publish the app it zooms in( some part of the app are not visible and there's a space in my gallery ).
Thanks.
I have not come across this issue and hence not sure what is the cause for your issue. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hey Reza! Thank you for this video. It is fantastic, and I appreciate your work! Could you apply this technique to a SharePoint Document Library if you pulled all the folders to the top level and then applied text or choice columns? I've tried but keep running into a problem, and I would greatly appreciate any help.
Doc libs concept would be different. I have done videos on filtering doc libs as well. I will recommend searching for those videos.
Excellent video, drop-shadow looks great! Curious though, I tested the layout of Text Labels and other elements, and it doesn't allow you to use Y coordinates eg. Icon1.Y + Icon1.Height + 10. It just stays where it is. Do you know of any way around this, or is this because of the type of containers used?
In containers, X and Y is controlled by parent container (positioning of controls)
@Reza, Thank you great video again. Just curious, is it good idea to add too many containers..?
I wouldn't go more than 3-4 levels deep.
How on earth dus you know that this was exactly the thing I had begun working on? 😂 Thx for another excellent video!
I read minds 😇
@@RezaDorraniDo you use collections when reading multiple minds❓ Also, are searches of that data source delegable❓ I guess it might matter what type of mind is being searched
@@jray1429 I did not understand the first question.
I have done many videos on delegation and searching. “That data source” - depends on what that is. If SharePoint then No.
Great design 👍 👍
Thank you! Cheers!
Hi Reza, another amazing content. I really appreciate your work and it has helped me out with all my issues so far. I am stuck at a scenario which i could not find in your tutorials so far. I need to add a next item and previous item option in my display screen which take current item to display from a gallery which is getting data from a SP list. Since my gallery and display item are in different screen and I am struggling with it. Any suggestions on this? I would really appreciate it.
I do not have a video reference on this scenario and would have to try it out to provide guidance. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Hi Reza,
How could you make buttons in the remove filter container above table header flexible width in your tutorial? I tried to follow along with your tutorial but my buttons width are fixed, which making them are hard to read when their text are long.
Thank you for your excellence tutorial. I really love the way you teach, I’ve learned so many new things from it.
Thanks!
This video is the best reference I have. I recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com
Gracias por este gran aporte!! pero Disculpa, no puedo usar Filter en campos que sean tipo busqueda. comprendes?
Sorry, I do not understand. I will recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Thank you very much for sharing your knowledge, I have learned a lot watching your videos. Query, does this only apply to display a maximum of 2000 lines?
The gallery is connected to data source. As long as query is delegable, it can span beyond 2000
Hello Reza, I have been watching your videos and they have been I life saver. I have a question regarding Applied filters section. How can I adjust the width of the buttons to match the filtered Text?
Glad to hear that!
I dont know what adjusting width to filtered text means.
Thanks for yet amazing video Reza !!
Can I use it with Dataverse table which has more columns i.e. more than 10 columns? Will the data gallery show the horizontal scroll bar? And how will responsive design respond in case we increase or decrease the screen size?
I did do some video where I showed horizontal and vertical scroll, just do not remember which one.
Thank you so much for this excellent demonstration. The headers for the gallery a great, but I find that if you have more than three or for columns, the column headings don't stayed aligned with the gallery columns in smaller form factors, such as tablet. This is because the TemplatePadding of the galley puts padding on right and left, too. So the gallery heading container is not flush with the gallery template. Even if you try to put the same padding into the gallery heading container, they stop behaving the same once you get to point where minimum widths for the labels are cut off.
Most welcome!
Its been a while since I did this so do not remember the specifics. That might very well be a limitation or there could be some advancements in containers that may help. I would recommend checking or posting your query on forums in case someone has done something similar
powerusers.microsoft.com
Hi Rezza, awesome video! I have a question - how do you get the modern scroll bar for your gallery? I still get the old scroll bar. Please let me know as I have been looking for a solution for this for ages. Thanks a ton!
Gallery is a standard control. Check gallery properties. There is a setting for it.
great Content Reza
Thanks
Thanks
Thank You!
Hi Reza, I enjoyed this video very much. Thank you for the upload. How would you make a scroll bar if you have more than 4 filter options in a container? Yes, it scrolls vertical but is there a way to make custom horizontal scroll bar if there's more than 4 filters.
I believe there is a way and I had seen it on forums. I do not have a specific video on it. Check or post your query on forums powerusers.microsoft.com
Excellent
Thanks
Thank you Reza. The UI is so pretty. I will still contemplating using the modern control for new app that will be move to production. Do you think it is advisable to use now or wait till later?
I would advise to wait until modern controls go to GA
@@RezaDorrani Thanks
Hi Reza! Great video :) What if the column is a lookup column? What should be the syntax? I am able to use the lookup function but the text input in the search bar has to be exact .
I have done several videos on gallery filtering including various types of columns. I will recommend checking those.
Hi Reza thanks for the video but I can't get the patch to work along with the container
I have not come across any issues with this.
I recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com
Nice Reza! I like your use of emoticons to show a filter is applied. I use an if statement on the Icon property to switch to a filled filter icon and an open one. But this makes it more clear which columns are filtered. Am I seeing it correctly you are using a tornado icon though?😂
Yes, it's a tornado 🤣
I wish there was a better emoji
question on filtering and search from the video.. when inputting the search & filtering function in the gallery the header/data is coming up as invalid argument type (control) expecting a text value instead. So not sure what I am missing or doing incorrectly.
I have not come across the mentioned issue and hence not sure what the fix for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Great
Thanks
Awesome content as usual ! Just a quick question - is it possible to add a horizontal scroll to the task gallery along with the vertical scroll ?
Possible! I think I did show it in one of my grid videos.
@@RezaDorrani Thank you, it took a little time but was able to figure it out
Reza, for the filtering, is it possible to filter the value from its child table? My child table is a nested gallery under the parent gallery.
Probably possible but not something I have come across or tried
Reza, thank you for the video. How would I be able to make the gallery items clickable if a user wanted to go in and edit the record?
Add an icon or button in gallery and on select of it, navigate to your screen to edit the record.
This is awesome Reza, thank you always for the great content, I have a problem when using the Choices function in the combo box, it gives me back an error with the not valid arguments... I don't know if it is related to the sharepoint list column properties. Regards!!
Column must be of type choice in SharePoint.
I have not come across the mentioned issue and hence not sure what the reason for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
@@RezaDorrani I will, thank you so much!!
awesome nice
Thanks
Hey Reza, Great video! I really like how it looks and once you build it once its easy to reuse/maintain.
Question - Is there anyway to keep the gallery as a flexi height gallery? Id like to have the gallery items sized based on the label's auto-height feature to show all the text in that label. Thanks in advance!
Most welcome!
Not sure if this would work with flexible height gallery.
@@RezaDorrani any workaround for this appreciate your efforts thank you.
@@manjunathpatil6785I am not aware of any
@@RezaDorrani thank you for your response l learned responsive design by watching your vedios, I somehow did this like below
1) Enable auto height for labels
2) Refer Max height of each label's in container height by adding with it's Y axis value like max( Label1.Y+Label1.height, Label2.Y+Label2.height)
3)set flexible gallery height to container height.
With the above we can keep a flexible height gallery with the label's auto height enabled to show all the text in that label.
Hi Reza! I am trying to add the power app with the table and a filter as you created in my Power bi desktop. the table appears but the filter does not. can you guide me why that might happen?
Power BI? This video is on gallery filtering. I have a playlist on power Bi you can check. I recommend posting your query/issues with screenshots on forums at powerusers.microsoft.com
Reza, you are now my favorite bookmark for learning Power Apps and as always, this video was very helpful for a project I'm working on right now. The one thing I could not get to work is the StartsWith filter query against a SharePoint source. In the video you were using "Search" which I assume was against a Dataverse database. Is that correct? Do you have the delegable filter query you can use against a SharePoint list?
Thanks Kurt.
Against SharePoint, it is the startswith function. I have done various videos on filtering. I will recommend checking those.
@@RezaDorrani With a modern text input control and a SP data source, this is what works well for my use case: Filter( 'NameofDataSource', txtSearchTitle.Value in Title )
Good content as usual👍
How did you add applied filter buttons for multi select combo box?
Simply added a gallery to show the list of selected items in combo box
@@RezaDorrani Great Video and I don't suppose you have a tutorial for this, I am strugling to get it to work.
Thanks a lot for the share master Reza, is there any way to enable the click on each gallery items?
You can add an icon control in container for gallery and onselect of it - write the click code
@@RezaDorrani you really rock! Thank you Mr. I try it with a button by making it transparent, thanks again 😊
Hi @Reza, Great video :) I had a question, How did you input search icon on the Hint Text properties?
Check video again. I show the exact steps how to do it.
@@RezaDorrani sorry I over look it. Thank you
Very nice and creative! Would you allow me to publish an italian version and maybe a french version of this tutorial video. Thank you!
Absolutely! Go for it.