Method to place a dynamic panel after added rows in a repeater?

repeater-widget
#1

I’m building a repeater where an input is going to add “chips” within an area. I’d like to have the input be placed right after the last chip entered. If I fix the width of the chips and ellipse long entries, I could probably do this with some local variables and some math, but I’m wondering if there’s a way to do this with [[this.bottom]] or [[this.right]] or similar. Or if there’s another way to tell Axure to place my dynamic panel after the last row added somehow.

Ideally how I’d like this to work is I’d like the input to be placed to the right of the chip if there’s room for it and drop to the next line when there isn’t.

In my file there’s an input that submits on return - hopefully the description above makes sense what I’m trying to do.

chips_inputs.rp (88.4 KB)

#2

Hi!

One way to do this is to put the entry field in the repeater itself.

Make a two state dynamic panel with the states “chipState” and “fieldSate”, the first (default) state showing the chip (call it “chipRect”, say) and the second state containing the field. Have a column called “chipValue” to store the value of the chip.

Add the following code to Item Loaded

On Item Loaded
  If true
    set text of chipRect to [[Item.chipValue]]
  If value [[Item.isLast]] equals true
    set state of dynamic panel to "fieldState"

The second condition above tells dynamic panel to display the field state if the current row is the last row.

Then, in your field, you’d have this code:

On Key Up
  If key pressed equals [Return]
    Update rows (repeater) set column chipValue to [[This.text]]
    Add rows (repeater) set column chipValue to "xxx"

Which basically sets the current row of the repeater to the text value in the field upon pressing Return, and then adds a new row. It doesn’t matter what value you assign chipValue to be in that new row, because the new row will be the last row, and thus the field will display instead of the tag.

Here’s a sample.

Preview

File: enter-tags-with-field-at-end.rp (51.5 KB)

#3

Whoa! This definitely gives me something to chew on. Thanks!