Individual Widgets Created with a Repeater

[gitterson]

Hey all.

I’m working with a heavy repeater, but I have (I think) a fairly simple question.

Let’s say I have a basic, single column repeater. In it, I create a text object named “My Text”, such that every time I use On Click to add a row, regardless of what you enter in the OnClick>AddRows interaction, the underlying object is still called “My Text”.

What I’m finding is that you can only use Set Text (for example) on every object in the repeater because they are all called “My Text”.

How can I target, for example, the 3rd row “My Text” and Set Text for JUST that item?

Hopefully this makes sense.

Cheers.

-g

[skb]

When working with a repeater, you can use the “Update Rows” action instead of “Set Text”. You can change the underlying data set for a repeater based on any condition—in your case, you could change it based on the Item.index value. Each repeater row has an index that starts at 1 and counts up, so repeater row 1 has an index value of 1, repeater row #2 has an index value of 2, etc.

The first thing you’ll need to do is make sure your repeater has an OnItemLoad case that sets the text on My Text. Then, you can add an OnClick action to a button with this case:

This changes the data for repeater row #3. Any time the data changes for a repeater, the repeater refreshes itself and goes through all the OnItemLoad cases again, and now, because there is new text in row #3, the OnItemLoad case loads the new text for row #3 instead of the old.

Here’s a sample file:

MyText.rp (51.0 KB)

[gitterson]

Thanks for the detailed reply. The good news is that it has sent me on an even deeper dive to learn about repeaters. The bad news is that the scenarios I have aren’t nearly as simple as what I suggested.

Current struggles:

Rows: I’m mostly able to easily add rows (on the fly) with the data I need. Initially, each time I added a row, any Droplist item I had selected was cleared. I found a hack that appears to have fixed this.

The bigger concern is that I have workflows that add groups of rows at a time. It could be one row, two rows or three rows and if they are added together, they must be deleted together. Handling the single row is easy. I don’t know how to handle the groups of two and three without Deleting them individually (which isn’t the workflow).

SO, how can I “name” the groups of three so that if the top row of the group is deleted, they are all deleted?

Simple Version:
RowAddDelete.rp (54.5 KB)

Cheers.

-g

[skb]

You could use either a global variable, or some text on a widget, to keep track of a “groupID” as you go along. (I would use the “text on a widget” approach, because I don’t like to clutter up my global variables with things that aren’t going to be shared between pages of my prototype, so that’s what I’m showing, but you could just as easily use a global variable.)

I added a piece of text to the canvas and named it groupID. OnPageLoad, I’m setting the text on groupID to “1”.

[image removed at poster request]

Then, I added a new column in the repeater to keep track of the groupID:

In the “Add Rows” action on each of your buttons, I am now injecting the groupID as part of the repeater data:

Then, in the OnClick event for the buttons, increment the text on groupID by 1 by using Set Text on groupID to [[Target.text + 1]]. This means that the groupID will keep counting up as you go, and it will never be the same for any particular set of rows.

The final step is in the OnClick of the delete button in your repeater. Any time the user clicks the delete button, you want to remove the group of rows that was added together, so you need to add some logic that says, “all rows where the groupID matches the groupID of this row that I’m clicking right now”, which looks like this:

Delete Rows where [[TargetItem.groupID == Item.groupID]]

[image removed at poster request]

Here’s a sample file:

RowAddDelete_modified.rp (58.7 KB)

[gitterson]

This is truly a wealth of information. Even better, I fully understand what this is doing!

I have more questions whenever you’re ready!

Cheers and Thanks (again),

-g

[skb]

@gitterson So glad to help! I love repeaters. They’re my favorite. * heart *

So… more questions?

[gitterson]

Your love for repeaters is my love for questions…

OK, in the example I sent, I added a “Delete Rows” interaction on the Item itself. Then, on Add Rows, I put an X on the top row. Your GroupID workflow fixed my biggest issue, but there is more to be done to make it better. Right now, even the Delete cells without an X can actually be clicked to Delete that group.

