How to access the item number of the selected repeater item

#1

How do I correctly access the item number of a repeater item that a user selects? I have a conditional statement within the repeater. I thought that setting a local variable LVAR1 to the repeater, then referring to [[LVAR1.Item]] would do it, but it doesn’t seem to work. Also, do I access the number of visible items by setting LVAR1 to the repeater and accessing [[LVAR1.VisibleItemCount]]? Thanks!

#2

Hi!

The property [[Item.index]] gives you the current row number (starting at 1 for the first row), assuming the code is accessed from within within the repeater row: e.g., in the OnClick handler of something in the repeater row. Example

OnClick  (of item in the repeater row)
    If (value) [[Item.index]] is equal to 1
        -- do something

You are correct about using a local variable to access visibleItemCount., However, if you are accessing this from within the repeater row itself (e.g., OnClick of something in the repeater row) you can use [[Item.repeater.visibleItemCount]]

Attached is a sample: itemIndex_visibleCount.rp (55.0 KB)

#3

My problem is that I’ve got 3 items (photo thumbnails) in each row of the repeater, and multiple rows. I’m filtering the list based on what the user selects to see. When someone selects a thumbnail, I’m displaying a larger version of that photo on the same page. I want to enable users to click a next or previous button to display the next large photo without going back to the thumbnails. I want to activate or deactivate those two buttons based on whether there are more photos to see (in other words, if there are more thumbnails in the filtered list based on the position of the one whose large version is currently displayed.

#4

So the question is how I can get the actual item number of the item selected instead of just the row. Is there also a repeater column value?

#5

How are you displaying the large version of the photo?
Are the photos stored in the repeater? Or stored externally and accessed via a url?

#6

The photos are stored in the repeater. When someone selects a repeater item, I set a larger image widget on the same page to that repeater item to display it.

#7

Hi!

When you need to access widgets inside of a repeater from the outside, use the “listener” method. (Google “axure repeater listener” and you’ll see lots of examples.)

Basically, you put a widget (say, a hotspot) in the repeater row and move it from outside of the repeater by 0,0. This will trigger its OnMove interaction for each row of the repeater, iterating all visible rows exactly like OnItemLoad iterates them. In fact, it’s helpful to treat this OnMove event just like you’d treat OnItemLoad: i.e., you can use Item.index, Item.first, etc., grab any column value, access the instance of any object in that row, etc.

You’ll need two variables: one we’ll call v_rowNum to keep track of which row you are in. Set this to [[Item.index]] when you click on the image. (You may want to use a unique column value rather than Item.index if it’s possible for the user to change the filter yet keep the selected image.)

The second variable is v_imageNum which will be 1, 2 or 3, depending on which image you want to grab. The code will look something like this:

OnMove (of hotspot)
   If (value) [[Item.index]] is equal to v_rowNum AND value of variable v_imageNum is equal to 1
      -- (set your big image to the first image)
   Else If (value) [[Item.index]] is equal to variable v_rowNum AND v_imageNum is equal to 2
      -- (set your big image to the second image) 
   Else If (value) [[Item.index]] is equal to variable v_rowNum AND v_imageNum is equal to 3
      -- (set your big image to the third image) 
.

If you run into trouble, post again and I can put together an example.

Source on How to Use Repeaters and Local Variables?
Search dropdown list with arrow key navigation?
#8

Me again. Annoyingly, the ongoing purge of the forums got rid of an excellent post by Gregor on repeater listeners. (It was in question/answer format, so I don’t know why they got rid of it. @Anthony_Axure: the title of the post was called “Three repeater questions.” If you could restore it, that would be helpful.)

Here is the file that Gregor attached to the post: repeaterListenerLessons.rp (781.5 KB)

#9

Thanks–this is helpful and I’ll give it a try!

#10

Good luck! In the file I attached, the second example applies to your situation.

#11

The method you described worked great! The only slight difference is that Item.Index returns the actual number of the image in the Repeater and not the row. This is great, because it means that I don’t have to keep track of the row number. Thanks again for the help. Axure corrupted my file, likely due to the number and size of my images, but that’s something I’m working on with their support team, and I have a version that’s working well.