Is there an easy way to hide all but the first 3 rows in a repeater where rows could get deleted/edited?

repeater-widget
#1

I have a repeater design where a moving input creates chips (rows) within an input. The input scales to the number of chips the input contains when in edit mode/focused.

The behavior intended is when focus is lost the input reduces to only show the first 3 chips - and then expand back to full size on focus. Currently the border of the input is controlled by a dynamic panel that expands to the contents within it.

It seems like the easiest way to do this would be to filter all but the first 3 rows - but the design also includes the ability to delete rows. So even if I set up the repeater to assign a number to a row when a row is added - if the user deletes one in the middle the count is going to be non-sequential/broken.

Is there any way to tell Axure to filter (hide/show) only the first 3 rows of a repeater without building something complex? Needing to filter by specific data is not ideal for this.

Attached is the prototype I’m working on … In my file I’m currently accomplishing this by attempting to store a height value and size a dynamic panel based on it - it was really a pain to reacquire focus the input and managing focus and lost focus is also a pain. My sense is this isn’t the best solution with a working repeater that can be filtered. But it does demonstrate the behavior I’m hoping for.

input-with-chips2.rp (119.1 KB)

#2

Hi!

You can use Item.index, which is the row number of the current row regardless of the data it contains. A filter to show only the first three rows regardless of content would be this:

[[Item.index <= 3]]

#3

This is awesome and works beautifully - looked and looked and could not find the logic for that.

But is there a way to execute the filter the way I want it to work without using Lost Focus? These actions work great when applied with buttons - but as soon as I put a lost focus in (which is how it’s intended to work) it completely screws up the delete functionality (which unwantedly also trips the Lost Focus).

Here’s my updated file with the filter above -

input-with-chips3.rp (152.0 KB)

#4

Hi!

The dilemma you are surely running into is managing the lost focus message. For instance, if focus is in the field and you go to delete a chip, you don’t want the field to lose focus and you don’t want the lost focus event to fire.

However, if the field otherwise loses focus, you do want that event to fire, so you can do the collapsing, etc.

Here’s a field (in a master) that has a cancelable OnLostFocus event. (You have 200ms to cancel it before it fires. Feel free to play with that timing.) When it’s canceled, focus is returned to the field without firing the OnGotFocus event.

So On Click to delete a chip, you would first cancel the OnLostFocus event and then delete the chip.

To use it, select the master and use its raised events. Most of the events are just normal field events passed through, but OnGotFocus and OnLostFocus are set up to handle this cancelable message.

I wrote this a while back for Axure 8, but it works with Axure 9.

Preview

File: cancel-lost-focus.rp (82.7 KB)

Let me know if you run into issues.

#5

It seems like you have a good option for your first-three filter, but if I understand the goal another approach would be to use the “set items per page” action. Set it to 3 items or “show all items” to add or remove the “filter.” As long as you don’t provide the user a way to advance to the next page, 3 items is all they’ll get.