Issue with Ionic Toggle

Hi. I am trying for the first time to use the auto-bind feature with Ionic Toggle and I’m very stuck.

On my app, I have a “milestones” dataset that is supposed to allow users to toggle an ionic toggle element to “yes” once they reach the milestone. I guess they would also be able to turn it off to “no” if they toggle it that way. The goal I am seeking is to use auto-bind to automatically update some fields whenever users toggle the button.

So far, I have done the following:

  • A row set as a group (parent) - type of content set to the dataset
  • A subgroup that holds text and the toggle - type of content set to the dataset with the source being the parent group’s dataset
  • A toggle with auto-bind and the field set to the appropriate field in the dataset (the field type is set to “yes/no”)
  • Privacy rule on the field is set to auto-bind

When I preview in the browser and toggle to “yes”, I don’t see it updating to “yes” in the dataset.

Any ideas why that is happening? For some reason, bubble won’t let me link a data source to the subgroup unless the parent group type of content is linked to the dataset as well. It seems weird to me but I’m not that great at coding. Any help would be appreciated. Thanks!

Hmm i’m not too sure but here are a few suggestions:

  1. is the Do When Condition is True “when ionic toggle is …” set to “just once”? if so change it to “everytime”. This will stop the toggle from working until refresh.
  2. you mention that there is a group in a row, is this a repeating group? setting up an ionic toggle from a repeating group directly won’t work.
  1. To see if it is a privacy issue, did you try removing all permissions and seeing if that works? You can also try just using the ionic toggle to change the state of an element (group) first before writing to the db to determine if the permissions are the issue.
  2. May be a long shot, but maybe the datasheet needs a refresh? I like having a text on my page to see the change in db happen on the same page so I don’t have to switch back and forth.

Hi. To respond:

  1. I don’t see that option anywhere.
  2. The group is in a parent group that’s set to row. No the icon is not in a repeating group
  3. The privacy settings seem appropriate
  4. I’ve tried refreshing…nothing is happening.

Maybe I’m doing this all wrong. I’ll try to explain better. I have:

  • Parent group that contains a child group
  • Child group contains a text element and the ionic toggle
  • Child group is set to the correct “type of content” but the data source won’t provide any useful options. It only allows for “parent group’s ‘type of content’”. So I end up setting the parent group to the same type of content so that I don’t get an error, but I actually don’t understand why that’s happening.
  • I set auto-bind to the toggle in the child group and set the appropriate “field to modify”. I’ve set a condition on the toggle to be checked when the database field is “yes”.

What I expected to happen:
When you toggle the icon, it automatically writes/overwrites “yes” or “no” to the database and is therefore always in either a checked or unchecked state, depending on what’s written in the database.

What’s happening:
Absolutely nothing

Why isn’t this easier? If they’re going to make these toggles, can’t they make them work?

Oh I see. You are over complicating this! Ionic toggles don’t require a certain data type to be in the parents group. Here’s what you’re gonna want to do:
There’s no need pass a data type through the parent group to the child group. You can have the ionic toggle element on a blank page or in as many nested groups as you want.

  1. Once you have placed your ionic toggle,
  2. You’ll need to go to the workflow tab, click on the “click here to add an event…” button, and pick the “Do when condition is true”.
  3. You’ll see the option “only when” is empty and needs to be filled. search for the “IonicToggle”, select it.
  4. now you’re gonna want to select the option is checked. now add the workflow you want(i.e. make Thing to yes).
  5. follow steps 2-4 but on step 4 do the option is not checked. add the appropriate workflow (i.e. make Thing to no).

I’m not sure if my explanation was well written, so i’ve included screenshots below. Hope this helps!
Note: The underline green option(in the first screenshot) can be switched so it continuously from yes to no.
Note again: if you want the toggle to always reflect what the value is in the database, set it to dynamic and then search for the element in the db (see screenshot 2)


Thanks for your help but it is just not working. I’ve given up with the idea of autobind and will just use a “save” button. But I can’t even get this icon to work properly. When I set it to dynamic (where it should be reading from the dataset a value of either yes or no), it doesn’t care what value is set. It just stays unchecked. I tried adding a condition to check it if the field in the dataset is “yes” and it still doesn’t work. It’s ridiculous.

A hack I have used for the ionic toggle to actually make actions on it, is to make the ionic toggle into a fixed group. Dump a shape on top of it and make the shape transparent. Now you can run actions when the shape is clicked and change whatever you need to, you then just have the dynamic status of the ionic toggle based on that.

That’s a good hack, thanks. But it’s so confusing. Like, the toggle has a built in capacity to change dynamically. Why doesn’t it just work? Anyway thanks to you both for your help.

I got fed up with the Ionic Toggle too!

Now using this plugin and it’s great: ✳️ Switch (Toggle) and Checkbox Plugin | Bubble