How to set up a search results page

Tips
1

After much frustration and time spent on getting my search results page to function correctly and the great amount of help from the community, I felt it necessary to provide some insight into how I accomplished this feat.

My project is a hotel listing site. This could be redone for any type of listing site.

Firstly, the database needs to be set up correctly. My search results are displaying hotel listings. So, I set up in the database a Data Type of Hotel Listing. The hotel listings will have different Data Fields such as Property Type, Overall Rating, Property Facilities, Price etc.

Each Data Field in the Hotel Listing Data Type should be linked to another Data Type. For example, my Data Field of Property Type is actually a Data Type of Property Type in the database. This is set to a singular entry as each hotel listing could only have one possible property type.

46%20PM
46%20PM1568×88 7.37 KB

Another example is that my Data Field of Property Facilities is again linked to a Data Type of Property Facilities. This is set to be a list of Property Facilities because each hotel listing will have more than one facility.

20%20PM
20%20PM1560×86 8.44 KB

So basically, any sort or filter parameter that you will use for the search results, if you want the user to select multiple of that parameter, it must be set in the database as a list.

Secondly, comes the set up of custom states. For every search sort or filter parameter, you need a custom state for that. I have set all of my custom states on the page the search results are displayed on.

50%20PM
50%20PM672×984 63.1 KB

In your workflows you need to set the state of these. For example, I have buttons to set the sate of the neighborhood.

51%20PM
51%20PM2000×674 117 KB

00%20PM
00%20PM1978×670 119 KB

Then you need to set up your repeating group to display the results of the search. You will need to set this up with a filter so a user can select from the different parameters.

34%20PM
34%20PM1388×1102 197 KB

Pay attention to the advanced function of the filter constraints. This is so that when a hotel listing has multiple property facilities and you want only to display properties that have all of the selected facilities (not all properties with any of the selected).

47%20PM

Without this set up you will return results for all properties that have any of the selected property facilities. What I wanted was for any property that HAS ALL of the selected property facilities in it’s list of property facilities from the hotel listing data field of property facilities list to be displayed.

After this you will need to set conditionals in the repeating group to change the data source so that you can set the sort parameters.

57%20PM
57%20PM672×866 65.1 KB

It is important to set the sort before you set the filters. I don’t know why this has to be, but if you were to try and set filters before you set the sort you will get no results displayed. Big thanks to @mente12 for help with that.

I won’t go into all the details about how to set the custom states or how to get to display the sort or filter options on the page for a user to select or deselect.

One tip though when working with custom states, is to on the page set a display of what the current custom state setting is so you can see if they are getting set correctly, and to help troubleshoot.

Thanks again to all those you have helped me with this.

@NigelG @mente12 @keith @mebeingken @dan1 @emmanuel

All had played a role me continuing my development on Bubble and giving me much needed assistance, often for free, and helping the community. Much appreciated.

Now back to building.

For references I had posted the following questions in the community forum.

43 Likes
2

Thanks for the mention. Glad to help.

Rick
Bubble and other platforms Freelancer

3

@boston85719
That was great help!
But I am not quite understanding I how would make all those Checkboxes to be created as a RG on themselves.
So in essence not making them one by one because I might want 60. So then that would lead to a Workflow bloat.
I managed to make them but I don’t understand how to make an aggregated query.

In my PoV goes something like saving the state in a List of Yes/No. But how do I correspond a Yes for the First Checkbox, No for the second Checkbox etc in order to apply them in a query later?

Thanks in advance!

4

Your database structure is important.

Your R.G. is using the datasource of whatever datatype you want for checkboxes.

If I was making a car website, I’d have a datatype of car make ( Ford, BMW, Honda etc. )

Then my R.G. is set to “do a search for car make”

Then in my R.G. I place a checkbox. Then use “current cell’s car make” to reference the value the checkbox is representing when you create a workflow…you have one workflow for using the checkbox in the R.G. no matter if you have 3 or 3,000 car makes.

Why are you wanting to have a list of yes/no?

5

@boston85719 Hi, thanks for the answer.

Then in my R.G. I place a checkbox. Then use “current cell’s car make” to reference the value the checkbox is representing when you create a workflow…you have one workflow for using the checkbox in the R.G. no matter if you have 3 or 3,000 car makes.

How do you join them if multiple are checked?

I want to have multiple filter toggles like the following:

QuizCreator2
QuizCreator21322×743 119 KB

