Selecting a single item in a repeater table

repeater-widget

#1

Hey there,
I’ve got an issue with a repeater table, I want to be able to select only one row in the table. Right now I can select as many rows as I want, and I can’t figure out how it’s possible to change it.
I’ve searched in the forum and all the answers I found are for Axure 8 and what people suggested there dosen’t seem to work in Axure 9 :frowning:
I hope someone is able to help me!
Thanks in advance
Penny :slight_smile:


#2

Yes, I’m pretty sure I–as well as other forum members here–can help you. It will immensely help us help you if you could provide some more specific details about your issue, upload your .rp file here if possible, provide some screenshots or sketches to show just what you are needing to achieve, and possibly what posts and methods you’ve tried so far (links to threads would be great.)

The repeater widget is basically identical in RP8 and RP9. Event names changed across the board from RP8 to RP9, but pretty straightforward mapping, e.g., OnItemLoad is now Item Loaded and OnLoad is now Loaded. Actions that can be performed on repeaters have the same names. Functionality is the same. Methods to “select” one or more Rows and/or widget(s) in a repeater remain the same–but they are not obvious or intuitive.

Do you need to do this from within the same repeater, within the same row, or from another repeater, or from outside the repeater altogether? Details of how to do each can be a little different.
Also, what exactly do you mean by “select a row”? Rows don’t have a selection state or property in and of themselves. Do you mean “identify a row” as in “row number 3” or the row labeled “John Smith”? Or do you mean you want to set the selected state of a widget in one row to “true” --like maybe changing a background widget color?

I don’t understand… If you can select as many as you want, that would include one row. Do you mean that you can only select all rows instead of just one?

  • If you change a selection state for a widget in a repeater from within that repeater, it will only affect that row. However, if you change the selection state from outside the repeater, it will affect all rows. To isolate just one row there are two good methods, well documented in this forum.
    • The “Listener Method” in which you set a global variable or text value to a “target value” then trigger an otherwise unused event for a widget in the repeater (e.g., Moved or Rotated). This triggers all repeated instances (all row’s widget copies) to “listen” for the target value (e.g., “I’m row 3 and the target is ‘3’ so I will select myself”) See Page 1 of my demo file below.
    • The “Column Flag Method” in which you set up a column in the repeater datasheet to track and assign things like selection state. So, the Item Loaded event can have a case like, “If [[Item.SelectionState]] equals “true” Set Selected MyBackgroundWidget to true.” To select any one row, set [[Item.SelectionState]] for all rows to “false” and then for your target row, set it to “true”. Find which row is selected with the rule, "[[Item.SelectionState == “true”]].

Or do you mean that you want to ensure one and only one row may be selected at a time?

  • If so, pick a widget, group or dynamic panel in your repeater cell and assign a Selection Group (Axure documentation for Selection Groups). Select the Repeater, look at the INTERACTIONS PANE and ensure “Isolate Selection Groups” is unchecked.

What specifically are the answers (which forum posts?) and what specifically does not work the way you want or expect? It could be as simple as a syntax error or typo, maybe you missed an important step or it wasn’t well explained, or you could be trying to apply the wrong solution for your issue, or maybe the “answer” wasn’t that good. Impossible to tell unless and until we see what you’ve tried so far.

Here is a little demo of row and widget selection with repeaters.
Selection in a Repeater.rp (99.7 KB)


#3

Hey there, first of all thanks for being willing to help me! I appreciate it and sorry for not being specific enough about my issue :confused: this is the first time I’m writing in such a forum. I created an example file with a repeater table, as well as I’ve got a screenshot in the attachments. As you can see I’ve selected some rows in the table (the ones with the blue colour). At the moment I can select as many rows of the table as I want to, but my boss asked me to change it so I can only have one row selected at the time, since he wants to have a button where he can do changes in the one selected row. So ideally I should be able to select one row and if I click on a different one, the selection changed to the one I clicked on. Do you understand what I mean? :slight_smile:

I tried this, on my work-file, as well as in the example file and unfortunately it doesn’t seem to work… That was also what I was referring to when I mentioned that other suggestions in this forum didn’t worked. Do you have another idea how to make this work or am I just a stupid and did something wrong? :smiley:
RepeaterTable Axure.rp (66.7 KB)


#4

