Hi i am a designer but I need this for one of my project. And my helper devs were struggling to do this but your video for pagination is so simple and clear and exactly what we want right now. Your content is proved a god gift for us. Thank you so much😊
Thank you for the tutorial, honestly it's hard to believe that it's the ONLY tutorial for such widely used function... Definitely need more in depth tutorial on how to work with Repeating groups in real world, for example if RG is empty because of user filters - it would still take up all the page, and many other caveats.
Totally! Repeating groups are used all the time! We have further lessons in our membership if you want to check it out coachingnocodeapps.com/vip-membership
Thks for simple solution... I was searching for this solution, where was necessary create a limit for the repeating group number page. Helpful soution.
Awesome tutorial. Incredibly helpful. Tried to book some time with you, but you are booked out until April, and could not wait unfortunately. Keep up the great content!
This is great. When I implement this as guided in the tutorial, and have just, say a total 13 records in the database and I limit the records to be displayed as 10 per page, then it shows be 2 pages. When I click on the 2 for the second page, it show the additional 3 records along with some of the records from the first page to make up 10 per page. How does one just show the 3 additional records only and not have any repeats from the earlier page?
Hi Santosh, great question. This is a quirky Bubble feature where it won't let you have an "incomplete" page, so if it needs to fill the last page with a repeat display of items from the previous page, it will. You can work around this by changing the data source of the repeating group in a condition. When it's on the last page, truncate the list so that you only see "RG's List of Item's :truncated from #" The # in this case would be the start of the last page so that you cut off anything else before it. It'll take some juggling of the conditional data source to keep all pages showing the right items, but it's possible! Hope this helps.
Thank you for a great tutorial! Could you please help me resolve the following issue: when I click on a particular RG item, it takes me to another page. After I click the back button, it returns to the original page but always shows the 1st page of the RG no matter the RG page I was at before clicking the item. I know that it might have something to do with customs states and parameters, but I'm not sure how to set it with the list of items. Your help is much appreciated.
Hello! Please tell me this question. I have a repetition group with product cards, followed by another repetition group with page numbers. At a certain screen size, everything looks fine. But when I start expanding the page, there is a free space between the two repetitive groups. How to remove it?
Hi Gaby, thanks for these great tutorials. I have a RG and i want the list items to be counted and presented in order of frequency. How can i do that please?
Thank you for this gaby - got two questions for you: In the case the results are 6, and the repeating group is set in your case to a fixed number of 10 rows, is there a way to collapse the remaining 4 rows ? In the case the results are 66, the result of the division will have a remainder - in your case only 6 pages will show, when really it has to be 7, and also what I noticed is if I set it to 7, the previous page's rows are repeated so that I get a total of 10 rows in the 7th page, is there any way around this ? Would really appreciate your response
Hi Marwan, thanks for watching! 1. You can't collapse unused rows for a fixed RG. The closest thing would be to use the Ext. Vertical layout or Full list since those only show rows that exist, but that would render this pagination feature incompatible. 2. To make sure that divisions with remainder are rounded properly, use the ":rounded to" modifer and set the number of decimals you'd like to round to so that it rounds up. 3. The final page issue is something a few users have voiced as well. Bubble intentionally fills the last page with the last set of records even if that means you see a repeat. One workaround is to do some math and when you're on the last page, truncate your data source list with the "items from #" modifier. For example, you'd add a condition on the repeating group: When you're on the last page > change data source to Search for Thing: items from [number]. This would only display the items from a certain number and forward.
@@coachingnocodeapps Hi, How do you make the numbers to go back to black once they are not the current page anymore? I have tried a few things but nothing works... it change to a different color when i select a page but it doesnt go back to black :P Thanks for your videos !! I have decided to go with bubble for my company software :D Wish me luck!! Thanks!
Hi Mario, it would be easiest to have the page number text color set to black as default. Then only change the color in a condition (e.g. when current page number is current cell's number). That way only one number is colored at a time and all other numbers will just be their default (e.g. black). If they're getting "stuck" on the other color, review your custom state. Are you adding numbers to a list? It should just be a single number as current page.
Good morning Here Daniel from Mozambique, good video I liked, but I was lost during the explanation, for doing I would appreciate an explanation step by step. Thanks
Hi! Thank you so much for your tutorial! It was really useful and I greatly appreciate it. May I ask if it is possible to have dynamic page numbering displayed? So for example, if I have only two pages but my repeating group for the page numbers has a fixed number of 10 columns, is it possible to show just numbers 1 and 2 in the middle; instead of 1, 2 then 8 empty spaces?
I see this was never answered for you. All you need to do is put the text in a group and give it a min width/height. Then select the RG and make its width fit to content. It will collapse all the empty space and leave you with the remaining pages. Centre it and your done :)
Hello Gaby, thanks for this video. quick question if you don't mind...what element holds the state to change the color of the next page when clicking the arrow icons? thanks in advance
Hi Gaby, thanks for the tutorial. Just wondering if I've got an API that is displaying an image from a user input search box, and a 'Go' button, how would I be able to add left and right toggles to loop to the next URL from my API response?
Hi Thomas, it sounds like when "go" is clicked, you need to save the API response to a custom state that's a list. From there, you can use a repeating group to toggle through your list. That should get you going! Feel free to check out any of the resources here if you're needing more help: www.coachingnocodeapps.com
I see Gabi is not responding to any recent comments, only those from years ago. Hope you can answer mine Gabi. How do you do pagination when you can't have fixed rows/columns? My RG needs to resize and i usually have 2 columns which folds down into 1 for mobile, so can't have that fixed. The whole process doesn't work without set columns/rows.
Hi Gaby, how do you get first page and last page workflow to work and also current page number condition to change colour for the number in the horizontal repeating group at the bottom?
Hey Wesley! You can see whether you're on first or last page of repeating group in Bubble now, so use that in conditions. Use custom state for current page number
Hi Gabi, Thanks for the tutorial. I have a doubt, as when I click on the last page, the system works perfect, but the number of cells does not follow... it only goes to page 2. How do I make it go to the last page too? Example: I'm on page 1 of 52. My cell number is 1 2 3 4 5 6 >:Next page >>: last page. When I click to go to the last page, it goes to 52 (which is the last page), but my cell number goes to Number 7 (which would be the next page). How do I track my cell number and go to page 52? Like yours does? Thanks
Hi Jamie, this is a great question! To do this, you'll need to create a custom state to keep track of what page you're on. Set the state (number) to 1 when the page is loaded or when the repeating group is first shown. Then, every time the next button is clicked, change the state to "state + 1". For previous, it would be "state - 1". Also, every time you select a page number to jump to, you'll change the state to "current cell's number". Finally, add a condition to the text in the repeating group (the one that displays the current cell's number). The condition can be something like "When state is current cell's number > Change font color" Hope this helps. If you want to walk through it together, reach out to me via email.
Hi, I tried this... how you make the page inactive to get back to black ?? I tried this, it works but the problem i have is that it doesn´t makes numbers black again once they are not the current page... How did you do that? Thanks , great videos by the way!! I dediced to go with bubble to make my company software!! thanks!
Hi, Gaby! Thank you for your videos again! I have 12 records in 10 records pagination - that is 2 pagination pages (10 + 2 records) But actually what is happening when I click the 2nd pagination page: I still see the 10 records(two ones that were missing in the 1rt pagination page and the list now without first two record) According to best practices of pagination behaviours, on the 2nd page I will see only 2 last records from the whole list - my question is: how to reach that?
Hi Eugene, Bubble intentionally fills the last page will all items, even if it means repeating items from a previous page. You can custom build your own pagination with custom states using "item from" modifiers to have more control.
Thanks for this tutorial, but as a Bubble beginner I think this was too fast for me, you may make content in such a way that a beginner too can understand the concept fully.
Hey Hadi, in your editor, you can browse/install plugins by going to the Plugins tab on the left and clicking the orange button in the upper right that says "Add Plugins"
You could write more about this moment ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FMkNV8_1tSk.html in the video, because it is not at all clear how to change the color. thank
Hi Igor, happy to clear that up. The custom state for keeping track of the current page is the key here. For example, "when number is clicked > set state: page = current cell's number." Then, use a condition on the text element that displays the number: "When Page (custom state)'s value is current cell's number > change color." Hope that helps!
Thanks for your help, it works great for numbers, but the back and forth buttons cancel color changes. Trying to assign a custom state for these buttons, I do not understand what to choose, as the current cells number is missing in the list.
