Selecting an item from a repeater

rp-7
newbie-question

#1

This is a likely silly question…Is there a way to select an item(row) that is part of the repeater? I want to select the item, store that data into a variable. So far, items displayed in the repeater doesn’t appear to be “select able”

Thank You!


Edit fields in repeater with row selection and selected row hightlighting
Hide specific cells in repeater table
#2

Hi!

To select a row, you need to use the Select command as well as give your row a selected appearance. If you want only one row to be selected out of all the rows in your repeater, that takes another couple steps.

Select the row

Put all the items in your repeater in a dynamic panel and give the panel this OnClick event interaction:

OnClick
Set Selected of This to true
Set value of GVAR_selectedRow to [[Item.index]]

(The second line sets this variable you mentioned to the row number. You can set it to a column value instead if you’d rather: e.g., Set value of GVAR_selectedRow to [[Item.Column0]])

Give the row a selected appearance

To make your row look selected, you can assign a selected Interaction Style to certain items in the dynamic panel above. (Right click on whatever widget, choose Interaction Styles, and go to the Selected tab of the dialog that comes up.)

For example, you might place a gray rectangle behind everything, set that rectangle’s opacity to 0%, and in the Selected tab of the dialog above, you would checkmark the opacity setting and set it to 100%. That way the rectangle is invisible when it’s not selected, and visible (i.e., gray) when it is.

All objects in a dynamic panel inherit the dynamic panel’s selected or unselected state, so you can set the selected interaction style of multiple objects in the dynamic panel in a similar manner: e.g., make the text of all your text widgets bold when selected and not bold when not.

Make it so only one row is selected at a time

To do this, right click on the dynamic panel that contains everything and choose Assign Selection Group. This makes selection mutually exclusive. When the dialog comes up, name your selection group whatever you want.

IMPORTANT! You also have to turn off the repeater property Isolate Selection Groups. That setting makes selection groups mutually exclusive within each row, rather than mutually exclusive across all rows. Select the repeater and uncheck this setting in the Properties panel.

Axure 8

In Axure 8, you can use a group instead of a dynamic panel and otherwise follow the directions above. (However, Assign Selection Group is no longer on right-click; it’s in the Properties panel.)


#3

Of course single select rows is easy to do but took me forever to find this post and finally fix my issue…Thanks so much josephxbrick


#4

What if I want to select one specific row without clicking on it?

I mean, imagine there’s some other trigger (like a button somewhere else within the UI) that need to switch a row (row 7 for example) to its selected state?

Is there any way to achieve this?

Thanks


#5

Yes, you can select any row (repeater list item) or any widget within any row from a trigger (event) outside of the list. Use the “Update Rows” action in the “Repeaters” group (in the Case Editor).

See this basic example:

Repeater List Example

And the rp file:RepeaterList-ExternalControl.rp (153 KB)

In the repeater list I added a column named, “Selected” to track and control when a row is selected. The OnItemLoad code will automatically show a row as selected if the “Selected” cell equals “yes”, and deselect it if it does not.
Clicking a row (the hotspot sitting over then entire row) selects and deselects it by updating the “Selected” cell. So that is the list behavior.

Now, outside of the list, anything can call an “Update Rows” action, so I made some buttons to do this in various ways. I also set up a listener for numeric keys (the “OnPageKeyDown” event) to select rows just by typing their number on your keyboard, just to show a different kind of trigger for this.


#6

I updated the repeater list example to show options for adding images, accordion expansion and contraction, and a method for scrolling a repeater (or any content) within a constrained area.

Repeater List Example

RepeaterList-ExternalControl.rp


#7

Thanks so much for your examples, this is exactly what I was looking for, it seems a bit backwards that this kind of functionality is not already integrated in repeater’s core functionality…


#8

When axure will have simpler ways t do simple things?

I just need to have an item from a repeater pre-selected and it is just NOT intuitive at all…


#9

Thanks for your example. I played around with it, and seems like I am doing the same thing in my prototype. I am having a couple of issues, however.

First, I have each element of the repeater clickable, with an OnClick action. The weird thing is, the first two elements of each row of my repeater have no clickability. The other elements work fine. I have added more data to test this… It holds true for 3 rows in testing so far. I’ve changed row length, and it varies with row length, but all elements are never clickable. This glitch goes away if I copy my repeater to another Axure document, interestingly.

Secondly, I have the following logic on item load:

Case 1
(if “[[Item.isVisible]]” does not equal “true”)
Hide TMRepeaterBox,Timeline_Label
Case 2
(if “[[Item.isVisible]]” equals “true”)
Show TMRepeaterBox,Timeline_Label
Case 3
(if True)
Set text on Timeline_Label equal to “”[[Item.Label]]"

This third condition works like a charm, always setting this field for me. However, no matter what is in the isVisible column, the items are never hidden. In the console, only the Case 2 and 3 are EVER invoked, even if “true” is no where in my data set.

Any help is appreciated here!
Thanks!


Repeater Row Selection Issue
#10

If you could post your .rp file I’ll take a look at it. Otherwise, not really possible to to tell what’s causing your issues.

You might try renaming your “isVisible” column… that might be a protected variable name–just a guess. Also, in your repeater sheet, are you setting the cell value to the string, “true”? One other thing regarding the Update Row action–if you change the contents of a cell to blank, it seems to be ignored. Works better to set it to a string, like “false” or “no”.


#11

That was helpful :slight_smile:


#12

Above link to the updated repeater list example is broken. Here is the file:
RepeaterList-ExternalControl.rp (3.8 MB)


Repeater Rows Selection to show different Widgets
closed #13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.