Adding a 'load more results' button to search RG

I have a search page with a repeating group containing listings of apartments. I’m showing a fixed number of cells, and would like to have a ‘Load More Results’ button to show more cells.

I know I can add in some pagination, but it seems a little buggy (when you load the last page of pagination, it loads the number of results needed to fill the fixed cells, so results from the previous page will be loaded at the top of the page).

Has anyone successfully implemented a ‘Load More Results’ style button?

:slight_smile:

Yeah. I believe I had set a custom state to store the number of cells to display on the page. Started at 10 and then went up by 10 each time the button was clicked.

Then, on the RG, I’d just update the data source to be = search for:item’s until X , where X = the custom state / number of cells to display.

Also, I haven’t implemented pagination but I’d be surprised if there isn’t a way to get the last page to show only the last few results and not a full page’s worth. So, if that’s the ideal solution from a user POV, I’d ask the forum if anyone knows how. Seems like it’d be straightforward.

Best,
Scott

2 Likes

Don’t really agree that a “fixed number of cells” being a fixed number of cells … is a bug. It might not be working the way you would like it to work :slight_smile: But it does what it says.

Anyway, what does seem to be a bug is that you can’t vary the datasource of an RG in a workflow. So if you send more items on a button press to an RG it will not work.

The way round this (other than reporting the bug and it being fixed) is to use the button to increase a numeric state on the page for the number of rows in the RG.

Set this to default on page load. Increase it on button press.

image

@sridharan.s @NigelG

So I’ve got a ‘Load Results’ button, to which I’ve done the following:

Set State > Element: Results RepeatingGroup > Custom State: Load more (type: number) > Value: 10

Is this correct?

In the Results RepeatingGroup, I have:

SearchforApartments:filtered:items until Results RepeatingGroup’s load more

I also have a custom state for Results RepeatingGroup with a value of 3 (I’ll be loading 3 test results only).

Unsure how to link this all together. Any tips guys?

Thanks :slight_smile:

Looks good. 2 tweaks:

  1. Instead of making the value = 10, set it to = current value + 10. This way, after each time you click load more, it’s get 10 bigger.
  2. Instead of "Search for :filtered :items until, include the “filtered” criteria within the search for (so it’s just “Search for :items until…”) The reason is when you include it in the search for, Bubble will only send over the ones that match the criteria. When you do filtered after a search for, it’ll send all of the search for data to the user’s computer and then filter them there (which is slower, and sometimes much much slower).
1 Like

Awesome tips, thanks.

How do I set ‘current value’. When I click the value field, I can’t see ‘current value’ anywhere, or figure out how to add that one in.

Thanks again!

You can get the current value by referencing “Results RepeatingGroup’s load more” and then +10

1 Like

Ah, thanks! I’m trying to set 3 results to load on page load (that’s 1 row, as a test), so that I can load 10 more when I click the load button, but 0 are loading on page load right now (with the new :items until Results RepeatingGroup’s load more’).

My custom state - Results RepeatingGroup with a value of 3 doesn’t seem to be telling 3 results to load.

Which layout style are you using? I’m currently using a ‘Fixed number of cells’, which doesn’t seem to be allowing me to add more results. I guess I should use a ‘Full list’ here, because I’m limiting X results to be loaded on page load.

Also, my :filter was there to handle the :Advanced constraint. Can I remove the :Advanced constraint and get the same results with constraints in the Search for results?

Don’t know that you can remove the “filtered” for this type of logic. However, if you do the filtering of results in the search (if you even need filtering) then adding filtered after it shouldn’t materially slow it down (at least, that’s my understanding).

As for the default value. I’d suggest setting a default value for “Results RepeatingGroup’s load more”. If you set it to, say, 10 on page load, then each time user clicks “load more” it’ll go from 10 -> 20 -> 30 -> 40, etc.

Note - I’m a bit lost on the purpose of “Results RepeatingGroup with a value of 3” so perhaps I’m missing something?

1 Like

Ah OK. Thanks for the advice :slight_smile:

So when I load the page, 0 results are loaded. I want 3 results to be loaded as default at the moment, which is why I added a custom state for Results RepeatingGroup and set the value to 3. I wanted to apply this somewhere to set the Results RepeatingGroup to this state (with value of 3) on page load.

So instead I set a default value to ‘load more’?

I was following this:

I believe I had set a custom state to store the number of cells to display on the page. Started at 10 and then went up by 10 each time the button was clicked.

The ‘Load More’ button is working nicely though :).

Correct. Use a workflow “on page load” to set the default value of the custom state.

2 Likes

Ah, all done, thanks :).

1 Like

One more quick one - when I reach the end of the results, I’d like to hide the button. Trying to add a conditional here, did you add that?

Currently using: When Results RepeatingGroup’s List of Listings, but can’t finish off the statement.

When RepeatingGroup’s List of Listings: Count = Search for : Count

In other words, when the number of listings in the RG = the number of listings in the database.

2 Likes

Ah you’re a star. Thanks so much! :slight_smile:

1 Like

You’re welcome.

1 Like

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