"Selecting" Buttons

Let’s say that I have a number of buttons that represent toggles or selections users can make, in the same way, tickboxes work.

So for example, I’d ask users to select a number of options that apply to them.

I would like every “selected” button to change colour, while users would be able to “unselect” options by clicking on the button, which would prevent from its original colour.

I’d also want users to submit all of the information at some point, so every button will need its on value and state.

How do I begin doing this?

1 Like

Hey @ido1 :wave:

That’s a good question, something that many of us do on a regular basis for a nice UI.

You can do this a number of ways. One way is to use a set state. Set it as a list and add things to the list when the user clicks on it. Just remove it when they click on it again. You can have two workflows on a single element.

Does that make sense? I am sure I can find an example to send you. I just need to find it. :blush:

I found an example that uses URL parameters as well, so even if the user refreshes the page, it will stay with them. Check it out:

Editor: Test805421 | Bubble Editor
Preview: https://test805421.bubbleapps.io/version-test/category_list_parameters?debug_mode=true&categorylist=Hikes%2C%20Concerts%2C%20Beaches%2C%20Experiences

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

Hey @J805

Thank you! I think I get it - I’m going to give it a try! Can I ask a slightly more complex question?

The data structure here looks relatively simple - we have a number of event types to choose from. How would you record them in the database? Would be one cell that contains everything that’s been selected? Or perhaps one cell for each category with a yes/no parameter inside depending on what’s been selected, or perhaps something else?

Say that my categories could be broken down into subcategories. In my case, I would use the button to let users select timeslots. So every page would have a number of days first - let’s say “Monday, Tuesday, Wednesday”, and then for each day, a number of timeslots. Let’s say “8:00am-12:00pm”, “12:00pm to 4:00pm” and “4:00pm to 8:00pm”.

So, users will be able to select “8:00am-12:00pm” on Monday and Tuesday, which complicates things :slight_smile:

1 Like

I would save them separatly. It will give more control of your data…

And the weekdays I would save as a list of texts…

Hey @ido1 :wave:

It’s hard to know without knowing a lot more about what you need to use your data for.

I would suggest trying one way and seeing if it works for you later. If it doesn’t work for your needs, you might need to adjust it.

I always try to avoid anything that has a bunch of fields in the database with yes/no fields though. It’s usually better to save a list. I found that out the hard way when I was learning in the beginning.

Anyways, hope that makes sense. :blush:

hey @J805

The highlighting works! I got it now - and it’s actually pretty simple! Now it’s really the database schema that is the challenge.

Let me try explaining this again if that’s OK :smiley:

I’m building an internal app for availability submission. In a nutshell, every week, I let the team select timeslots according to their availability so that WE use them to schedule shifts.

The front end shows 7 columns, each one for one day of the week, and below, they can select timeslots like 9:00 am - 10:00 am (that’s where the highlighting buttons were for )

Once they submit, I’d like to be able to do 4 things:

  1. See what’s been submitted for further action (manually, for now)
  2. See that a submission has been made for this week so that we can prevent users from submitting twice by accident)
  3. Use the data to show employees what’s been submitted.
  4. Find out easily which similar submissions - specifically, for every user, which other user has submitted the same day+timeslot

Hey @ido1 :wave:

That makes sense. How is your database set up? Maybe you can take screenshots of your apps database and the page you are creating? Maybe a video explaining what you are trying to do while showing us in your app what you have so far? It’s hard to help unless we have more information on your setup.

Hope that will help a bit. It’s sort of a big question to be answered on a forum. :blush:

@J805

Well, I’ve started simple. The buttons are working. So, right now, once the user has submitted their availability, the slots are stored as a list in a row with the title of the day, so for example (Monday: 8:00, 12:00, 20:00). I have 5 columns, one per day of the working week.

Hey :wave: @ido1

How is the database set up for it? Are they option sets? Date time fields? Text? Are they a data type themselves?

This will help to understand how to direct you in the right way. Otherwise we might be telling you to do something the wrong way. Hope that makes sense. :blush:

@J805

Hey! Thank you :slight_smile: I am not sure I’ve done it correctly, but:

  1. I put all of this in the User table
  2. Each one of these values is a text data type
  3. The cell is a list.

