Power Apps Flexible Height Container - Expand and Collapse Nested Gallery

Подписаться 163 тыс.

Просмотров 49 тыс.

50% 1

In this video, you will learn how to use the PowerApps flexible height gallery. This control allows you to have dynamic content sizes for each row or template in your gallery. You can also take it further by using controls such as icons and buttons to expand and collapse the sections. Also, with the flexible height gallery you can show and hide children or related items using a nested gallery. The flexible height gallery is a great control to add to your skillset.
0:00 Power Apps Flexible Height Gallery Video
1:54 Demo of a Flexible Height Gallery showing and hiding dynamic data
2:55 Flexible Height Gallery with a nested gallery with Expand All and Collapse All
4:40 Insert a Flexible Height Gallery and overview of the layout options Social and News feed
6:55 Understanding the Y properties of the controls and template padding
9:49 Using the Concat function to show all of the values from a multiple select choice column in PowerApps
11:30 Stacking controls and having them depend on the auto height label
13:02 Using a check box control to change the text and size of the label
20:42 Putting a nested gallery inside the parent gallery to show child or related data. Then using a toggle control to show and hide it.
22:15 Why you cannot use a variable to control the show and hide behavior and how to patch the data source to achieve the behavior you want. Also, how UpdateIf works for Expand and Collapse.
25:48 Quick thoughts on using Blank layout.
Power Apps Consulting and training at www.PowerApps911.com

Наука

Опубликовано:

16 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@user-yt6jl2qk4v 2 месяца назад

Thank you, Shane! I truly appreciate your videos - they are so easy to follow! I've been trying to figure this out for several hours and you came to the rescue!

@ShanesCows 2 месяца назад

You are so welcome!

@mintebere9741 Год назад

Hi Shane, Great video as always. Just wanted to share a secret on another option with a toggle. 1) In the Toggle inside your gallery. Set the below properties as below - default: false - Reset: varResetToggle (I just created a variable as I can't enforce reset outside of the gallery). 2) In the OnVisible property of the screen. Set(varResetToggle, true); Set(varResetToggle, false) - We just need to switch on and off the reset property of the toggle through a variable . 3) In the OnSelect property of 'Expand All' button. Set(varResetToggle, true); Set(varResetToggle, false) - We just need to switch on and off the reset property of the toggle through a variable . The above steps will avoid creating a new column at the backend and using the patch formula. Thanks, Minte

@ShanesCows Год назад

That is a cool Idea Minte. :)

@pequadcob2009 Год назад

Love that colloquial mispronunciation of the word "height" as you say "heighth" such as the word "width".

@ShanesCows Год назад

I mispronounce so many words it isn’t funny. 😁 I didn’t know this was one of them. I will add it to the list. Poem is the worst. 😂

@natebig 2 года назад

How did you know that I was trying to get this to work LAST WEEK? Thanks for posting great content as usual!

@ShanesCows 2 года назад

I am always watching. 😂

@antonioverga1541 Год назад

You could also use a variable as an alternative to the expand/collapse all. That’s how I did it. I liked the option of the toggle/checkbox for individual expand / collapse. Will use it. In my experience, when you use a child gallery to expand the height of the parent galley, you’ll see an strange behavior (delay to expand). This is caused to the time it takes for PowerApps to process the data and calculate the number of lines in your child gallery. The workaround I found was to create a transparent label with some data that will “mimic” the height of the child gallery. This label will process much faster and expand the parent gallery while PowerApps is still processing yogur child gallery. It’s not a big deal but improves the user’s experience.

@ShanesCows Год назад

Awesome. Thanks for Sharing.

@TheFunkBros Год назад

Hi Shane, this was good and helped me fix one project, but not exactly what I needed for another one which is a gallery within a gallery and right now it's not working and I followed your instructions as best as I could to substitute gallery for the list

@hermannslaender Год назад

