Filtering in repeaters - how to scale repeater height dynamically?

I’m using the Filter function in a repeater right now where I filter all but a specific role during a user selection in a dropdown.

When I do this, it seems like the height of the repeater before the filter is being preserved, leaving huge open vertical spaces in the design I’m working with.

In this mockup, what I’m talking about is the filter option I have at the right - I think just by making some selections it will be clear what I’m trying to do and the problem - but let me know if my description isn’t clear let me know -

https://52kpjk.axshare.com/#id=xz0n1z&p=page_1

repeaterSpace.rp (338.4 KB)

Repeaters won’t automatically move other widgets below them if they change size. There’s two ways of doing this.

The simple way is to use Push/Pull widgets below. However, this is quite fragile and does not work reliably if you have a lot of things on the page. I tend to only use this for simpler interactions.

The other way is to use Move interactions. When I have multiple repeaters and dynamic panels I want to move around, I tend to create an invisible widget and attach a bunch of interactions to it, then have any change in state on all the other widgets fire a click event at my invisible widget. That widget will then move B to the bottom of A, move C to the bottom of B, move D to the bottom of C and so on. This is more easily maintained. You can use widget properties to move widgets to the left, right, bottom, top, X, Y and so on of any other widget.

Your other option here would be to have a single repeater, with each row having open and closed states. This would automatically move other rows if you change the state of the row. You can do this with dynamic panels inside the row, or by showing/hiding content. The ‘Fit to content’ checkbox will tell your repeater to resize each row when it changes. You would need to use a column in your repeater to track whether a row was open or closed.

Hi!

Try the following:

  • Hide all dynamic panels containing repeaters with pull widgets below.
  • Filter repeaters
  • Show all dynamic panels containing repeaters with push widgets below

Hi again

Here is an example of what I’m talking about. Note:

  • The filter button hides all repeater panels with pull-widgets, filters them, and then shows them (with push-widgets) only if their associated expander/collapser panel is set to expanded.
  • The remove filters button does the same thing, but removes the filters
  • The repeaters are shown/hidden by the Selected/Unselected interactions of the rectangle inside of each expander/collapser panel. That way it’s easy to test the expanded state of the expander/collapser. Note that the Load interaction of each expander/collapser panel selects that rectangle.
  • I’ve avoided the deep nesting of dynamic panels that are in your prototype, as that makes things difficult to deal with (especially with Axure 9’s baffling method of editing deeply nested DPs).

Preview

File: accordionWithFilteredRepeaters.rp (90.0 KB)

[Edit] I noticed in your prototype that you create spacing between the bottom of each repeater and the top of the subsequent expander/collapser by placing a spacer in the dynamic panel containing the repeater. Don’t do that, because the spacer will stay where it is when the repeater is filtered and the encompassing DP won’t shrink. Instead, place a spacer between the bottom of each repeater panel and the top of the next expander/collapser, and show/hide them with push/pull when you show hide the repeater panels.

Here’s an example of that. Note that the spacers are hidden shown by the Shown/Hidden interactions of their associated repeater panels

accordionWithFilteredRepeaters.rp (91.5 KB)

Of course, if you want this spacing to exist regardless of the expanded state of each expander/collapser, just build that spacing into the expander/collapser panels instead of doing the above.

1 Like

Rewriting my file using this technique works - but seemingly only if I remove the dynamic panel around the repeater and make it a group instead. That will be a lot of work refactoring my file - but at least it seems like it will work.

Edit - maybe not so much. To the previous poster’s point, push/pull seems to break really easily, and the dynamic panels I was using were helping keep things together. Using groups instead doesn’t have the same benefit.

One step forward two steps back…

Appreciate the assistance from all though!

Often a rebuild from the ground up is better than a refactor – especially when the thing to refactor contains the remnants of many failed experiments. :slight_smile: (I say this as a frequent victim of this circumstance.)

Editing the repeaters should be exactly the same as filtering: Hide the DPs containing the targeted repeaters with pull, update the repeater, show DPs with push if the expander/collapser is in its expanded state.

By the way, I almost never use groups, and one of the reasons is that aren’t nearly as reliable in the push/pull scenario. DPs perform the same function in a far less error-prone way as long as you make sure that they are fit-to-content.

I kind of hate groups as well. I’m finding I can keep most of my design if I manually set the dynamic panel height, then show/hide with push/pull. We’ll see - seems like the filter action is really slowing down with all the logic required…