One way I see it (but perhaps I am wrong) is:

Every user has a combination of user id (emailAddress) and selection categories (A,B,C,D), in which we have a list of texts, each text an hour (like 8:00, 9:00)

What I want to search for (in the backend): For every user, look for other users that have a similar category + value, so for example, A:9:00.

When similarity is found, in a new table, put user1, use2, A,B,C,D and the match found in its relevant category.

And lastly, I want to display this new table, in a similar format, on a page.

Hey @ido1

I’m not sure I follow exactly what you have in mind. Try it and then when you have an error you need to work through, post a picture of the issue, then we will try to help you out with it. We will just have to do it a bit at a time till we help you figure out a good solution. :blush:

I agree @J805

So here’s the first challenge. In the table, I have a value called timezone which represents the number of hours I would need to add or subtract from the user’s timezone in order to calculate what their time would be in UTC+0.

I’ll compare all the submissions in UTC+0, so for example, if the user is in France, they’ll submit 9:00, the timezone value is -1. I have another value called timezoneAdj, where I store the adjusted time (in this case, it should be 9:00-1 hour.

Can this be done?

I tried something like this, but it didn’t work:

@ido1 That’s a good example.

If you are saving 8:00 as text, you won’t be able to do any calculation on it.

So, for that to work, you will might need to save the time field as a date in your database. Then you can do things like +hours or -hours.

Another possibility would be to save it as two fields, one for hours and one for minutes both as numbers. Then you can do calculations on it because it’s a number.

I also think there might be a plugin that you might be able to find to store a time field.

Hope that makes sense. :blush:

@J805

Oh. How can I use the time field if I don’t have a date to assign to it? So far what I’ve done is a bit too complex, but may work -

  1. I’ve used one parameter to save the user’s original submissions as a list of numbers (8, 10, 12, etc) That’s because right now submissions are based on round hours.
  2. I’ve used a second parameter as a single number for each calculation. The number changes every time a calculation is made, which I assume is in the order of the actions in the workflow. (Like 8,10,12)
  3. I’ve set a third parameter, which is the timezone (which is a number) + the second parameter
  4. I’ve used a fourth parameter which is is a list of numbers. Once the 3rd parameter is calculated, I add it to the list.

What I have in return (which seems to work, but probably needs optimization) is:

Timezone: A number representing the time difference between the user’s timezone and UTC+0 (example: for France, it’s -1)
Parameter 1: List: Original time submitted, (example: 8,10,12)
Parameter 2: A number representing the current calculation (example:8)
Parameter 3: A number representing the current adjusted hour (example: 7 (based on 8-1)
Parameter 4: A list representing the submitted hours in UTC+0 timezone (example based on parameter 1: 7, 9, 11)

Imagine if your user select 08:00 and his timezone is UTC -11.
In this particular case, he will have a day change as well…
You have to keep it in mind too… Did you already thought about it?

@rpetribu You’re right! That’s going to make things complicated.
How do I get around it?

@rpetribu @J805 Here’s a thought. I don’t know if it’s possible in bubble though - What do you think?

I build a new type Where there’s a cell for every day of the week. Each cell includes a list of dates in a bubble time format (once I understand it).

I use a backend workflow to update the dates in the table every week with the correct dates for the week. Let’s call this table “scheduling”

Back to the buttons, when the button is in a “selected = yes” state and submission is made, the relevant value is taken from the scheduling table and added to the user’s table in a list of dates. In the same submission, the submitted date + timezone is added to another list of dates so that I have them in UTC+0 timezone.

Yeah, you should be able to do that with backend workflows. If that works for you, that sounds like a plan. :blush: Keep up the good work. Time zones are definitely difficult.

I don’t know how to do backend workflows, so what I’ve done is:

  1. I’ve set up a new table with a list of dates element for each day of the week. I then populated them (manually for now because I’m not sure how to automatically populate them) with a full date + hour for every time slot.

  2. For every button, I pulled the relevant element from the table (they’re always in the same order) and then saved it in the user’s table under an element called local date

  3. For every button, I also saved the same element + the value I had for the user’s timezone under a new element called UTC date

@J805 Would this have been better in a backend workflow? If so, how ?

If it works, the way you have it, I would just stick with it. There is always more than one way to do something. :blush: