Repeating Group - Creating a Property Features/Amenities List for a Property Listing

Hi Guys,

I am trying to create a user feature, where they can pick & choose related features/amenities to their property listing loaded from a RG. I can create the entries, based on the user’s selection to the DB along with using custom states, but I am not sure how to show the users selected entries when they later go back to the step e.g. leaving the page and coming back again, to see the what they have selected and adjust. I am also slightly stumped as to how to delete an entry when they uncheck the selected feature/amenity.

So I have a data type called:
image
With the data types:
image
This is where I have loaded all the available features/amenities they can pick n choose from.
This is fedinto the repeating group, details below:
image

The data type for the users selection which saves the selected entry is:
image
With the data types:
image

So the only difference is that there is the ability for a user to enter a small description of the feature in the ‘Owners Note’ field.

The repeating group has a image, as a checkbox, which is using a custom state, when clicked state is selected equals yes and vice versa.
image

On the main listing data type:
image

I have ‘Features’ as a field (list)
image

How can I show the user there selected entries? As using states will only temp show until they leave the page.

Also when a user unchecks a feature/amentity from the list, how can I have it delete the ‘Feature’ from their listing and not the ‘Property Features Item’?

Any guidance would be greatly appreciated.

Cheers,
Luke.

There is possibly a multitude of ways to this natively in bubble like most things. I use this approach extensively and opted for https://bubble.io/plugin/browser-storage-1514075906887x122169717659009020 saving things to the users browser storage and then deleting if necessary. In my case it was imperative that changing pages… Leaving the site completely and returning would not have a detrimental effect on the user experience… I did not want to load up the database nor were custom states suitable

I did exactly this and it took me a while to work it out! Basically, you want to create a thing type “Amenity”. You’re also going to want to create an admin page for creating new "Amenity"s. Think of these objects as system globals that are only created by you or another administrator. They represent all of the different Amenities that one of your “Property” might have. Use your admin interface (you could also do this in Data > App Data but that interface is gonna be more clunky than what you could build yourself) to create them.

What you end up with is a list of "Amenity"s that just exists there in the database, each Amenity ready to be attached to other things.

Now, on your Property data type give it a new field. That field (which you could call “Amenities”) should be of type Amenity and it is going to be a List.

Your user interface for selecting what Amenity items apply to the Property in question can now just be a repeating list populated by “Do a Search for… Amenitys”. Put a checkbox (or your own sexier-looking checkbox type interface item in the cell). When the checkbox is toggled, add or remove the Amenity from the Property’s Amenities (which is a list of type Amenity)… Like so:

As you might imagine, Step 3 in this workflow is simply the case of doing Amenity List ADD if the Amenity is not already in the Property’s list of Amenitys.

I got quite a bit fancier with all of this and my own “Amenity” type actually has several list type fields on it (such as “Amenity Category” and “Amenity Options”). But this should get you started?

Best,
Keith

1 Like

Clarification on my comments above: The point is this – you essentially want to perform the equivalent of Autobinding when the user clicks, unclicks, or customizes an Amenity and add/remove the item right then. Don’t worry about storing a state locally. This makes no sense.

As for allowing customization of Amenity objects (you say, for example, that you want the user to be able to enter descriptive text). To enable that in the most Bubble-appropriate way, do this:

Create a new data type called something like “Amenity Custom Description”. Amenity Custom Description will have at least two fields like:

[Property] (type Property) and [Custom Description] (type text)

Now on your Amenity data type add a field “Amenity Custom Descriptions” which will be of type “Amenity Custom Description” and it will be a list.

When a user customizes the amenity description, create a new thing (a new Amenity Custom Description with the Property and description) and ADD it to the list of Amenity Custom Descriptions on the Amenity in question.

You actually don’t need to worry about whether you ever REMOVE an Amenity Custom Description from the list. If the user disables the Amenity in question, you can just leave the customization there so that – should they turn the option ON again – the customization has persisted (it’s still in the list).

-K-

1 Like

Thanks for your reply, I’m not sure I want to go the browser storage route though, as I’d like to contain any content within the Bubble database. Cool plugin though, this opens up a few ideas I had, appreciate it.

Luke.

1 Like

Great thanks for both your posts. It does take some thinking :wink: but I think I follow…I dont suppose you have a link to your editor, no worries if you dont, I am going to try and re-work what I have today and I’ll post if successful the full workflow for future bubblers who stumble into the same puzzled thinking.

