Vertical flex gallery with nested horizontal galleries filtered by multiple dropdowns and search box not working

[PolyAlvarez]

Hi experts!
I would like to ask for assistance on an use case I have from an internal user request. The data source of this app is composed from different SharePoint lists (related through some lookup columns). I have a canvas app on which I've placed a Vertical flexible height gallery with nested galleries to show items available according to status (vertical gallery) and being able to filter within according to user selection on 3 dropdown menus (lookup columns) and a search box.
The problem I'm facing is that when some filters are applied, the items which do not match with the filters are not removed from the horizontal galleries, showing "blank spaces" between items. (see picture). 

I've applied the below code on each property:
Vertical Gallery: "Category" (Available, Coming Soon, Deprecated, Recently Added)
* Items: SortByColumns(Filter(Categories, CategoryType.Value = "Status"), "CategorySortOrder")
* Label.Height: If(GalleryObject_8.Height = 0 && GalleryObject_7.Height =0 && GalleryObject_6.Height = 0,0,25) -- This is for avoiding showing the Label containing a gallery that appear totally empty 

Why needing to have multiple horizontal galleries? User wants to apply the filters and additional conditions on the galleries, for example "Recently added" must show if the item has been added during last 3 weeks; "USING TAG X" must show items on which certain tag is being used in une of the SharePoint fields in the list
Horizontal Galleries (on each of them):
 * Items: we use a logic provided in this thread: https://powerusers.microsoft.com/t5/Building-Power-Apps/Search-on-lookup-multiple-selection-column-f... 

 * Visible: (IsBlank(dd_Filter1.Selected) || dd_Filter1.Selected.Value in ThisItem.Vertical.Value) && (IsBlank(dd_Filter2.Selected) || dd_Filter2.Selected.Value in ThisItem.KPIList.Value)

In addition, when horizontal gallery has no items as result of the filters, no label no with blank space should be showed (in the picture it is showed the white space in "Recently Added" category (the last))

 Here it is the structure for clarification of the use case I'm presenting here:

 The issue we are facing is that the nested galleries (which are not flexible) do not hide the "blank" spaces in between when filters are applied and the Vertical flex gallery does not collapse when the items in the gallery within do not match the filters.
Do you have any suggestion on how to apply the dropdown filters for the interior galleries? 
I hope it is clear enough, we are open to try any suggestion you have.
Thank you in advance experts!

[BCBuizer]

Hi @PolyAlvarez ,

First thing: get rid of the multiple horizontal galleries, but only use a single one and leverage the value of the Parent gallery in the Items property instead of having N-1 hidden galleries for every N items in the vertical gallery. Secondly, using the Visible property will only make things (in)visible, but will not remove them which is what causes the blank spaces. Instead you need to set filter conditions to remove the items from what is being displayed.

This will probably make the Items property of the horizontal gallery look something like this:

With(
    {
        _prefiltered_data: Filter(
            myDataSource,
            Category.Value = ThisItem.CategoryOption,
            (IsBlank(dd_Filter1.Selected) || dd_Filter1.Selected.Value in ThisItem.Vertical.Value),
            (IsBlank(dd_Filter2.Selected) || dd_Filter2.Selected.Value in ThisItem.KPIList.Value)
        )
    },
    Search(
        AddColumns(
            _prefiltered_data,
            "_text_lookUp",
            Concat(
                field_23,
                Value,
                ";"
            )
        ),
        SEARCHBOX.Text,
        "field_21",
        "field_22",
        "_text_lookUp"
    )
)

Please share the actual Items property of a horizontal gallery in case this is not clear.

[MicaBassi]

Hi BCBuizer, I work with Poly on this subject. Allow me to explain further:

• The reason why we have multiple horizontal galleries is the following:
  As Poly explained, on the Items property of the outer gallery, we have 

SortByColumns(Filter(Categories, CategoryType.Value = "Status"), "CategorySortOrder")​

Then, on the first inner gallery we have this item property: 

Filter(OurDataSource,Category.Value = ThisItem.CategoryOption).

So, the items on the horizontal gallery are sorted by the values of the outer gallery (if Item 1 category.Value is "coming soon" then it will be shown under "coming soon").
But, for categories like Recently Added, we need to view all items, no matter the category option, and with the condition that the items were added in the last 3 weeks.
Meaning, we only want items added in the last 3 weeks, no matter if the category is coming soon, or available. So the items will be "repeated" and thats ok, we want to see Item 1 under coming soon and also under recently added because it was recently added. Same with Most Liked and a third gallery we have. We didn't know how to do it with one gallery.

• The reason why we use the visible property is because when trying to use the IN like you suggested 

(IsBlank(dd_Filter2.Selected) || dd_Filter2.Selected.Value in ThisItem.KPIList.Value)​

we get delegation warning and the gallery breaks (stops showing). So we ended up doing it on the visible, but since the items go invisible, we end up with those blank spaces between the cards.
If there is another way to do it from the items property instead of visible, it would be the best option! we just didn't find a way. So we just wanted a workaround to "move" the cards so we don't have the blank spaces.

Hope this helps to understand what we're trying to do. Thanks in advance for your help! 🙂

[PolyAlvarez]

Hi! Any suggestion on what has been explained above from @MicaBassi ? It will be very much appreciated!

[BCBuizer]

Hi @PolyAlvarez , @MicaBassi ,

Understood why you are using multiple galleries, but still I would suggest to use a single one and tweak your Items property for that.

As for the delegation issue, since you are using a multi select field, there is no way to avoid it, but as per the topic in the opening post, there is a potential way around it.

Combine the both and you'll get something like:

With({
	_prefilter:
	Filter(
		OurDataSource,
		ThisItem.CategoryOption in ["RECENTLY ADDED", "MOST LIKED"] || Category.Value = ThisItem.CategoryOption,
		ThisItem.CategoryOption <> "RECENTLY ADDED" || Created > DateAdd(Now(),-21),
		ThisItem.CategoryOption <> "MOST LIKED" || .....    
	)},
	Filter(
		_prefilter,
		(IsBlank(dd_Filter2.Selected) || dd_Filter2.Selected.Value in ThisItem.KPIList.Value)​
	)
)

To get this to work, in the first condition for the first filter you list all the possible CategoryOptions that are not an actual Category value. Then after that for each option listed in the first condition, you have to add another condition that give the custom condition for that option. In the above I used the examples of "RECENTLY ADDED" and "MOST LIKED" as you gave those before.

Assuming the conditions in the first filter will all be delegable and bring the number of items below the Data Row limit (2000 items), you can then apply a second filter, via the With function, to apply your non-delegable conditions. Like this you get all the functionality in a single gallery without white spaces and full results.