Power Apps Tutorial - Responsive Screen with Gallery & Filters - Beginner to Advanced

[@georgegualda4262]

You out did yourself with this one. Excellent.

[@RezaDorrani]

That is a big compliment. Thank You so much 😊

[@amanchourasia1870]

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

[@RezaDorrani]

@@amanchourasia1870 I used to do that and the feedback I got was the videos are too long (30-40 mins)

[@amanchourasia1870]

@@RezaDorrani ohk i got u, just informed if possible then please explain logic and use of function too, because such videos are more helpful

[@RezaDorrani]

@@amanchourasia1870 It depends upon the type of video and whether its focused for beginners or intermediate. But I will keep this in mind. Thanks.

[@Michael_Burris]

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!

[@RezaDorrani]

Awesome! Great to hear

[@tgamradt]

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.

[@RezaDorrani]

You are most welcome and thank you so much for the amazing feedback.

[@necdetsaritas8722]

Whenever I need something, Reza comes to my rescue. Thanks.A great lesson

[@RezaDorrani]

Most welcome

[@gonzo405]

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!

[@RezaDorrani]

Thank You so much for watching and liking the video and thank you to your colleague for recommending my channel.

[@DuncanCunningham]

Thanks!

[@RezaDorrani]

Thanks Duncan

[@dijanatodorovic5099]

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! ❤

[@RezaDorrani]

It takes time and planning to make a good video 😊

[@frankclaushues9006]

Thanks

[@RezaDorrani]

Thank You!

[@nicoletimmons2344]

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

[@RezaDorrani]

Glad it helped!

[@sundar070494]

Thoroughly enjoyed it..i have been having my nightmares with building a responsive app and this gives a new dimension..thanks reza

[@RezaDorrani]

Most welcome

[@mannymorales977]

Excellent Content Reza, as always! You make it look so easy!

[@RezaDorrani]

Thank You so much

[@agnelonoronha404]

😮extremely professional gallery. Thank you

[@RezaDorrani]

Most welcome

[@al-omdaahmed3191]

OMG, you are a prince, i can't thank you enough

[@RezaDorrani]

You are most welcome!

[@gabrielinfante3528]

I'm from México and I have to Say this guy is awesome.

[@RezaDorrani]

Thank You

[@mannymorales7913]

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!

[@RezaDorrani]

Most welcome! Lets make all the apps awesome

[@mspowerassist]

Thank you @Reza for explaining the controls usage with real time scenarios. Kudos to you✋

[@RezaDorrani]

Most welcome & thanks so much for watching

[@youtube_Salim]

Thank you Reza, you are the best every time we discover new and great solutions

[@RezaDorrani]

Thanks Salim

[@akshaynm]

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. 🙏🏻

[@RezaDorrani]

You are most welcome

[@sherriangell6429]

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.

[@RezaDorrani]

There is no people picker column in Power Apps :) More or less it would be a combo box control.

[@nitro5apenas825]

Incredible, thank you Reza! 20 min of new knowledge for me, gz from Brazil!

[@RezaDorrani]

Thank You

[@justanormalguy2359]

Exactly what I was looking for! Thank yoj so much!

[@RezaDorrani]

Glad to hear that! Thanks for watching

[@turisabela]

Kudos, Reza! Great video as always! Thank's for sharing and congratulations!

[@RezaDorrani]

Thanks Isabela

[@frenamakenson9844]

Thanks for Sharing Reza, Always on Top !!!!

[@RezaDorrani]

Most welcome and thanks for the compliment

[@jamsoy07]

Wow.. I'm really looking forward for this solution and there you are explaining everything that bugging me for this past week

[@RezaDorrani]

Happy to hear the video covers most scenarios

[@MrJaviercillo0]

I love this video!! It has everything for me! Love so much this video! Thank you so so much!

[@RezaDorrani]

You are most welcome!

[@CrimsonML]

This was very informative and explained so well! Worked great also, thankyou very much!

[@RezaDorrani]

You're most welcome!

[@nihar4713]

this was brilliant, learnt a lot, very clearly explained

[@RezaDorrani]

Most welcome

[@imran002ali]

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

[@RezaDorrani]

Wow, thank you!

[@bernardnguyen5382]

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 !

[@RezaDorrani]

Glad to hear that! Thanks so much for watching and liking the video

[@khanmali68]

Thank you so much, Reza; you are the best, I have learned a lot from you.

[@RezaDorrani]