I have no idea how you know what I currently need to know for my apps. So often it happens it comes right in time for me to use the content for the current project. This time the video came when I just had programmed this. Interesting to see that I found exactly the same way to solve it than in this video. Thanks for sharing all those good to follow videos.

@ShanesCows Год назад

Andreas I have Chewy secretly spying one you. 🐶😂

@martinargimon730 2 года назад

Excellent Video.. MAny Thanks Shane. Cheers !

@ShanesCows 2 года назад

Glad to help. 😀

@brunoda4284 Год назад

Hi Shane.In my development environment I have installed about 4 different portals. Inside those portals I created scripts that make use of Liquid and Fetch XML to retrieve records from dataverse tables that are inside solutions ( each Portal has it’s own solution ). Those scripts were working properly. About 2 days ago, I migrated those portals to a new environment (production), to do that, I first moved the solution, then the data, then I migrated the Portal using the NuGet, data migration tool. When I did that, all those Portals config and dataverse solution schema and data where migrated with success. Then, I created a new Portal in the prod environment selecting data source as one of those migrated Portals to the prod environment. All was going well, but then, while I was adjusting a Fetch XML script on a Portal inside the production environment, the script stopped working properly and the Portal crashed, and I lost access to it. I was able to restart the Portal and recover access to it. The problem is that, from then on, all available scripts that make use of Fetch XML inside the portals ( inside the development environment as well ) stop work properly as soon as I sync a page that has a script of fetch XML inside. I don’t know what is causing this. Portals installed in different environments shouldn’t share any data/config Any one is facing an issue like this or knows any solution, please let me know.

@nikkijoy226 Год назад

Thank you very much for this!!!

@ShanesCows Год назад

You bet!

@three6hunter Год назад

you've just made my life alot easier

@ShanesCows Год назад

Awesome!!!

@oluwatobiyusuf Год назад

Thanks for this awesome content. It came in handy

@ShanesCows Год назад

Glad to hear it!

@Saif_Ali_Khan_1301 Год назад

Awesome as always

@ShanesCows Год назад

Thank you so much 😀

@frenamakenson9844 2 года назад

Thanks for sharing man

@ShanesCows 2 года назад

No problem 👍

@paolovr1970 2 года назад

Thanks Shane

@ShanesCows 2 года назад

Happy to help

@EVSTN25 2 года назад

Thanks for sir... Most helpful your videos very nice explain all videos ... Thanks so much sir.. From Tamilnadu..

@ShanesCows 2 года назад

Thanks and welcome. I hope you have a great day. 🐶

@ZenMonkeyDigital Год назад

Another great video. Keep them coming! You're very much appreciated. I have a question though, my flexible height gallery template looks fine in preview mode, but the published app the templates overlap. It appears that the height isn't being calculated correctly. Not sure what to do.

@utilisemedia Год назад

Thanks for the vid. How do we achieve same if the above field is empty?

@ShanesCows Год назад

I don't know, I didn't think about that scenario. Hopefully you can come up with something If(IsEmpty(YourField), [ "No Items"],YourField) Something in that ballpark?

@tomasgazsi6608 Год назад

Hi Shane, another greate video! I want to ask, is possible to make something similar with width? I need something like vertical gallery with flexible width. Or gallery with flexible temple size? Thanks.

@frankromer3325 8 месяцев назад

I think your videos are just awesome and very easy to follow... Unfortunately, I can't get along this time. I need a dynamic gallery row and fail at the height of the line! The elements are dynamic (as far as this feature exists) but the height is not dynamically adjusted... is there currently (1 year after this video) an bug? I also can't add controls like sub-galleries, they always end up in the root of the screen

@McIlravyInc Год назад

If you don't have a nested gallery, how can you do expand/collapse all without patch? Thanks

@jonashahn35 6 месяцев назад

A really good tutorial. But if I use the flexible Height Gallery, i cannot use the datepicker. It won't change its value if i select a date. Do you have an idea or workaround?

@ShanesCows 6 месяцев назад

Weird, I just tested and I can change the date inside of a date picker when it is inside of a gallery. 🫤

