Hi Everyone,
I want to have it such that amongst a group of options a user can select and deselect certain options and that reflect cleanly in the database.
For example if there are three options apple, banana, and orange - each with a corresponding button. When a user clicks a button it creates that data, but if they click it again it deletes it.
I’ve tried for the last few hours, and I just can’t figure it out. Any help is much appreciated. 
This is possible in Bubble, but it may be easier (and use less workflows) if you accomplished this using custom states, instead of making changes to a thing. If you share a link to your editor I can show/explain how to set this up. 
Another option (however may be a bit more tedious) is to create a couple of Workflows per item. One Workflow would have an “and when” for when the user’s list of choices does not contain that choice, and one for when it does.
The user could then easily add and remove choices at their own will because of how these two Workflows would work for each choice.
This may look confusing, and apologies in advance for any mistakes (I’m on my phone at the moment), but I can send a link to a demo for this later today.
Hope I helped!
Hi Fayewatson,
https://bubble.io/page?type=page&name=project&id=vremodelmate&tab=tabs-1
Your help would be amazing!
Hey Blowenthal,
I’m open to any suggestions!
So I took a look at your app and here is what I would recommend:
Have a button somewhere on a different page that allows the user to create a new submission. That button will then create a new submission and redirect the user to the page that is shown in your screenshot. You should change that page to be of the data type “Submission” so you can reference “Current Page’s Submission” in your Workflows.
Within the Workflow for the button that creates a new submission, be sure to send the result of the step where you created the submission as data to the choices page. That way, the choices page can reference that newly created submission in Workflows.
From there, you can create two different Workflows for each choice (like I explained above).
I would be more than happy to do this for you, however please let me know if it is okay to edit your app with these changes. I don’t want to change anything you don’t want me to change.
Blowenthal,
Pardon my ignorance. I’m not sure if I quite understand. But if you could create your solution and walk me through it that would be helpful.
Of course! Would you like me to create your solution on the link you posted in a previous reply or in a separate app?
Additionally, I would be more than happy to walk you through it via Skype or a similar platform if you want.
Hey there, I totally agree with @fayewatson that you’re better off using custom states and then saving the final selected list in your Next button click workflow so that the page responds a little faster and you’re not having to modify database fields every time (not that doing that would slow it down by a lot, but you’ll notice a little bit of a hold.
Check out what I did to make it work for Windows. Click on the W. I also set a conditional on the white shape so that you could visually see that it has been added and then removed. Study the custom state setup and try applying it to the other ones too. It would be the same logic but with different text values (and change the conditionals for the shapes to respond to the proper text values.)
I might also recommend using a repeating group for this page so that you really only have to build the workflow once, but anyway, check it out!
Gaby | Coaching Bubble
Thank you! I’ll check it out now and give an update.
Hey @victor, there are definitely a few ways to do this as Brian mentioned; it will probably make things the easiest to use a repeating group for this as Gaby said. I created a new page on your app (project_clone) which does this, and everything seems to be working as expected. I wish I had a bit more time to create a tutorial of every step to show how to do this but I’ve got to run now. @romanmg if you have any time to explain how it works, that is totally cool too of course (but no pressure). 
If not, I’ll definitely create the step-by-step later today.
Preview:
https://vremodelmate.bubbleapps.io/version-test/project_clone/sample:user?debug_mode=true
Editor:
*In this example, there’s a second repeating group on the left which isn’t necessary. I just used it to show that the Selected List will update as an option is ‘unchecked’ (shown below):
It worked perfectly. Completely lost as to how to recreate. I’ll keep trying to deconstruct but a step by step would be awesome!
Awesome! I’ll do the step-by-step now, if you could temporarily turn the app back to development mode (instead of read-only)
Hi Faye,
Just opened it back up. Thanks for all your help again!
Great! To start this, I made a few changes to your original set up. Instead of using Shape elements to create the white square titles, I used the Group element to create the same effect. Then I placed the circular Button and Title within that Group.
Then, I created a new Data Type called “Project” (shown below):
In your app, you have 6 Project data entries (if you count ‘Other’ as the sixth data entry). Here are those in the App Data tab:
I created the Title field for each Project’s title (“Title”, Type: Text, List: No), and the Initial field for the Circular Button Letter (“Initial”, Type: Text, List: No).
Then I went back to the UI editor and created the repeating group with 3 rows and 2 columns (for the 6 Projects).
In the above screenshot, the white Group element (discussed at the beginning) is repeated within each Cell of the Repeating Group. Repeating Groups have to have a Type of Content, and Groups also need a Type of Content (since you’re usually using Repeating Groups or Groups to display data in an app). In our case, we want the white Group to display the data of the cell that it is in, which is why the data source of the white Group is: Current Cell’s Project.
Within the white group, are our two elements (the circular Button, and the title Text). Our data source for the text and button must begin with “Parent Group’s Project”; “Current Cell” is not a dynamic option to select because the button and title are technically housed within the white Group. Regardless, the button and the title are dynamically displaying the Current Cell’s data, it’s just called 'Parent Group’s data since they’re in a group. Since the white Group’s data source is Current Cell, that’s why the button and the title are displaying the same data they would if they were directly housed within the Current Cell, instead of the Group.
So, then we set the dynamic data of the button to be “Parent Group’s Project’s Initial” (shown below):
And then the title Text’s dynamic data is “Parent Group’s Project’s Title” (shown below):
Ok, now we’ve got the repeating group set up, and it’s displaying the correct data in preview mode
The next step is to create the functionality where a User can easily click any Project, and ‘select’ it, causing the selected Item’s circular Button’s background color to become light blue (or any color).
The first thing we’re going to do is to create a completely transparent Group element, around the size of one cell:
I named this Group element “Clickable Group Selector”. This makes everything easier on us so that, instead of creating identical workflows on the white Group, the circular button and the title (tedious), we can just create one workflow for this Group and place it over the top over all three of those elements. That way, the User can click anywhere in the cell and select the Project. So I just dragged that Clickable Group Selector into the first cell of the Repeating Group (shown below):
And then set the data source of the Clickable Group Selector to be “Current Cell’s Project”:
Now we need the workflows and custom states to create the selected, and unselected functionality, since we’re not using checkbox elements it’s a little tricky, but will definitely make more sense after you do this a few more times.
Custom states are great to use because we’re not making any changes to our database using custom states. Our list of Projects that the User selected are stored within the custom state, not our database - which means that we’re not making any changes to the database, and therefore we aren’t charged any workflows using custom states. When the page is refreshed, the data within a custom state is cleared. There are a lot of examples in the forum which explain custom states more in detail, but for this example, we’re going to create one custom state on the page “project_clone” (since that’s the page name). Here’s how to do this:
The workflow I first set up is: When “Clickable Group Selector” is clicked → Element Actions → Set State → Element: project_clone, Custom State: create a new custom state…
Since our repeating group’s Data Type is Project, we need the data type of this Selected Projects list to be Project. And then we tell Bubble it is a list (by checking the box), since a User can select more than one Project cell at a time. If a User could only select one at a time before proceeding, it would not be a list and we wouldn’t check that box. In the workflow, the event will then look like this:
Now we need to set the “value” of the custom state. Right now, we only have a list, and we need to specify when to add a Project to that Selected_Projects list. We want all Projects that are clicked by the User to be added to this Selected_Projects list. So we’re going to say the value of this list is the following:
project_clone’sSelected_Projects(our list, which is empty on every initial page load):plus itemCurrent Cell’s Project.
So if we were just to leave things as they are:
Then every time a User clicks a Project, it will be added to our Selected_Projects list. That’s great and that’s getting closer to what we need, but we also need to allow a User to deselect that Project (or ‘remove’ it from our Selected_Projects list). In our first workflow, we used the “:plusitem” option, but there isn’t a “:minusitem” or “:removeitem” option in Bubble. This is where things get a little trickier!
As a workaround, we are going to tell Bubble that when the Clickable Group Selector is clicked AND when project_clone’sSelected_Project’s [already] contains Current Cell’s Project (the User is trying to deselect a Project they previously selected), then we need to set the value of the our custom state to be this:
The difference here is that we’re using “filtered” as a way to remove an item from our Selected_Projects list. We are ‘filtering’ out Projects that are deselected by the User. If you click on filtered you’ll see the following:
Here we’re just telling Bubble that if a User clicked an already selected Project, our Project_Clone list must be filtered, in that it can’t contain any Projects with the unique ID of the Current Cell’s Project which was just deselected by the User. It’s a little difficult to explain this, but if you can just remember that this is the only way to tell Bubble to ‘deselect’ the Project from our Selected_Projects list, since we don’t have a “:minus” option.
Now we have our two workflows (almost there!):
Our add this Project to our Selected_Projects list, Workflow:
And our remove this Project if it is clicked, and already within our Select_Projects list, Workflow:
So our last step is to create a few more conditions to our workflow when a Project is clicked for the first time, or if it’s been deselected and clicked again. First, we need to specify to Bubble that we only want to add Projects to our Selected Projects list during the following times:
So for that second item, we need to tell Bubble to re-add the Project to our Selected_Projects list if the Selected_Projects:filtered list contains them (our ‘Removed’ list of Projects contains them).
For example, if a User clicked Windows, it’s added or ':plus’ed to Selected_Projects. Then if the User clicks on Windows again (after it’s already in the Selected_Projects list), it’s now within (Selected_Projects:filtered) - meaning the User wants to ‘deselect it’. Then the User changes their mind again, and wants to actually select Windows after all, so Bubble knows to then ‘move’ the Windows Project from Selected_Projects:filtered, back to Selected_Projects.
The complete workflow is set up like this:
‘When’:
‘Action’:
To make sure everything is selected/deselected as it should be, I created the repeating group to the side with the following data structure:
The data source is our project_cloneSelected_Project’s list of Projects. The repeating group is going to display only the Projects the User has selected.
Last but not least, we need to change the color of the Button to notify the User that they have selected a Project. So we’ll go to the Conditional Formatting of the circular Button and set up the following statement:
The statement there is pretty straightforward, when project_clone’sSelected_Projects contains Current Cell’s Project, the background color of this button is a light blue.
Now we’ve done the hard part of selecting and deselecting projects using custom states. How do we save that? To do this, I created a new data type called “Estimate” (though it could be anything you want).
When a User has successfully selected all of the Projects they need, the User clicks next, and this workflow occurs:
Here we’re doing → Data → Create a New Thing → Type: Estimate → Field to change: Projects List add list project_clone’sSelectedProjects. Of course there’s more functionality, and data structuring to be done, but this is how you could start to collect the information that a User chooses from that Select a Project screen.
And those are the steps! I’m sorry I didn’t realize there were so many steps, and I hope this isn’t too overwhelming. Custom states are very tricky at first, but definitely become easier as time goes on. If any of this was confusing or if I can re-explain anything that didn’t make sense, please feel free to let me know.
@fayewatsonso you are a life saver - it worked beautifully albeit slightly complex. The only issue is the data is coming across as numbers and not actual words.
Any idea what’s at work?
just realized it’s showing the unique id…I’ll provide an update if I find a solution
No problem at all! 
Since the Estimate is storing a list of Projects, that is always how Bubble will display the list in App Data view (with the Project’s unique id). You can display that information in a repeating group. Now, if you were to have a repeating group with a Type of Content: Estimate and the data source is Do A Search for Estimates. In the cell of the repeating group you could have a text element with the dynamic expression: “Current Cell Estimate’s Project’s Title”; in preview mode that will display the lists with commas separating each entry.
Another way is to place another repeating group within the first cell, set the type of content to Project, and the data source is Current Cell’s Estimates Projects. Then create a text element within that inner repeating group’s first cell with the dynamic expression: “Current cell’s Project’s Title”.
You my friend are a Rockstar Bubbler. Appreciate all of the help. I wouldn’t have figured any of that out by myself.
Aw, thank you so much @victor!! It’s my pleasure! And it can definitely seem like a lot at first, but once you get the hang of data structuring and querying your data, building your app will absolutely become much easier!