Small Picture: How can I place interactions only in the cells that have the X? This would make ONLY the X cell execute a Delete.

Medium Picture: How can I place a Trash icon in the cells that would have previously only had an X (and execute on the icon not the Item cell)? At least, I assume the interaction would have to go on the Icon. FWIW, Icon Fonts (Font Awesome, etc.) haven’t served me well, so I’d like to look for other options if possible.

Big Picture: How can I place other (stuff) into some Item containers but not all? I’d like to, eventually, revisit my comment about the “hack” that allows me to use droplists in a repeater…but even that hack limits me to having a droplist in every Item.

Cheers.

-g

[skb]

Oh! Somehow I missed that you were adding the “X” only to the first item in the group. Got it.

1. Small Picture: (How to place interactions only in the cells that have the “X”)…

One way to do this would be to add a condition to the OnClick event that only deletes the row if the text on the widget = “X”.

Sample file:
RowAddDelete_SmallPicture.rp (58.8 KB)

2. Medium Picture: (How to place a Trash can (or any other) icon in the cells that would have had an X)

Usually what I do is add something like a “type” column to my repeater, and I use that column to indicate which of the rows are the special rows. In this case, since it seems like the top row is some kind of header, I used the word “header”, but you can use anything you like.

Next step is to add the trash can icon to your repeater row and hide it. Move the OnClick event from the rectangle to the trash icon, which means that the “delete” action will only fire when the user clicks the trash. Then, in your repeater OnLoad event, you can add a condition that shows the trash can only for rows where type=“header”.

I went ahead and used the default icon that is included with Axure, but you can use this for any image or svg icon.

(I also removed the “X” from the Add Rows event, since the X is no longer needed.)

Sample file:

RowAddDelete_MediumPicture.rp (61.8 KB)

3. Big Picture: (How to place OTHER fun stuff in some items but not all)

Basically, you can use the technique above, and add any Condition you want into the repeater’s OnItemLoad event. That will execute different conditions based on any kind of information you want. Most of what you need can be found in the Condition Builder, by switching it to “value” and then clicking the “fx” button.

Then, click Insert Variable or Function, and you’ll find all the repeater properties, which you can use to build custom conditions.

In the case of the droplist you mentioned, instead of doing the “usual” thing with a droplist, what you can do is add a new column of data that stores the value of the selected option of the droplist. Then, add an OnItemLoad case that sets the droplist based on the repeater data. That way, every time the repeater refreshes, it will set the droplist correctly and you won’t “lose” the data in all the other rows. Does that make sense? If not, I can add a sample file to show the droplist case.

Hope that helps!

-skb

[gitterson]

Once again, a most helpful solution. I looked at your sample and I understand everything. I’ll put it into practice tomorrow.

As for the droplist idea, I can imagine what you’re talking about and it might be a better solution than what I’m doing now. Right now, I have a borderless rectangle over top of the droplist that I project the value onto. Essentially, when the repeater wipes the droplist clean as I add a row, the rectangle retains the value. The rectangle never gets in the way because it shows the “current selection” like a droplist normally would. Still feels like a hack.

I owe that solution to another forum contributor so perhaps it’s rude to call it a hack. It WORKS, so that’s the most important thing.

Anyway, I can upload the droplist example tomorrow. Right now, there are two objects for every droplist so it would be nice to put the data into a column and remove that second object (for each).

I’m open to a better way for sure, so if you’re up for posting an example, I’d love to see it.

Cheers and thank you.

-g

[gitterson]

Well, I tried to create something using a column to hold the droplist data, but it wasn’t working. I assume this is where we get into marking rows, etc. In your examples so far, nothing has required this method.

In the version that I got from another forum contributor, marking>doing>unmarking was used. Quite frankly, this gets into territory where I stop understanding WHY. I’ll put a link to that solution at the bottom.

Anyway, if you have a small, working example of using columns to hold droplist data I would appreciate it. Same goes for text/numeric entry boxes. sigh

Cheers.

-g

Droplists in Repeaters Forum Topic