To Iterate through a Repeater

I found one decent thread in this forum on this topic, however the answers were targeted on the topic about updating while looping, there wasn’t enough in there about how to establish and maintain a loop from the top of the repeater (or anywhere) and iterate according to a function based on that iteration type.

Looks like this,
Take an array, start at the top and iterate 1 element at a time, doing whatever you want between 1 thru n iterations.

How to do that on any repeater created by this great program?

Maybe this is a feature request, have only been using RP 8 for the 30 day period, then signed up. Think I will keep this like Adobe, used on a must have basis…

Thanks to anyone who can lead me there.
Curtis

@cdfisher001,

A repeater is just that–a repetition of–or “repeated copy” of–widget(s). If you do something to one widget in a repeater, it will happen, iteratively, to all repeated instances–or in other words, it repeats through the “array” of repeater copies, from the first one (the “top”) to the last (the “bottom”.) So any repeater is a built-in iterative loop, and once you know how it works it is relatively easy to set up and control. (This is an important concept to grasp and it confuses many Axure authors at first, because they think they are doing something to just one widget in a repeater list, but in fact they are doing the same thing to every copy of that widget–iteratively …and Axure does not provide a built-in easy way to refer to just one copy in a repeater, for instance, “set selected MyImage[3] in MyRepeater”.)

Here is an example of a repeater that demonstrates this principle:
RepeaterIteration.rp (86.9 KB)

I placed a repeater and a rectangle on the Home page. The repeater itself is very simple: the default rectangle widget with the default “set text” command in the OnItemLoad event. This is actually an example of the “iterative loop” nature of repeaters. When the rectangle widget (named “demo” in my .rp) loads, its text gets set to the value of its row cell in the “Order” column. So as the repeater first loads, it walks through each row, iteratively setting the text on the “demo” widget, from 1 to 10 in this example. (Because there are 10 rows in my repeater “spreadsheet” there are 10 repeated copies of the “demo” widget.)

I created a “function” by assigning some code to the “demo” widget’s OnMove event. This is a common way to make a widget do something remotely, move it by (0,0) pixels, thus triggering the event but not resulting in any actual movement. I call this function from the “Text Box” widget outside the repeater.

And the interaction code for the “demo” widget in the repeater is:

So, when Text Box gets clicked, it sets its own text to “” (empty) and moves “demo” by (0,0). Each copy of “demo” then tests the text on Text Box, and if empty sets the text on Text Box to the text on (that copy of) itself. Else if Text Box is not empty, it appends its own text to whatever text is on Text Box. If that sounds confusing, consider what should happen in order:

  1. The first copy of “demo” (labeled, “1”) would find empty text on Text Box, so would set Text Box to contain “1”.
  2. The second copy of “demo” (labeled, “2”) would find some text on Text Box, so would set Text Box to contain the current text, a comma, a space, then its text, or “1, 2”
  3. The third copy of “demo” (labeled, “3”) would set Text Box to contain “1, 2, 3”
  4. And so on…

This iteration happens very vast, as fast as your computer can walk through the list of ten copies, so it appears instantaneous. The next time you click the box it looks like nothing happens because the iterative loop is run through so fast, but do note it happens and it always iterates through the list from the top (“1”) to the bottom (“10”).

Now take a look at Page 1 for an example of a more controlled iterative loop. Same repeater, except I changed the interaction code for “demo” so each copy can highlight itself (change its fill color to yellow when its selected state is “true”)–more on that later… First, I’ll explain the new widgets on this page. There is a droplist named, “highlight list” and a button, “buttonGo” --These allow a single specific instance of “demo” to be selected. There is also a button, “buttonHighlightIterate” which will highlight a specific instance of “demo” then walk through the rest of the list, iteratively highlighting successive copies of “demo” in the repeater.

To highlight just one copy of “demo” I move every copy of “demo” (again, iteratively) and if the number of that copy matches the one I want, it highlights itself, otherwise it does nothing. (This is a workaround for the lack of a direct way to call repeater instances as you would an array, like “move demo[5] in Highlight Repeater”.) Here is what the “demo” code looks like:

So, if the selected item in the droplist is not numeric (which would be “All Items”) then demo selects itself. The selected state is fill color #FFFF99. Keep in mind this means every copy of “demo” will select itself, so all will be highlighted. If the selected item in the droplist is a number, and if that number matches the number in the “Order” column for this repeater instance, then “demo” selects itself, otherwise it deselects itself. This should result in only one copy of “demo” being highlighted–the one with the same number as the droplist.

To highlight every item in the list iteratively one by one, I would select “1” in the droplist then click “Highlight each item starting at 1” button. This sets a temporary copy of our intended number by setting the global variable, OnLoadVariable, to “1” then calls a new function for “demo” by rotating it 0 degrees (another trick to trigger a specific event on a widget.) The OnRotate code tests its index against OnLoadVariable (this is another way to determine the specific copy of “demo”–or in other words, “which repeater row”, or which “array position”–is current.) If it matches, it highlights itself, waits half a second (to slow down the iteration and give you a chance to notice the highlight effect), then increments OnLoadVariable, and triggers the OnClick event for “buttonHighlightIterate” --thus highlighting the next copy of “demo” and so on through the list. The OnClick code for this button includes a test to determine when the “iterative loop” has reached the end of the repeater list:

…the code, [[LVAR1.itemCount]] is a way to find how many items are in the repeater, where LVAR1 is a pointer to our repeater, and itemCount is a built-in variable for any repeater. When OnLoadVariable has been incremented past the number of items in the repeater, the loop is stopped and “Rotate demo by 0 deg” is not called.

I hope all this better explains this approach at “iterating through a repeater”. It is not the only way to do it, but is fairly common and pretty powerful in what it provides.

2 Likes

Thank you for this, explains everything I wanted to know. Much appreciated.