@jonashahn35 6 месяцев назад

@@ShanesCows It's really strange. I've tried everything. Could it be related to the fact that I'm using Dataverse for Teams as a data source? Whether it's modern controls or classic controls, it immediately takes the value of the data source again. In a normal gallery, everything works fine. Thank you anyway.

@proasethkosal1394 6 дней назад

Hi Shane! really like your video! May i ask how can i fix a hidden column taking up space in powerapp? As it doesn't look neat at all and i've been struggling with this!

@ShanesCows 5 дней назад

If Visible is set to false it shouldn't be taking up space.

@meryemgazanayi5665 11 месяцев назад

how can i use this to hide a ligne from gallery when i click on hide icone also with a condition of other column (empty or not)

@caseyshore3362 Год назад

I've used the flexible height gallery to try to design a chat log, but unfortunately it's not flexible at all. I simply sets all items to the same height which is the high of the biggest item in the gallery.

@videobewerker111 Год назад

Why can't I add a lookup field (not valid)? I wanted also a responsive app so I placed a flex gallery in a flex container but the flex container has a alignincontainer and i don't know what to put in it????

@minnies83 2 года назад

Who is Marc? Does he has a RU-vid-Channel, too? Very interesting topic. I have many ideas how to use this. Thank you very much. ❤

@ShanesCows Год назад

He doesn't but I sent him a link to this so you would see. 😍

@JackalBruit 10 месяцев назад

thank u so so much for the HTML suggestion slipped in there! my need: ENG dept fills out a varying length "Description" column & my boss wants this field to be viewed in a spreadsheet style list gallery my boss suggested the flex height galleries ... but i didnt think there was an option for a flex height text box which! if there is such a control for a text label, please lemme know so i can save the trouble of HTML haha

@jhunudash2670 Год назад

How to add currency format to textbox control inside the editable grid. I have a requirement of showing the existing data in US currency format and change the format of new row added to the grid or exit the existing row to the same currency format. data source is SharePoint. Could you please help. Thanks in advance.

@yanginzburg Год назад

How to make the Parent Gallery to grow or collapse accordingly to avoid a scroll bar? If needed there is a scroll bar on a canvas.

@ShanesCows Год назад

Make the gallery height. Tied to CountRows * Self.TemplateHeight

@yanginzburg Год назад

@@ShanesCows Self.TemplateHeight is the default and not the actual

@raphaelpedrogoncalvesdefre9317 2 года назад

hello shane, im working on an survey app that will require the user to answer 100+ questions of the YES/ NO type. I plan on using sharepoint as a data source, so do you know the optimal way to adress something like this? i would rather not have to create a list with 100+ columns, one for each question

@ShanesCows 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7XXo9wjnJvc.html Should give you some good ideas. 😍

@panand99 Год назад

Hi @ShaneYoung- It works perfectly fine in case of zoom size is 100% but when i decreased my zoom size OR user screen resolution is larger then nested gallery is overlapping. any suggestion?

@ShanesCows Год назад

I haven't ran into issues with zoom causing it not to work so I am not sure. SOrry

@ZenMonkeyDigital Год назад

@panand99. In the App Settings, under Display, change the setting for Aspect Ratio. That solved the overlapping problem I was seeing.

@Danielx64 2 года назад

Hi Shane, could this be used to create a vertical navigation menu with sub menu?

@ShanesCows 2 года назад

I don’t see why not. Make a collection that is structured like you want. Then display it in the gallery inside of navigation. I think so. 😎

@Danielx64 Год назад

@@ShanesCows some great news, took some time to nut it out but I got the job done and on top I only used 1 collection for both galleries

@raushanpathak7047 Год назад

Hi , I have created a people search directory using PowerApps and wants to redirect users to their Delve Profile after clicking on selected items?? Can you suggest?

@ShanesCows Год назад

You would need a way to get the URL to their delve profile. Then you could use the Launch function to open the URL.

@raushanpathak7047 Год назад