You are very welcome

[@ajingar]

Hi Reza, I am new to Power Apps, but this video is absolutely brilliant, with well explained examples and excellent design concepts. Many thanks!

[@RezaDorrani]

Great to hear!

[@ajingar]

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

[@RezaDorrani]

@@ajingar I am not aware of this issue.

[@ajingar]

@@RezaDorrani Not a problem, thanks for getting back to me at least.

[@jimmyjohn1523]

Thank you so much for this video. Much appreciated. You are the best!

[@RezaDorrani]

You're very welcome!

[@jray1429]

Excellent video. Thanks for sharing.

[@RezaDorrani]

Thanks for watching!

[@vitalii23_k]

Thanks, great job! I like your work.

[@RezaDorrani]

Thank you very much!

[@yarakoutainy6250]

Waw, excellent video !!! thank you *.*

[@RezaDorrani]

You’re most welcome

[@rickdesnoyers8978]

Another Great video, thank you again Reza!! Appreciated!

[@RezaDorrani]

Thanks Rick

[@mayharanascimento6509]

You is very smart !!!! Thank you for to share your knowledge

[@RezaDorrani]

So nice of you. Thanks for watching

[@tayebalassmahassansunhouri7864]

Amazing, thanks a lot Reza. Always coming with great ideas and making it simple, clear and practical.

[@RezaDorrani]

Glad you like them! Thanks so much for watching

[@MegaKumar0]

Great work Reza..

[@RezaDorrani]

Thanks

[@moyura2]

Thank you for sharing and teaching me new things, as you always do.

[@RezaDorrani]

Most welcome

[@kingvishall]

This one was such a nice and informative video Thanks

[@RezaDorrani]

Most welcome

[@guizot2010]

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.

[@RezaDorrani]

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

[@krisperkreme6021]

Just fantastic. Thank you for this!

[@RezaDorrani]

Most welcome

[@toanuk]

It is very good and clever way to do filter, Thank you.

[@RezaDorrani]

Glad to hear that! Thanks for watching

[@LearnPowerPlatformWithAbhinav]

Very nice. Keep it up Reza. Again a thumps to your efforts🙂

[@RezaDorrani]

Thanks a lot 😊

[@UncleBubba]

Great video, Reza. Thanks again.

[@RezaDorrani]

Most welcome!

[@ncar-ul6wd]

Thank you for your straight-forward advice. I love your creative use of the emojis 😊😊

[@RezaDorrani]

You are so welcome!

[@nikkijoy226]

This is fantastic. Thank you very much 👍👍👍

[@RezaDorrani]

Most welcome and thanks so much for watching

[@ally1708]

I really appreciate your Videos, thank you so much.

[@RezaDorrani]

Most welcome

[@WaliSayed]

Thank you Reza Jan. This helped me a lot.

[@RezaDorrani]

Most welcome

[@kv1325]

Thank you very much Reza for a such a nice explanatory video 🙂

[@RezaDorrani]

Most welcome

[@priyanka8718]

Thank you Reza ❤ ❤ very informative video well explained.

[@RezaDorrani]

Thanks Priyanka

[@janvanhaver6970]

How on earth dus you know that this was exactly the thing I had begun working on? 😂 Thx for another excellent video!

[@RezaDorrani]

I read minds 😇

[@jray1429]

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

[@RezaDorrani]

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

[@navendubhushan2509]

Appreciating your work it help me a lot !!

[@RezaDorrani]

Glad to hear that!

[@manusquall7770]

Thanks a lot for the share master Reza, is there any way to enable the click on each gallery items?

[@RezaDorrani]

You can add an icon control in container for gallery and onselect of it - write the click code

[@manusquall7770]

@@RezaDorrani you really rock! Thank you Mr. I try it with a button by making it transparent, thanks again 😊

[@dcs8993]

Hello! great video as always! Is there a way to view and download atttachments in this gallery?

[@RezaDorrani]

I have done videos on viewing attachments related to a grid like experience. Check kzbin.info/www/bejne/fnm7fJl4Zs50fpYsi=Tw4RZbydhuj3fbeF

[@renatorolim8778]

Great videos... Is it possible to make the appied filters when the comboboxes allow more than 1 selection? What could be the best solution?

[@RezaDorrani]

You can use countrows function on combo box selected items property

[@radiance7906]

Hats Off !!!! Will you pls share sample app/code that you explained in the video

[@RezaDorrani]

