Move a flyout to an exact position based on a button inside a repeater instance

I have a datable made as a repeater. have a button inside a repeater. On click, that button displays a flyout. I had to create the flyout outside the repeater because the size of the flyout kept pushing my repeater’s row size when adding new rows. Therefore, I created the flyout outside of the repeater, and gave an onclick interaction to show and bring to front the flyout. My problem is that this button is replicated in a lot of instances of the repeater, and I cannot make the flyout to open in the instance of the button that is being clicked. It’s important for me to position this flyout exactly on the location of that button. I have to do the same for several other buttons inside my repeater…

I’ve assigned the following logic:
I created two local variables, LVAR1 = will be the repeater and LVAR2 the button itself
So I’ve created an interaction that on click of that button, to move the flyout to a certain position in the canvas:

[[LVAR1.x+LVAR2.x]]
[[LVAR1.y+(LVAR2.y*Item.index)]]

I entered the item.index so that it calculated the instance in which that button is being clicked… this means that if my repeater has 4 rows, and you click the row 3, the flyout should locate itself in Y row 3. I don’t why, but this is not working though,

Your logic seems good…

…As long as your button (LVAR2) is the full height of your repeater cell (row) --otherwise, you’ll want to use something like a background rectangle widget (or if nothing in your repeater is the full height, just add an empty hotspot to match the height of everything in the repeater–and send it to back.) This would mean an LVAR3 pointing to that full-height widget and multiplying that by (Item.Index - 1). Keep in mind the index starts at 1 and not 0, so in your first row, you’d want (repeater.top + button.top) + 0 thus
[[ LVAR1.top + LVAR2.top + (LVAR3 * (Item.Index - 1)) ]]

If that doesn’t fix it, could you post the .rp file? That will help forum users help you much faster.

Thanks, I’ve tried it but it doesn’t work… maybe I got it wrong… The problem is that when I add multiple instances of the repeater, the flyout doesn’t open from those. I’ve uploaded the file for better information. -Button1 adds rows, so I recommend you add several of this before opening the flyout. and button 2 should display the flyout. The problem is that my repeater is a different size than my buttons, is much more bigger… I’ve tried this, but didn’t work though. TEST1 -.rp (54.0 KB)

Thanks for the .rp file–makes it easy to see and fix. You were very close to getting it!

I missed one critical aspect in my previous post–if LVAR is pointing to the background of your repeater row, then LVAR.height is the value you need to multiply by the index to calculate the top of each row. You’ll also want to add in the x-value of the repeater if you want the flyout widget to appear from the top-left of your button within the repeater.

Here is the updated code for BUTTON 2 in the attached .rp file:

I used the built-in variable “This” as shorthand to refer to the widget making the call–BUTTON 2 being clicked in this case. LVAR1 points to the repeater and LVAR2 points to the background rectangle in your repeater cell, which defines the height and width of each repeater row.

TEST1 -.rp (54.2 KB)

1 Like

This totally worked!!! You are a lifesaver! Thanks for the explanation as well, this is pretty helpful for next time I run into something like this. I’ve never even thought about using the “this” variable…

1 Like