Set position of a widget after a repeater

#1

Hello everyone,

How can I set the position of a widget 32px below the last row of a repeater ?

Thanks a lot

#2

You can use the repeater’s OnLoad event to do this once, but there isn’t anything built in to repeaters which will do this dynamically, like an OnRepeaterResize event, but it is a fairly simple matter of adding in a “move widget” code line tied to the event or action used to update your repeater table. I actually just did this same basic thing a few days ago in another thread.

See this demo prototype for two methods to accomplish this, on Page 6 and Page 7:
https://qvzjch.axshare.com/#g=1&p=page_6_w_bottom_footer_alt__1_

RP: MasterHeaderFooterSidebar.rp (344.7 KB)

The first method, on Page 6, places the repeater in a dynamic panel (keeping the default option Fit to Content selected) because dynamic panels have an onResize event that we can make use of here. Whenever the dp resizes, it moves the footer dp widget . So, when the repeater changes size by adding or removing rows, that triggers its parent dp to resize which triggers the footer dp to move. You can inspect the Interactions code for the “Content Panel” dp which has just one line:

So, by placing the repeater in its own dynamic panel you can make the widget move automatically and dynamically, in an easily reusable way.

On Page 7, I use a more straightforward approach, without the dynamic panel. first off, I add the move command to the repeater’s OnLoad event:

That will move the widget to the bottom of the repeater, plus an extra 32px --but only when the repeater loads (when the page loads or refreshes) If your repeater never changes dynamically, then this alone will solve your question. (Note, we can’t use the onItemResize event, because that refers to the individual repeater item (cell contents) not the entire repeater list.)

To make it dynamic, I added the same basic command to move the footer widget to the “Add Row” and “Remove Row” buttons:

…where LVAR1 is a local variable pointing to the repeater widget. This approach is kind of semi-automatic and semi-reusable, I’d say. I was able to just copy & paste the “Move Footer Panel…” line from button to button.

Both approaches accomplish the same thing. I prefer the first approach with a dynamic panel, as you only have to add one line of code to handle any kind of repeater resizing. Hope this helps.

#3

Incredibly minor point, but if you have a blank x value for the move, you don’t have to put [[Target.x]] in there. Just having the [[This.bottom + 32]] will be fine.

Also worth noting that Axure treats a null value in a move event as “don’t change the value”. Useful in other contexts.