Thanks! If I share code, link is in description. If not, then I have not shared it at time of video. I reuse apps, update apps and delete apps. I do not have this app anymore. I may have started another video with this and probably shared the code. You would need to check the list of videos.

[@nagarjun572]

Great video and looking more like this video's in future which has more content and learning from basic level to advanced

[@RezaDorrani]

Thanks

[@PabloEgea]

Gracias por este gran aporte!! pero Disculpa, no puedo usar Filter en campos que sean tipo busqueda. comprendes?

[@RezaDorrani]

Sorry, I do not understand. I will recommend posting your issue with screenshots on the forums at powerusers.microsoft.com

[@dnordin847]

thank you for this video i want to replace txtsearchtitle in rest function and in search function because txtsearchtitle is not define in powerapps

[@RezaDorrani]

txtsearchtitle is name of text box control in my App. You can change it with whatever name you have for your text box.

[@dnordin847]

@@RezaDorrani Thank you very much

[@maihoang-zy7ko]

Great ! Thank you for your sharing !

[@RezaDorrani]

Most welcome

[@gilbertpradier]

@Reza, Thank you great video again. Just curious, is it good idea to add too many containers..?

[@RezaDorrani]

I wouldn't go more than 3-4 levels deep.

[@largpack]

Great design 👍 👍

[@RezaDorrani]

Thank you! Cheers!

[@contle4775]

Amazing Reza, thanks. Can you also do a video where emails are displayed in a gallery?

[@RezaDorrani]

Welcome! 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.

[@palanimathi4493]

Very usefull brother, Thanks

[@RezaDorrani]

You are welcome

[@jaydennewell4165]

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.

[@RezaDorrani]

Doc libs concept would be different. I have done videos on filtering doc libs as well. I will recommend searching for those videos.

[@adamshrinah2075]

Great video. Thank you

[@RezaDorrani]

Most welcome

[@naskoshefa]

Uau, many thanks. Its very usefull for me.

[@RezaDorrani]

Glad to hear that! Thanks for watching

[@VickneshWaran]

Good content as usual👍 How did you add applied filter buttons for multi select combo box?

[@RezaDorrani]

Simply added a gallery to show the list of selected items in combo box

[@Mafiatone]

@@RezaDorrani Great Video and I don't suppose you have a tutorial for this, I am strugling to get it to work.

[@tps1990]

This is gold

[@RezaDorrani]

Thanks

[@nantawatkomate7353]

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.

[@RezaDorrani]

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

[@ChrisCanada365]

For my Gallery I had to use: Filter( '', StartsWith(Title, TextInput1.Text) ) To get this to work.. and " " in the default. Great tutorial!! Love your stuff.

[@RezaDorrani]

Thanks for sharing!

[@marvinhoward4907]

Great video. Love the work, Professor Reza! For my gallery search to work, I had to use the following: Filter( DataSource, StartsWith( Text(ColumnName), TextInput.Text ) ) PowerApps Version: 3.24074.14

[@golfnutt8]

Wow Reza, this is outstanding! Can I add a record selector to edit an item?

[@RezaDorrani]

Welcome! Whats a record selector?

[@golfnutt8]

@@RezaDorrani sorry a means to edit a record

[@RezaDorrani]

@@golfnutt8 Possible! I have done many videos showing how to perform CRUD.

[@lufera]

you are the best!

[@RezaDorrani]

Wow! Thanks

[@sofiarubio2394]

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 .

[@RezaDorrani]

I have done several videos on gallery filtering including various types of columns. I will recommend checking those.

[@MexcalxD]

great video greatings from mexico

[@RezaDorrani]

Thanks Beto

[@PhuongTran-bh8rj]

Hello Reza, very nice explanation. Can you tell me how to get Emoji in Fx of Tex Property? Thank a lot

[@RezaDorrani]

Windows+. will open emoji keyboard. You can also copy paste them from the web.

[@doriangarschagen440]

Hi Reza, thanks for this video! Is it possible to download the content as a Member?

[@RezaDorrani]

Most welcome! This video was done prior to memberships being activated + I no longer have access to this app.

[@gunasekaran4288]

great Content Reza

[@RezaDorrani]

Thanks

[@rajeshjurukuntla7165]

Hi Reza Great tutorial !!! How can I make this app mobile responsive

[@RezaDorrani]

Check responsive design playlist on my channel

[@TatiannaSalas]

