Pagination for Repeating Groups - Bubble Tutorial

hey everyone today we're going to look at how you can implement pagination for repeating groups in your bubble app this is qualified that ie it's a job where it's built on bubble and i have this one page called all accounting jobs that pretty much displays every job currently up on the site as of now we've 85 jobs so as you can imagine this repeating group takes quite a while to load which isn't ideal users can scroll down through all 85 jobs which admittedly is nice but i think there might be a better way so what i've done is i've built an imagination group feature if you see i'll scroll down to 20 jobs only for 185 and i have this little set of numbers and an arrow here and if i click on two i'm brought up to the top of the page and i can see the next 20 jobs and similarly if i click on the arrow i'm brought again to the next 20 jobs so we're going to look at how we can implement this for your own bubble app now so we're back in our bubble editor and the first thing we need to do is make sure that we have the toolbox plug-in installed it's this plug-in here it's a free plug-in so if you don't have it just go to add plugins search for toolbox and make sure you have it installed the reason we need that is we're going to do a few calculations to decide how many pages we need for the pagination feature once you install the toolbox plugin this list of numbers visual element is going to become an option so just put that anywhere on the page it doesn't really matter this is not going to appear on your bubble app it is merely in the background making a few calculations and this is used to decide how many pages we're going to have in our pagination feature for the repeating group we're going to start at page one we're going to go up by one page every time so for example two in here we go one three five et cetera and then the length of the list so how many jobs do we want on each page i think 20 is a good number so what i'm going to do is i'm going to go to repeating group job list of jobs count and we're going to go divided by 20. as i mentioned i currently have 85 jobs on the site as a total so this means we're going to have five pages now that we know how many jobs are going to be on each page we need to edit our repeating group accordingly previously i would have had no fixed number of rows i'm now going to set this to 20. this means only 20 jobs are going to show up on each page next we're going to insert a group at the bottom of this section here which is going to house the various numbers and arrows for the pagination feature so we're going to go down we're going to go to group and we're going to put this in here we're going to put these elements just below it there's only two major differences like i said this isn't actually going to show up on the page just to make it more obvious okay so we have our group here we're going to give you some dimensions we're going to make it a row we are going to align it in the middle both horizontally and vertically we are not going to give it a fixed width we're going to give it a min width of 280 and a max width of 1000 this is just to make sure it aligns with the other elements on the page we'll give it a min height of 60 for now we might change depending on how it looks later we're going to put in a repeating group then which is actually going to house the various numbers so we're going to put that in there we're going to do some editing again here in terms of formatting we're once again going to make it a row we are going to align it in the middle both vertically and horizontally we're not going to give it a fixed width again we're going to give it a min width of let's say 280 and see how that looks and a max width of 320. we'll give it a min height of 40 for now and we are going to give it a certain number of cells we are only going to give it one row and we are going to give it five columns again housing the five pages that we will have 20 jobs per page with a bit less for the last page because there'd only be five on it type of content is going to be number and this is where the work we did earlier with the toolbox element is going to come in handy the data source for this is going to be that list so we calculated how many pages we're going to have and we are going to say list the numbers list that's going to give us our five pages perfect next we're going to put in a text element to represent the numbers i'm going to put that in there i'm going to do a bit of editing here to make this look appropriate we're going to get rid of the text that's in there and we are going to give this some dynamic content and it's going to be current cell's number so we should have a nice one two three four five we're gonna remove that style because it doesn't look great and we're going to change some of the parameters here so we're going to change the size to 20. we'll leave it as black font and then we're going to change the font itself to uh dm sans which is what i use throughout the site put that there we're going to bold it and we're also going to change the min height or the mac side because you can see it's taking quite a bit of space at the moment which is not what we want we are actually going to make a fixed width i think we'll give it a width of let's say 30 and then also a fixed height of 30. and again you see it's taking up less space straight away okay so that's looking pretty good it's not in the center there uh this shouldn't make too much direction but we'll just vertically align it and then let's take a quick preview to see how we're looking at the moment i'm hoping that we're going to see 20 jobs on this page and then a row of numbers one through five down the bottom that is the aim at this stage we'll then add in some other features such as highlighting depending on what page you're on and that kind of thing okay so that's looking pretty good i think it loaded a bit quicker there hard to tell sometimes but again 20 jobs rather than the 85 we did have originally one two three four five making progress okay two things now we're going to first of all horizontally align these numbers in each cell and we're also going to get rid of these borders here as i feel they're a bit unnecessary so we're going to vertically align that in center and it looks like it already is in terms of horizontal alignment so that's fine and we're going to get rid of those borders because they just don't really do much i feel so going back to appearance and we will get rid of none perfect uh but also like a bit of a gap in between this group and the job so i'm gonna give this bit of a margin at the top i'll give it a margin of say 20 and see how that looks perfect and this is where we get into workflows now because we have our five numbers one two three four five and we want the jobs of the repeating group to change depending on what number we click on so we're going to click on the text which currently has a number in it and we're going to use some workflows here to do that so start edit workflow and there are some special actions for repeating groups so when text current sales number is clicked we are going to go to element actions we're going to go to repeating group and we're going to go to go to page and the page we're going to go to is actually this cell's number so element and it's repeating group job that we're concerned with and pages current cells number so hopefully now when we click on two three four and five we're going to see the second 20 jobs the third 20 jobs etc that will have made some progress there will be some actions missing at this stage but this is a good next step okay page is loaded one two three four five six roughly about 20 but it looks of it let's click on two and hopefully we'll see the jobs change and if we click on three yeah so two is change if we click on three it'll change again perfect so the jobs are changing which is good but it's not a deal from the user experience point of view because it's still staying at the bottom so next we're going to do is once we click on each page number we're going to scroll back up to the top so the user doesn't have to do that manually that's a fairly simple workflow so what we're going to do is after we've gone to at the next page of repeating group job we are going to go to element actions we're going to scroll to and we're going to scroll the text at the very top of the page so the element is going to be text all accounting jobs which is the top element on the page and let's see how that looks i suspect we'll have to do some sort of adjustment in terms offset but let's just see how we get on first of all before doing that okay again jobs loading in a bit quicker than with the 83 we're on page one at the moment let's click on two it goes up to the top and new jobs that's not bad i'd kind of prefer to go up to here rather than just down there so i'm going to give this a bit of an offset and i'm going to give an offset of -100 so again we're going to refresh the page and see how this looks scroll down click on two yes that's much better and we're getting the new jobs each time so so that's quite good next we're going to do some formatting of the numbers just because they look a bit ugly at the moment and we're going to try and make it a bit nicer so let's go back down to our numbers here and the first thing we're going to do was actually just notice was we hadn't aligned the text in the center so we've done that next we're going to change the background now we're going to give it a flat color and we're going to use this 44444 color that i do like and we'll give it a shade of just 20 so that the black is still obvious next we're going to give it a bit of roundness we'll try 10 and we will see how that looks and this can be useful because in a minute when we use custom states to highlight exactly what page it's on it just makes it a bit clearer if you have some sort of distinctive formatting so that's not too bad i don't think that is bad at all a bit of a gap in between the numbers which i'm not mad on so let's just uh make this a bit tighter and we can change the layout here we can make this a bit bigger perhaps i'm going to change it to 35 35 and we're also going to decrease the gap so 35 35 now we're going to make repeating group a min width of say 240 and a max of 280. okay and let's go back here again and what we will do then is we will have each one of these uh highlighted if it's on that particular page so let's go down yeah i think that's looking a bit better and not vertically aligned there for whatever reason i think that's because i haven't centered the text so let's go here into appearance and let's go to center text vertically perfect we're now going to use custom states to highlight the number if we're on that page in terms of the job list so we're going to go to the repeating group number group we're going to go to information we're going to add new custom state we're going to call this job page and we're going to give this a number default number is going to be 1. and we can exit this and what we're going to say is when this cell's number is equal to the page number we're going to have some formatting so conditional when current cells number is current cells number that is not correct when current cells number is and we're going to go to repeating group numbers and then actually the custom state job page then we'll have some formatting that's a bit different we are going to make the font color slightly different we're going to make it white and we're also going to change the background so if we find background color we're going to give this 444 and give it a 20 or actually not we're going to give it a 100 just to distinguish it from the other ones so then if we go back in here and refresh this hopefully we should see that number one is going to be highlighted when we load the page because again it's on the first page of jobs and loading up and yeah sure enough you can see one looks a bit different to the numbers because again we're on the first page of jobs problem at the moment is when we click on two then we scroll up we get new jobs but two is not highlighted so we're going to use some workflow actions to change that to go back to our text we're going to go to start edit workflow we already have a couple of in there but we're going to add in another one we're going to set the state of that repeating group and number element so set state of an element reading group number and a custom state of job page is going to be equal to current cells number so now when we click on two two should become highlighted we click on three three should become highlighted and so on and so forth and obviously one should not be highlighted when we click on two so let's see how it looks let's try three back up to the top third group of pages and yeah three is highlighted so that's pretty good the last thing we need to do is put in some arrows just so people can navigate between the pages a bit more intuitively so let's go back to our design and let's look for icon and we're going to slot this in this group here and we're going to format this in a fairly similar manner to the actual repeating group so we're going to put the right arrow on this side obviously so let's just search for the arrow i do sometimes find the default bubble icons aren't always the best but in this case i think we should be okay so we'll put that as right and we're going to give this the same formatting as the text and we're going to give it a fixed width and the fixed height we're going to make this a bit smaller than the numbers themselves and we just need to make sure that's vertically aligned and we're also going to give it a slight bit of a margin so it's not right on top of the numbers just from a ui perspective let's give that a margin of 15 on the left and then we are going to give this a workflow action so when you click on the right arrow you should obviously go to the next page of jobs so start at a workflow when the icon is clicked we are again going to use those repeating group actions so element actions go to repeating group show next let's see if that works repeating group job and let's just see if that works there will be an issue that i don't think our formatting is going to change because we click on an arrow we brought to a new page of jobs we haven't told bubble to add one to the custom state or anything like that okay it's run first page of jobs click on one and again new jobs come up which is exactly what we want and again and again so two things we need to do here number one is we need to change the custom state to make sure that the relevant job page gets highlighted the second thing we need to do is scroll back up to the top of the page that's the easier one because we've already done that so let's just go back into our previous workflow and copy that and paste it in here we're also going to insert another action and we are going to change the custom state so element actions set state and again it's going to be a repeating group number element that is key so repeating group number and we are going to change the gel page custom state and because it's right out what we're going to do is we're going to add one every time so what we just need to do is uh take the existing value that's there and then just add one to it so plus one and then we're doing the left we're just going to take away one and we should get the same effect so let's see if this worked when we click on the right arrow this time we should hopefully be brought to page two scroll up to the top and then two will be highlighted when we come back down at the bottom so here we go on page one click on the next page we get new jobs we scroll back down to the bottom and we see the 2 is highlighted brilliant that's exactly what we want so now we're going to do the same for the left arrow and that's going to be a lot easier because all we need to do is copy this and paste it in we want it to be the left-hand side obviously what we're going to do is we're going to change this first to arrow left and we are going to make it first we have the row layout here so we wanted to be the first thing in it i'm going to change the margin to the right rather than on the left looks good we're going to change the workflows associated with this as well so at the moment obviously we have the right uh workflows okay but we don't have the left so we can just copy one from the other so instead of actually you know i'll put a bit of a new one for this because we're actually showing the previous router in the next so show previous and repeating group actions we need to set the repeating group it's a repeating group job perfect we can pretty much copy the other elements actually no we can't we can nearly copy them but we can't quite because we're going to be doing -1 this time around so we had a plus last time i'm just going to change that to minus and we're going to scroll back up to the top of the page so nearly there there'll be one additional thing we need to do after this to finish up the pagination feature but quite close to the finish line at this stage so we should have two arrows one left one right fantastic when we click on this we should be brought to page two new jobs scroll down two is highlighted and if we click on the left we should be brought back to the first page which we air and one is highlighted excellent but one last thing we need to do is there's no point having a left arrow around one and there's no point having a right arrow when we're on fire because these are the last pages uh as you can see you can't actually go and show a previous and i imagine this is going to mess up the yeah the custom state formatting there which is a bit of an issue so let's do some formatting to hide those arrows at certain times we're going to start off with the left hand arrow and we don't want this to appear when we're on page one so we're going to say when repeating group number jobs page is one we're not going to have this element visible put in one and again this element is visible we will leave that unchecked the right arrow is a bit trickier because while we have five pages at the moment we might have more in the future we want to make it somewhat dynamic so what i suggest we do is we do when repeating group actually we say repeating group number jobs page is the same as the last number in the original list we calculated uh then we will not make it visible because obviously if there's 120 jobs then last value for that will be six so we will be somewhat dynamic so we're going to say last item and again we're going to say this element isn't visible and leave that unchecked so hopefully when this page loads we will see that the arrow next to the one is not visible and then when we click on one of the other pages it does become visible and we click on the last one the right hand arrow will not be visible so good start if we click on two up to the top new jobs and sure enough one appears click on it again seems to be working and then we click on five which is the last page you can see there's less jobs the right one disappears so that's it that's how you build the pagination group feature

Channel: Cranford Tech

Views: 16,896

Keywords: bubble io, bubble, bubble responsive design, pagination bubble.io, bubble repeating group, bubble repeating group pagination

Id: v0fEyPS5I9g

Length: 19min 2sec (1142 seconds)

Published: Sat Dec 04 2021