if I make a workflow for each one of them would be non manageable, especially if they keep growing. Except if I understand something wrong and the workflow if generic enough to apply for each toggle which is what I am aiming for!

In essence I want a generic way to make toggle which I achieved to manage with an R.G.
and I also want a way to have a generic way to make a query not having sooo many combination of conditions.
i.e.
:heavy_check_mark:︎ maths, :heavy_check_mark:︎ beginner, :heavy_check_mark:︎ answers
to be able to understand that those are ON and make the query on its own without to have to go in Workflows and make one for each one of them.

I may don’t understand something fully in your solution though!

1 Like
6

You are doing something different than what I have done…I am not using on cell to show the different filters possible for each filter type

For example I wouldn’t have difficulty in one cell with all three choices in the same cell.

Instead I would have a R.G. for difficulty and three cells each containing one choice.

Then you use custom states as explained to save the selections.

But you might find you can get what you need, which is a way to make a query return the results needed, albeit in a way that might be a bit more time consuming that hoped for.

One thing you could try to do is use a SKU and key type of set up, by which you add the keys together for each component to create a SKU

so maths, beginners, answers would look like a SKU of M-BG-ANS

math has a key of M
beginner has a key of BG
answers has a key of ANS

These keys are saved as a datafield so you have name ( Maths ) and key ( M ) saved in the database

Then you could create a query that searches to see if it contains the keys from the SKU

But this too would require a decent amount of work and setting up of conditions.

I am not aware of a generic way to do the complicated searches.

7

this really helped me get my App over the line - thank you

8

No worries. It was something I that almost had me drop bubble. Luckily a community member showed me how, so I felt like putting it up for others.

9

tell me about it! This was my third attempt! Thank you so much.

The next stage is to add check boxes to my repeating group (so only the checked items save)

Have you had any joy with that?

10

Yeah, you just need to be comfortable with “parent groups” thing. In the repeating group, create a group element to use as a container for all elements you want to put inside. Make that groups data source the current cells thing…make sure the data type of the group is the same as the repeating group.

Then make your checkbox (make a custom one using a group and an icon) and set that group to the parent groups thing and make the data source the same as the container group which is the same as the repeating group.

Then when you click on the group (custom checkbox) you can make changes to the parent groups thing in your workflows.

1 Like
11

Hi,

Can you let me know if you can see the video at the end of this URL. I have attempted to record my screen as i do not think i would be clear enough typing it out!

https://bluejeans.com/playback/s/uj5gDnCw0UVGWHRLLxNjp5yoYQgjbiEX2IugiLE6d2KtIwAgoq1V4LnNgKTq3mCa

12

It brings me to a sign in page

13

Booo :slight_smile:

I have no idea how everyone is recording their screen but I have had to upload to youtube.

If you still have time could you have a look and let me know if you have any ideas:

14

Create a custom state called selected items or whatever the things are that they are selecting using the checkbox. When they check a box add that ‘current cells index’ to the custom state selected items. The custom state will have a data type of number and be a list as the current cells index is just a number.

You are creating a list of numbers representing the selected item number from the repeating group.

Then in the workflow you have successfully running that goes through each of the repeating groups items you can set a conditional to add only the repeating groups items whose index is in the custom state selected items.

1 Like
15

Hey,

That is what I was thinking of doing but i am worried that the custom states will not sync up or remain in line. I will give it a go tonight and let you all know how i get on !

16

Hi @boston85719,

Have you ever seen this issue with iconic check boxes?

17

I don’t use iconic check boxes. I just make my own check boxes.

18

Ahh ok, after spending so many hours getting this to work just to have go and do it again I am so gutted!

I will give one more day to see if anyone responds to my bug item before reworking the page again.

Thank you :slight_smile:

19

Get used to it and don’t hesitate to rebuild something to possibly get better results.

I just spent two days putting together a dashboard and trying a round about way to get lists of things for a particular date. I got it to work, but it wasn’t very performant and I thought there could be a better way.

I looked through things and found something I thought could work better. Tested it, it worked better and was easier to set up the entire page to use it. Now my page load is 30 seconds faster, and the page only took about 4 hours to set up compared to roughly 16 the first way I tried.

As you get used to trying to do things in different ways to find ‘the better way’ it helps you learn and going forward it makes life much easier.

1 Like
20

I am still so sad - there is no gif available to communicate properly.