The only thing I am not sure how to work is the process of using a custom checkbox e.g. an image rather than the input checkbox. As I will be a custom state with the image, when clicked via the workflow and the condition when selected = yes then show the checkbox ticked image. I need to be able to show the user what selections that have checked or not checked when they come back on the page. I could try a ‘On-page load’ set state…I will have a play and see if I can workout, no sure if you have any ideas or what I have said makes sense :slight_smile:

Cheers
Luke

This is why you want to use a repeating group sourced from Property’s Amenities List… you’ll magically have the interface you seek. I can’t share my editor but I could post a video sometime soon-ish (not today unfortunately)!

1 Like

Hi Keith,

Had a crack at this over Sunday but still slightly puzzled as to the logic of adding or removing a feature and also displaying to the user a checkbox of a already selected entry in there list of amenities. If you could share a video or even some screenshots that would be excellent.

Cheers,
Luke

Hey Luke,

Will do a quick one this AM. There’s a lot to cover here, but this general concept is very important. Will put something up here this morning.

Best Regards,
Keith

And ha ha, this turned out not to be a quick video but a mega-video. Uploading now. Covers a lot of cool stuff but may make your head explode. Hopefully it’ll be helpful instead. … Video will be posted here shortly.

2 Likes

Here’s a pretty comprehensive video about how I do this (and why you should, too). Also teaches you how to make custom checkbox type behaviors and on/off indicators and a lot of other stuff!

https://vimeo.com/278205539

Hope this helps, @luke2!

16 Likes

Wow, thanks so much for this video - just started going through this now, but didnt expect an hour plus long guide/walkthrough. Huge thanks for taking the time to help a fellow bubbler (and anyone else who might stumble upon the same logic requred) :+1:

Cheers,
Luke.

Well, these techniques are useful over and over again. Like for user roles in your app, regional settings, user preferences, etc.!

You’ll also use a similar technique (without having to predefine room types in advance) for things like bedrooms. (E.g., Bedroom should be a data type, as should Bed. Listings should have a list of Bedrooms, Bedrooms should have a list of Beds.)

-K-

Thanks again for the walkthrough on the video, have gone through it and the logic all making sense now.

Using the ‘Terminate this workflow’ is a handy one, never looked at it from that angle, its where I slipped up with regards to adding or removing that amenity from the list. Also the repeating group within a repeating group for the category is some clever stuff - I’ll need to put this to use with the bedrooms section e.g what type of beds are available within each bedroom.

The Amenity description was useful as I will follow something similar to this, probably will go the auto-binding route as well, as its more user friendly then a mini save button I guess.

Not sure if this would helps, but for the question mark for revealing the group of amenity descriptions, instead of states it could be leaner to use the Toogle workflow to the collapsible group:
image

Cheers Keith,

Luke.

1 Like

Hey Luke,

Well damn, I never noticed collapsible groups had that property/action! DERP!

(I’ve not seen anyone point it out before… yeesh.)

And yeah once you design your method for handling customized descriptions, you don’t need a button in your UI. I was just figuring out in real time how one might design the data model and interface for those.

Cheers,
K

Hi Keith,

Yes I was in the same boat, never noticed it but handy to save on those yes/no states :wink:

Good point, I agree - more seamless without the actions on buttons, good old auto-binding.

Just a side note, not sure if you have come across using Stripe subscriptions models (with the Bubble Stripe plugin), such as the listing site you are working on? As I posted a question not too long ago, but haven’t had any joy yet.

Post here - if you have any thoughts it would be much appreciated:

Cheers,
Luke.

Hey Luke,

Sorry, didn’t see your reply but just noticed it now. So, simplest thing seems to be to create the Product as a recurring subscription type thing in Stripe. Since you’ll know what people signed up for, there’s nothing keeping you from sending reminders or whatnot.

I’ve not fully built this out yet so don’t have any tips in terms of potential gotchas.

Best regards,
Keith

@keith this video literally just saved me a mountain of grief. thanks so much for putting it together.

1 Like

Sorry it’s so unrehearsed! I should probably redo this one at some point. Also, as Luke pointed out, there’s a point at which I could have simply toggled an element’s visibility with the “Toggle” action and it would simplify things a touch.

However, this is still exactly the approach I use to manage large numbers of Boolean states!

I need to allow users to make a list of items they need for a type of gift registry. And then gifters to be able to chose and check off items. How do I do this?