Row repeater assistance

Hey everyone, I’m working on a row repeater to allow users to enter multiple email addresses. I’m almost there, but I’ve hit a stumbling block updating each row with its type, e.g. home, work, or other. You’ll see from my attached test project that if you change the Type dropdown from the second entry onwards it reverts to Home when you click Add email again. Please could someone help me with this logic?

Also, you’ll notice that when clicking the Type dropdown in a repeater row, it moves everything underneath it down. Is there anyway to fix this too?

Any help would be much appreciated.

Row Repeater.rp (115.1 KB)

Hey there!

  1. To get the dropdown selection to stick, add an “Update Rows” action on click of the option:

(note that firing the update will cause the menu to hide and set the text for you - so I took those actions out)

  1. To keep the dropdown from pushing everything down, uncheck the “Fit to” box:

Row Repeater.rp (115.6 KB)

When you click “Add email” it adds a row to the repeater, which of course triggers the repeater’s OnItemLoad event. That event sets the text on “Field2” to the value in the column [[Item.Field2]], which will always be “Home” because that’s what you set it to in the “add row” action–and never change it. So, in your “List” group, when “Home” or "Work’ or “Other” is clicked, it needs to update your repeater dataset so the “Field2” column equals the text on that widget. You actually do this properly in the Field1 OnClick where you update “This Row” to “This.text” --so you just need to do a similar row update for Field 2. It is a very common mistake to change the text or a selection state of a widget directly instead of updating the repeater dataset and using column values to determine the content and status of widgets in the repeater. It works fine until the repeater is touched–anything that would trigger the OnItemLoad event, including Add Rows, Delete Rows, Update Rows, etc. For good measure, you’ll want to do the same for the “Primary” group.

This is because when you show that group, it changes the height of the row, and (by default) the repeater is set to “Fit to Content in HTML”. This is normally a good thing as it allows rows to have varying heights dynamically based on their content. The easiest fix for this is to uncheck the checkbox for “Fit to Content in HTML” (which you can find below the repeater dataset all the way at the bottom of the repeater’s Properties panel.) In your case, this is probably all you need, as your repeater rows are identical in height.

See this updated .rp file for a solution.
Row Repeater v2.rp (152.9 KB)

I duplicated your page and simplified things. It wasn’t clear why you’d need a separate “email row” in addition to your repeater, so I use only the repeater. Take a look at the repeater dataset where I added a column for “Primary”; and look at the OnItemLoad event where I added a Case to handle that column’s value, and a Case to disable the “Remove” widget if it is the only row in the repeater.

To demonstrate another method for showing the droplist which will work with “Fit to Content in HTML” --in case you later need varying row heights–I pulled the “List” group out of the repeater. When the “Input” group is clicked, it moves the “List” group to the proper location and shows it with the “bring to front” option. Clicking on one of the choices updates the repeater and hides the group.

Also note your “Add email” group only needs to “Add Row” to the repeater–its location move will already be handled and the repeater will always be visible.

P.S. Just saw that @UXProtoTyper beat me to the punch. Ha! Nice work.

1 Like

Thanks so much UXProtoTyper and mbc66! I really appreciate your help!

@mbc66 - in your duplicated page I’ve noticed a couple of minor things, which I hope you don’t mind me asking about :wink: The hint text isn’t displayed in the first repeater Email input and the List dropdown seems to be slightly out of alignment when displayed. It looks like it’s 1 pixel too low on the first repeater row and a couple of pixels too high on subsequent repeater rows. Can I adjust this dynamically?

Thanks again!

Oh right–I didn’t even notice that–why did I add the hint text anyway? :roll_eyes: OK, here’s what’s going on… the repeater dataset starts with one row and even though the Field1 column is blank, the repeater’s OnItemLoad event sets the text for the email input to the value in Field1 and that must clear the hint. I guess this is a case of “nothing is still something.” I fixed this by removing that row in the dataset and adding an Add Row action to the “Add Email” group’s OnLoad event (I could have also used the page’s OnPageLoad event to fire an OnClick for that group.) So, when the page loads it creates one row and since the Field1 isn’t specified in the Add Row it gets ignored (I guess.)

Yes indeed. It took a little while to figure out what was happening here. The math is pretty simple and it works for the first row, but gets off by a few pixels with each successive row. I finally realized that your repeater had some invisible “spacers” and one of those–between your input groups–extended 2 pixels below the input borders. This made the height of the row 2 pixels taller than I thought. Decreasing the height of that spacer to line up with the bottom of the input borders fixes this problem. Additionally, I’m just moving the droplist to line up with the bottom of the Input group, so this would mean the bottom border of Input and the top border of List would be shown. If you want only one “border” then you can either remove the top border in the styling of the border in List or adjust the math for the Move forumula, subtracting 1 from the y-position. I went ahead and did that in this updated file.

Row Repeater v3.rp (153.5 KB)

1 Like

@mbc66 You’re a top man! It makes complete sense when you explain it like that. I’d completely forgot about those “spacer” rectangles too. They’re not even needed.

Thanks again for all your help!

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