Conditional arrows on Repeating Group

Does anyone know how can I show and hide the right and left arrows based on the visibility of repeating group cells? I know it should be simple but I just can’t figure it out.

Thanks in advance!

ezgif-2-390f7362fc29

Use a custom state to define a ‘scroll position’ for the repeating group, then have conditionals on the arrows to hide/show them based on the scroll position.

1 Like

Thanks @adamhholmes. Can you please elaborate a bit? Is scroll position a text/number state? Is a workflow populating it?

Sure…

There are actually various ways to achieve this kind of thing, some are simpler than others, but yes you’ll need to have a custom state (number) to define the scroll position, then use that to set the scroll position of the RG.

Run a simple workflow action to + or - 1 to the current scroll position custom state value when the arrows are clicked.

Set up your conditionals on the arrows so they are hidden when you reach the beginning or the end of the RG.

If you want/need to have an animated scroll then you’ll have to use a horizontal repeating group, but if that’s not essential then you can just used a fixed cell RG, then display items based on the scroll position.

If using a fixed cell RG, then you can set the datasource to be the desired list: items from ‘Scroll Position’.

If using a horizontal repeating group, use the workflow action ‘Scroll To Entry’ to go to the desired position, and check the ‘animate scroll’ option if you want the scroll to be animated.

The only slight complication arises when/if you also want to allow users to scroll through the RG using a mouse or touch screen device (as well as the arrows), as the actual scroll position won’t always be in sync the the custom state scroll position value. If that’s an issue for you then I recommend checking out the ScrollSpy plugin that will allow you to get the actual scroll position of the RG in real time, so you can ensure your custom state value is always the same as the actual scroll position.

But if that doesn’t matter too much to you then there’s no need to worry about that.

1 Like

Thanks @adamhholmes . This is very helpful.

1 Like

Hi ! Any idea of how to position the arrows inside the repeating group without it being repeated with the new responsive engine ?

You should be able to use negative margins for that (or use an Align To Parent container)

Since the only way to create a scroll effect for the responsive engine is to uncheck the number of rows and columns, it seems not possible to do so

It seems pretty simple to me…

Your Bubble app (bubbleapps.io)

Design-test-app | Bubble Editor

1 Like

Thanks for the demo. But notice that your arrows or not INSIDE the repeating group itself like I was asking :wink:
I asked so because I could’nt change the state of my elements inside the repeating group without my arrows inside the RG.
Looking at your method though, this is the behavior I was looking for and it’s way easier to manage so thank you anyway :slight_smile:

1 Like