Handling multiple items in a repeater and associating these to the same event

repeater-widget
#1

Hello all. I am new to the forum and Axure, so please forgive me about any of my faux pas. I am working on a drag and drop repeater - this is something I copied and modified and working to build on from another thread… my challenge is not knowing the correct syntax for adding more than one repeater item into an event. Say I already have a [[TargetItem.Label==VarLabel]], what is the syntax to append another one like [[TargetItem.Label==VarTag]], so I can pair both name and tag values with the same event.
Thank you in advance. Since I know very little javascript, I am not sure how to pass these together - i.e. does it have to be like this: [[TargetItem.Label==VarLabel]]&&[[TargetItem.Label==VarTag]] ?

Please see the logic box for reference - in the example you’ll see only a single repeater item, and I am trying to pair that with a second one…sample

Unmark Rows event has only one repeater item, and I wish to append a second or third one…

#2

Not knowing the context, I’m not sure exactly what outcome you’re trying to achieve, but the syntax for combining those conditions is [[Item.Label == VarLabel && Item.Label == VarTag]].

This logic seems to me like probably not what you want, since it will select items whose “Label” column exactly matches VarLabel AND VarTag, which will result in no matches if VarLabel and VarTag are different values. You probably want to use || (OR) instead of && (AND).

#3

I am not sure but here is the rp file for reference - what I am trying to do looking at this example - https://3g957e.axshare.com - is to move both the title and the name. When I move the pair from the left to the right, I am loosing the title, and therefore removed the reference in what I mentioned earlier appending the title repeater item to the name repeater item if that even makes sense.

Here’s the rp I am trying to make this work with…DragDropTitleNamePairs.rp (92.2 KB)

Thanks in advance for looking at this…

#4

Seems like you’re overthinking & over-engineering it. See the attached for dragging items from one repeater to another.

Royal_Mover.rp (67.7 KB)

Edit: I did use in this example a way of using invisible elements in a repeater as a “hook” to assign functions on: the “Move Listener” widget. I like to use hot spots for this because obviously they never show up, and it’s clear to me (and to future developers) that this is never intended to be visible. But they can still do row operations just fine.

#5

@Camilla, wylfing has the solution you want. To expand on / simplify their solution,

  • I added an extra card outside the repeater that assumes the dragged item’s info and moves along with the drag (this avoids the issue of repeater items resizing as they are dragged, which affects positioning of items under the dragged item). To avoid having duplicate cards while a drag is in progress, I added a “hidden” state for each card that displays during a drag.
  • I got rid of the “move listener” widget (sorry wylfing!) and incorporated its behavior directly into the card. Reason being: usually when I use a technique like the move listener, it’s because I need to modularize some function for use by lots of other widgets, or because the function is complicated enough that putting its logic inline would make things unreadable. Since each repeater item is self-contained and can handle its own logic, there’s not really a need; and the logic, being only one line, is easier to read inline anyway. And, even though you can’t see hotspots in a published prototype (they’re transparent), they’re still visible as far as axure is concerned unless you hide them. So, a visible hot spot will still take up space and affect the sizing of the dynamic panel that contains it.

Royal_Mover++.rp (76.8 KB)

#6

@wylfing & @Ishillman - thank you both! Here’s to the more difficult question, what is the best way to learn all this if you’re a non developer? I’ve been trying to analyze each step, but hate to memorize these for future use, and need a better way to learn my way through. Do you have any recommendations?

#7

Heh. I don’t know if I have a good answer for this, since when I started using Axure, I wasn’t a developer! Axure is a gateway drug to coding. That said, repeaters are one of the most powerful tools Axure gives you, and imo, they also have one of the steepest learning curves. If I were trying to solve this problem just starting out with Axure, I’d do it a different way. If you have a finite, known number of list items, and you don’t have to add new items (in the prototype, anyway), you could achieve this using just dynamic panels with some drag/drop interactions.

That’s how I’d teach it to a room full of designers who were totally new to Axure. Once you understand how to do that, it’d be easier to fold that knowledge into using a repeater. In this, as with most problems, there are lots of different ways to make something that will work and get the point across. Many of them don’t involve code at all.

If I were starting now, I’d watch all the core training videos starting from the beginning. Those will give you 90% of what you need to make some really impressive prototypes. Otherwise, just do what you’re doing—trial and error, and asking for help!

#8

@Ishillman - Thank you!

#9

Hello @wylfing - Hello @Ishillman - I am trying to add more complexity to what y’all have been helping me build - and hit a snag which I believe requires an understanding of arrays and accessing a specific array index… is this something you have tried before?

Basically I am pairing each royalty with a colored crown, when I drag the name over to the container on the right I have a switch which I use to change the color of the crown - that part I have more or less figured out, where things are going sideways is with me dragging the item back. When I do that the color change does not stick, I mean when I carry the item back to the list on the left, the color changes back to the default color I started with…

I believe I need to tie each of the crown drawings to an index in an array so I can keep the color change state intact, but have no clue how to associate a dynamic item with an index number… I found examples like what I am sharing below, but pretty much lost on how to proceed… Please see my example for what I am trying to do - https://gpwimc.axshare.com

Royal_Mover_width added widgets.rp (98.9 KB)

I found the following references to arrays and referencing indexes, but that is as far as I could go…
Here is an example syntax for accessing a specific index inside an array in a repeater:
OnItemLoad
Set item.myArray to an empty array
Set item.myArray[0] to “Item 1”
Set item.myArray[1] to “Item 2”
Set item.myArray[2] to “Item 3”
End OnItemLoad

OnItemMouseEnter
Set text on “Label” to item.myArray[1]
End OnItemMouseEnter

and…Here is an example syntax for referencing a dynamic panel with two states inside a repeater with an index number:

OnDragDrop
Move dragging widget to This
Set item.index.myDynamicPanel to “State 2”
End OnDragDrop

OnItemLoad
Set item.index.myDynamicPanel to “State 1”
End OnItemLoad

#10

Axure doesn’t natively support arrays; that’s a JavaScript thing. You don’t really need to mess with arrays for this.

Royal_Mover_width added widgets.rp (104.1 KB)

The reason your crown color change wasn’t persisting is that you need to store the item’s crown color in the repeater’s dataset along with the name and title. Both the “Royals” and “Selected Royals” repeaters will need a column in their dataset where you keep track of this. Each person displayed in “Royals” will need an initial value in that column, and when you use the switch in “Selected Royals” to change the color, you’ll use an “edit row data” action to update the value from, e.g., “gold” to “silver”. Finally, you’ll need to put some conditional logic in the repeater’s “Item loaded” interaction to set the appropriate crown panel state depending on what’s stored in the item’s “Crown” field.

#11

I am processing what you just did - thank you for saving me from jumping in the wrong rabbit hole…

#12

No problem. Under the hood, repeaters basically are arrays, but for the most part, you don’t need to have knowledge of JavaScript to build stuff with Axure. Occasionally you’ll come across something advanced that requires a bit of scripting, but truly, Axure can do so much stuff out of the box, without any code, that non-coding designers can achieve prototypes that are every bit as impressive as a developer-built prototype.

#13

I hear you! I am so glad to have found you all in this forum. I know I have a lot to learn…