Single line repeating group with toggle

[j111]

Hello everyone! I am looking for a way to have a repeating group show one data entry (row) at a time. Ideally, the user could then control which item appears by clicking a right or left arrow below the group.

For example, if the users clicks the right arrow, the first data entry would be replaced by the second. Clicking the right arrow again would take you to the 3rd entry, and clicking the left arrow would take you back to the first.

This seems relatively simple but I can’t seem to crack it. Does anyone have any suggestions?

Thanks!

[TipLister]

Hi j111,
welcome to bubble.

Hope I understand you correctly, but this is what I would do.

1. Set up a repeating group, here I use the source Do a search for … Make it have a fixed number of cells with 1 row * 1 column.
   
2. Add an icon eg an arrow. Edit the workflow of the icon. Use the element action: Show next. Select that repeating group.
   
3. For the back button use “Show previous”

happy bubbling,
Julius

For free tips & step by step lists on bubble & more check https://tiplister.com/

[j111]

Works perfectly - thank you, TipLister!

[j111]

One last question - is there a way to recognize when you’ve reached the end of the list?

For example, once you’ve clicked the right arrow through to the last item in the list, I’d like to redirect to another page. Is this possible?

Thanks!

[TipLister]

Hi j111,
for this you would use a state. This stores data.

1. On the workflow of the next button use element actions set state, select the next button, and create a new state, type number. This counts up by 1, whenever you click it. (Make sure to have the same state count back by 1 for the previous button)
   

2. Now also for the next button, only have it navigate to a new page (or show another button that is normally hidden) if this state is equal to the count of items in the repeating group used.
   

happy bubbling,
Julius

For free tips & step by step lists on bubble & more check https://tiplister.com/