@@ShanesCows Thanks for the reply. I am able to get the selected current item properties(Email, ID) and am able to launch to Delve search page. But for profile page it dynamically generate some keys, that I'm not sure how to get for everyone .

@subsguts2691 Год назад

Hi Shane, Can you do a video or answer the question how can you scroll to a certain point in a vertical gallery. I can use the Default to select an item in the gallery, but if it's say #30 in a list of 50 items it will select it, but it does not show it. Thus the user has to scroll to find the item in the gallery that is highlighted. Filter will not solve this because I want the user to see all the records. So I need a way to cause the gallery to be position so #30 is in view. I want all the items to stay in the same order as well. This has not been solved by anyone that I can find, but I would like scrolling to a particular position in a gallery would be useful, which is why I shocked this hasn't been solved (at least that I can find). I've spent hours on this. Hope you can help. Thanks!

@ShanesCows Год назад

There isn't a way the best I know. :( I show how I use a variable instead of gallery. selected in this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-691pRyRHWBU.html but that isn't going to cause it to scroll like you want. :(

@subsguts2691 Год назад

@@ShanesCows Thanks for the quick reply! I saw some folks have posted that they want MS to add some type of scroll position property (HA HA!) 🙂

@subsguts2691 Год назад

I rewatched the video. If you do a Reset(RequestGallery), it will bring the item into view(not at the top, which would be perfect), but nevertheless you see it highlighted. Of course, it can't be that easy. On the click of a button, I do multiple patches, etc. before the appropriate items are reloaded into the gallery. After all that is done, the very last statement I do a Reset(RequestGallery). This does not work. I assume because the RequestGallery really isn't populated until after everything in that button click event completes. I only know this because I put a button on the screen (Shane best practice) and put the same command "Reset(RequestGallery)" in it. After the Gallery displays the "Items" based on new criteria, I click on this button and "Voila!", it move to the record. I'm sure this is a timing issue, so my only solution unless someone thinks of something else is a button with the caption "move to selected record" so at least the user doesn't have to scroll. Sorry for the lengthy post, but though you and/or your many followers might be interested in this... maybe 🙂

@cristabelheidgerken8039 Год назад

p̷r̷o̷m̷o̷s̷m̷ 💐

@iulianburlacu Год назад

Nice work. Now... can we add a third level? Like 3 tables (Parent - Child - Grandchild)?

@ShanesCows Год назад

I have never tried nested, nested tables but I don't see why not.

@iulianburlacu Год назад

@@ShanesCows I'm asking because I cannot nest a third gallery in an already nested gallery. I tried everything and I just couldnt figure out how to do a 3 lvl collapsing accordion menu in powerapps. It is a requirement I have from a client and something I think im gonna be stuck with for a while.

@JemicoTX Год назад

The flexible gallery is a horribly inefficent object. It crippled an app and had to be removed and replaced with an alternative approach.

@ShanesCows Год назад

Interesting Jeff. We have used it in some larger scenarios and it worked fine. Sorry it isn't being good for you.

@JemicoTX Год назад

@@ShanesCows , run the browser dev tools (F12) on a screen with a flex (accordion) gallery and see if you observe constant / continuous errors in the console. The screen caused CPU utilization to jump to >30% also. It was literally the sound of the desktop fans when entering that screen that lead me to finding the buggy control. I ended up switching to a standard gallery made to be dynamic based on combo box selections to show / hide content within the gallery.

@ShanesCows Год назад

Interesting. A quick peek I do see some errors but not the CPU spike. Hmmm.

@brammerz3193 Год назад

This is a really bad tutorial. So much time waffling on with colours and other irrelevant properties when you could cut this down to less than 10 minutes and just clearly explain how to do a nested gallery.

@ShanesCows Год назад

I am sorry you didn't like it. Most people enjoy the added info and context. If I make a video that just shows the flexible height gallery then people would complain that I didn't explain why you need it or didn't show exactly the info they wanted. Cannot make everyone happy. Hope you have a great day.