Thank you for your response. In your video you show a set of buttons on the top of the gallery that show which column has been filtered. The text of the button is an (x) Column Name: Filtered selected. I would like the width of my button to expand based on that text.

[@RezaDorrani]

I did this video a while ago and would have to try it out to know how to do that. I recommend posting your query on forums at powerusers.microsoft.com

[@oluwatobipaul6171]

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?

[@RezaDorrani]

I would advise to wait until modern controls go to GA

[@oluwatobipaul6171]

@@RezaDorrani Thanks

[@LapaConsult_Ex_Macraris]

Very nice and creative! Would you allow me to publish an italian version and maybe a french version of this tutorial video. Thank you!

[@RezaDorrani]

Absolutely! Go for it.

[@danielarteaga1869]

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

[@RezaDorrani]

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

[@danielarteaga1869]

@@RezaDorrani I will, thank you so much!!

[@MrDashingAshish]

❤ simply Amazing thanks

[@RezaDorrani]

Most welcome

[@TatiannaSalas]

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?

[@RezaDorrani]

Glad to hear that! I dont know what adjusting width to filtered text means.

[@paolovr1970]

Thanks Reza 🙏🙏🙏

[@RezaDorrani]

Welcome

[@yogeshm8344]

Hi RezaDorrani... Great work.. I have One suggestion in Filter Container you give a value of width 300 but Responsive app maybe use Parent.Width/3 or Parent.Width/4. Because User or Developer Reduce that Size 300 not Prefectly work in Mobile view width of 300 is maybe not possible.. Screen size 3,4,5 is width of 300 Prefectly work.but my suggestion is useParent.Width/3 or Parent.Width/4.

[@RezaDorrani]

Thanks for the suggestion. I wanted to keep video simple and not build an end to end responsive app.

[@yogeshm8344]

@@RezaDorrani Thanks for a Quick Response

[@prelicantdeezyjunior9]

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

[@RezaDorrani]

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

[@leventonder5014]

very nice :) thanks a lot.

[@RezaDorrani]

Most welcome

[@rolandbegaye]

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.

[@RezaDorrani]

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

[@emiliomadrid7285]

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?

[@RezaDorrani]

The gallery is connected to data source. As long as query is delegable, it can span beyond 2000

[@shubhamrathore8819]

Hi Reza, amazing video. I have a request. can you please make videos on PowerApps component framework (PCF). I would really appreciate your help.

[@RezaDorrani]

I have done no work with pcf

[@benidoink]

Hi @Reza, Great video :) I had a question, How did you input search icon on the Hint Text properties?

[@RezaDorrani]

Check video again. I show the exact steps how to do it.

[@benidoink]

​@@RezaDorrani sorry I over look it. Thank you

[@kavitanegi7616]

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.

[@RezaDorrani]

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.

[@zuah04881]

Hi Reza . In my Power Apps canvas setup, I’ve got a table preview, an edit form, and a search bar. When it comes to adjusting the price of a product in category A, I search for the category, display all listed products under A in the preview table, and then use the form to edit details like price or number of orders. Wondering if there's a more effective method?

[@RezaDorrani]

Not sure to be honest. All my methods I have shown in my videos

[@zuah04881]

Thanks Reza, Power apps still lacks functionality in areas like this my opinion. And also when It comes to complex financial amount group calculations example We have a pot of $500 limit and the let’s say we have spent 100, 50, 150 in Product 1, 2 , 3 respectively under category a at transactional level and we have to show remaining amount of $200 still in the balance left , it’s still difficult. I’m not sure if my problem is solved by power app, as I only have simplest examples.

[@RezaDorrani]

@@zuah04881 I do not have any specific references on this. I recommend checking on forums in case someone has done something similar powerusers.microsoft.com/

[@aparnasarkar5688]

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!

[@RezaDorrani]

Gallery is a standard control. Check gallery properties. There is a setting for it.

[@WALIURRAHMAN-g8q]

Thank you!

[@RezaDorrani]

You're welcome!

[@faisalkhayer7081]

Hi Reza, in the video at 15.19, the gallery items, you input for the search function, "crd4a_name" where has that come from? Obviously it doesn't work when I type that in, but I can't work out what it is on my app. Please can you clarify? Following my post, I think I worked it out, it's the name of the column, in my app, it is the title. Absolute top video Reza, you are the BEST!!

[@RezaDorrani]

Hey thanks for following up and thanks for watching and liking the videos