@penny96,
Thank you for uploading a sample file. This allowed me to easily find the problem. You created the Selection Group and Repeater correctly, but did not use the selection states properly. I can understand what you did and why you did it, and I think it is a common mistake–it seems like it should work, but does not. Let’s see if I can explain it…

You grouped all widgets in your repeater so that clicking anywhere on a row will change its selection state. That’s fine. The Click or Tap event of this group has two cases with this basic logic:

  • If selected equals false
    • Set selected to true
    • Show “background selected”
  • Else if selected equals true
    • Set selected to false
    • Hide “background selected”

This works when you click on one row, where the “background selected” widget is shown, then on next click it is hidden. The group selection state also changes, and because it is assigned to a Selection Group, all other groups (in other rows) will become unselected when the current row’s group is selected. However, there are no instructions for what to do when this group is unselected, so nothing changes in those other groups. This is the problem. The only thing a group knows about is Click or Tap.

Ideally, you could create Selected and Unselected events for this group, so when it is selected it shows “background selected” and when it is unselected, it hides “background selected”. However, groups (and dynamic panels) do not support these events. This is confusing because it is possible to set and change selection states of a group, but no way to handle these changes directly. (I guess this is because they are “collections of widgets” and not technically widgets themselves, but I really wish Axure would support selection events in groups and dynamic panels.)

You can handle this indirectly though, because when you change a group’s selection state it changes the selection state for all widgets in that group, and “regular widgets” do support these events:

  • Selected
  • Unselected
  • Selected or Unselected (fires on any selection change, so acts like a toggle)

So, you can pick any widget in the row group and assign it Selected and Unselected events. Assigning these to your “background selected” widget makes the most sense. See Page 2 of the updated file below. Here’s the basic logic:

  • Click or Tap (of “fire mouse events group”)
    • Case 1
      Set Selected/Checked of This to “toggle”
      (no need to test if it is true or false, just change it; this triggers a selection state change for all widgets in this group, including the “background selected” widget)
      • Selected (of the “background selected” widget)
        Show This
      • Unselected (of the “background selected” widget)
        Hide This

So now when you click on a row it changes that row group’s selection state; when selected it shows the blue background, and when unselected it hides the blue background. Also when one row group is selected it automatically unselects–and thus hides the blue background–in all other row groups.

You could further simplify this with one event for the “background selected” widget: Selected or Unselected and one action: “Show/Hide toggle This” so that toggling the group selection state equally toggles the visibility of “background selected.” But you can make this even more simple by fully taking advantage of selection states and selection Style Effects.

Take a look at Page 3 of the file below.

  • I copied the style from “background selected” and assigned it to the Selected Style of the “background white” widget
  • I deleted “background selected” widget
  • I renamed “background white” to just “background”
  • I also copied the MouseOver Style from one of the “Value” widgets, deleted the MouseOver styles from all the 8 “Value” widets and assigned it only to “background”
  • This results in only one line of interaction code in the entire repeater to handle selection of only one row at a time. It is the group’s Click or Tap event:
    • Set Selected/Checked
      This to “toggle”
      (This toggles the selection state for all widgets in this group, so “background” toggles between its default white fill and its Selected Style of blue fill.)

(By the way, it is far more common in this situation to only select upon click versus toggle the selection. In other words, the rows act like radio buttons where only one can be selected at a time and one must be selected, versus like a checkbox, where any number of rows could be selected, including none. It is just easier–thus better usability–for the user to understand that clicking a row selects it rather than selecting or unselecting it. So, consider changing the above interaction code to "Set Selected/Checked This to “true”.)

That’s it. It is as simple and lean as I know how to make it. This means it is easier and faster to create, more reliable with fewer possible problems, easier to test and debug, easier to maintain, easier to extend (like adding in buttons shown when selected, etc.) As you get more experience with Axure–and any prototyping, programming or even any computer tool–you realize the importance and elegance of simplicity and “being lazy”–and you learn tricks and best practices to do things faster and more reliably. Of course there is a tradeoff between “best” and “just get it done”. That’s what I love about this forum–there are always different approaches and solutions, and you get to learn from others to make your job easier.

RepeaterTable Axure.rp (115.3 KB)


#5

Oh my gosh, thank you so much for the help! I can’t believe how easy it was to solve the problem :smile: I even understood exactly what you did thanks to your detailed explanation. I really appreciate your help and next time I will make sure to ask the question detailed enough in the first place. Thanks again. Have a great day!


closed #6

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