Show Next of Repeating Group

Right now I have a repeating group, selected as a fixed number of cells. I have added a right arrow icon. When clicked, a workflow is triggered to show the next page of the repeating group. So, when the arrow is clicked, it shows items 1-3, then 4-6, then 7-9, etc.

Rather than showing the next page, I would like to show just one additional element. So when the arrow is clicked, it would show items 1-3, then 2-4, then 3-5, etc. Is there a way to do this?

Edit:

I found another issue. When I use the ā€œShow Next Pageā€ feature, it resets all the inputs tied to the previous page. Functionally, I was able to use the horizontal scrolling feature described here: How to make a scroll button?. I might have to switch back to horizontal scrolling, although I had several issues with design and responsiveness.

I was going to answer this, but then I read the manual:

I would try that (but Iā€™m a ListShifter fan)

Just change the workflow for when you hit the right arrow to change the data displayed in the group. So when you hit the right arrow, under element actions and group pick to display data and just make the data you want to display specified there. So if you do a ā€œSearch for Itemsā€ do ā€œSearch for Itemsā€:item#1 :join/merge with ā€œSearch for Itemsā€:item#2 and so on. You could set a custom state to keep track of what numbers of items you need so it can be dynamic.

I was using using the horizontal scroll option and added a button with custom states and the current index (as laid out in this thread: How to make a scroll button?). I switched because I was having issues with the design and responsiveness. The fixed cell options solved that but now I canā€™t use the scrolling option.

Iā€™m not familiar with LiftShifter but Iā€™ll check it out later this evening. Thanks!

What does Join/Merge do & where can I learn more of this stuff? Or is it your past coding experience?

Alright, hereā€™s where Iā€™m at right now.

Horizontal Scrolling:


When I use horizontal scrolling, the formatting is weird (notice how the fifth element is cut off part way). Also, there is not ā€œinfinite scrollingā€ like a carousel, which is not a necessity, but makes it less awkward. The one thing horizontal scrolling does right is save my slider inputs, so when the user scrolls, the input is not reset.

Fixed Cells:


When I use fixed cells, the formatting issue goes away, so only four elements are shown. However, when I press the arrow, my slider input is reset.

Basically, I need a combination of the two that (1) formats correctly and (2) keeps the slider input value. I did try using the ListShifter for horizontal scrolling. It corrected the formatting issue and created a carousel, but reset my slider input value. Any ideas?

ā€˜merged withā€™ is an option given to you by bubble after doing ā€˜Do a search forā€™ it allows you to join the results of multiple searches

On the Horizontal Scrolling, try to give your repeating group a roundness on the boarders that matches the roundness of your images. That way it will look more natural when an item is partially visible. I think it makes horizontal scrolling look better and may solve your only issue with it.

Thanks for the suggestion, that definitely cleans things up a bit.

Do you know of any way to make a horizontal scrolling list ā€œinfiniteā€ (like a carousel), so that the when the use reaches the end of the list of items, the first item appears again and they can keep clicking through?

@rico.trevisan mentioned ListShifter. I got a chance to use it for the first time this afternoon and it worked well. The only problem I had was that it didnā€™t save my slider value inputs when the list rotated. Perhaps thereā€™s a way for the input to save to a custom state list?

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.