Set conditionals/workflows to only allow one input from multiple Ionic toggles

[charlie_webb]

Hi there,

Im having trouble writing conditional/workflows for an input form. I have 4 options all with an Ionic toggle and the user needs to select 1 but the input cant be empty. Any help would be greatly appreciated.

[thekeybeats2]

So the help you require is both:
-Cannot be empty
-and, toggle only 1 at a time?

Let me know

[chris.williamson1996]

Not 100% sure if this will work but try it out.

Set a page state. Type number.

Set toggle #1 conditional to if state is not 1 status unchecked.

Set toggle #2 conditional to if state is not 2 status unchecked

Same for other 2.

Workflow for each will change the state to the coorisponding #

Ex toggle 1 will set state 1 when checked.

This should effectively only allow 1 toggle to active at a time and you can use the state # to save desired result in workflow.

Ideal route would be something like a radio button, there are plugins that make them look nicer or you can custom style it with CSS.

[charlie_webb]

I had a go using states but i couldn’t seem to work correctly.

[charlie_webb]

Yeah thats the idea ill put a picture of my app so you can get a better idea of what I’m after.

[thekeybeats2]

This is a slightly long one, but I need you to trust me that you’ll learn a lot of new things if you’re relatively new to bubble.

So, my recommendation would be to first create an option set based on each of those questions. We’re doing this because I’m assuming you’re gonna want to save the data to the database right? It would be annoying to save that entire line of text in the database.

This is the option set. I called it “Status” (remember this). B or I is British or Irish, etc.

Then I’d give each of those questions’ groups a type of content of “Status” option set. Then, give them the appropriate data source. Do this for all the groups. This would be the first and second group.

Now you can either create a custom state to save which option they chose, or tell the “create a thing” or “modify a thing” workflow what choice to save based on the toggled group.
I’m going to create a custom state as that would require less conditionals when “creating or modifying a thing” i.e only when A is toggled and B is not toggled and C is not toggled etc. It’s just too much. Instead, with the custom states method, we’d be able to just refer it to the custom state with one single workflow.

So, create a new custom state on the page that will hold one of those statuses from the option set. Make sure it’s not a list since only one can be accepted.

For the custom state to work, let’s create a really simple custom event that sets the custom state’s status. I’d rather trigger an even 4 times rather than copy the same workflow 4 different times.

This is the custom event. Notice that I added a parameter called “status” that will hold one of the 4 options from the Status option set. We need this parameter to refer to the parent group of the toggle’s status. Remember the parent group’s status is what we filled in the data source for all of the groups (image 2 & 3).

Now this the actual “set state” workflow that is within that custom event. Notice that it is using the “status” parameter that we created for its value.

So, that custom event makes sure that the custom state saves what status is selected, however, the toggles can still all be toggled, despite the fact that only one status can be set. To make it so that the user only sees one toggle toggled at a time, we need to create another custom event that will reset the group’s data, which will also reset the toggle. The function is called “reset a group/popup”.

There are no parameters for this custom event. It is important to choose the correct “only when” statement. The first two functions will look like this:

Essentially, you’re telling this workflow to reset the data of a group, only when the Status of the custom state, is not the Status of the current group of the toggle that is being clicked. That is a mouthful.

So do that “reset group/popup” function for the remaining groups. make sure that the “only when statement” is changed.

Now the last step is to create 4 separate “Do when an input’s value is changed” workflows for the 4 toggles. Inside those workflows, you trigger the 2 custom events we created.

Trigger the “set status” custom event first. Remember the “status” parameter we used? Well, make sure to set its value to the parent group’s status in this step. After doing that, trigger the other custom event that resets data. Make sure to trigger the “set state” event first.

All the toggles should look like this. Make sure you change the “only when ionicToggleX’s value is changed”

Everything should look like this now:

Now to save the data you’d first add a new field in the “user” data type called status with content type “Status” (Which is your option set). Add a button that will modify the current user, modify the status field we’ve just created, set its value to the Status custom state on the page.

To make sure the input isn’t left empty, have an “only when” statement on the button that modifies the current user → Only when Custom State “Status” is not empty.
Inside that same button’s workflow, add a workflow that shows a text that says, for example, “you cannot continue without choosing one of these options”. This workflow will have an only when statement of “Custom State Status is empty”.

Voila!

Hope this helps you out. Please let me know if you have any questions,

Cheers!

[thekeybeats2]

You would think it’d be that simple but I also tried with dynamic status and couldn’t get it to work
But yeah, hope my explanation is useful!

[charlie_webb]

Thank you so much for putting the time to create such a detailed explanation. It was very helpful. I’ve just added the steps you posted to my app and it works a treat.