Can someone please tell me step by step how to make a toggle icon which can be switched on and off?
I originally had two toggle icons and when one was clicked it was hidden, and the other was revealed. But, I was told in a nother thread to use ionic icons. I don’t see any difference between ionic icons or the standard icons provided by Bubble.
The burning question is, how do I flip the toggle icon from ‘on’ to ‘off’ without using two separate icons?
Hi there @darren.james7518,
What do you mean? I’m confused by what you mean. An ionic toggle has an on and off position…
But how do I set the on and off positions? Also, I don’t think they do have on and off positions, you need two different icons. Here is an example where I have chosen the off icon … I would then have to pull in another icon for the ‘on’ position.
If someone could show me how to toggle on and off I would be very grateful.
I am currently using two icons and have a custom state. When the ‘off’ icon is clicked I set the state to ‘on’ which displays the ‘on icon’.
I have been told that there is an easier way but my method seems the easiest?
You definitely can toggle with one element using the ionic toggle plugin.
This is also what I personally use myself for toggles, since I don’t like the look of the default bubble ones and having manually changing icons created unnecessary bloat in the editor. Plus the ionic toggle is animated.
You can select the default position of the toggle in the “Preset status” dropdown, this does not require any extra elements. You can also have the toggle save and load its position to your database if required by selecting “Dynamic” and then by creating a workflow to save it.
I’ve made a small example of this functionality here for you to test:
[b]Page: https://ionictoggletest.bubbleapps.io/version-test[/b]
Editor: Ionictoggletest | Bubble Editor
Thank you for doing this, I can see the issue, my ionic plugin is not the same as yours? As you can see from my previous screen shot, I have no options for Preset status?
Sorry for not clarifying this. You are using the correct plugin. It’s just a part of the “Ionic Elements” plugin, which comes with a variety of modern elements. In the screenshot, it appears that you are using the Ionic Icon element, which is not the correct one.
Search your element bar for Ionic toggle instead. It should pop up as it’s a part of the same plugin.
I am going to ask a very silly question, where is the element bar?
It’s this bar here, where you drag everything from. There’s probably a better name for it, but I don’t know what it is. Have a look for an entry called “Ionic Toggle”
Ah I have found it! Thank you, I wish someone told me this before, I spent a whole day once trying to get the toggle to work, not knowing the toggle which is inside the ionic toggle plugin in not the toggle needed, ridiculous!
I can’t seem to find anywhere to add a workflow to the toggle element?
No worries. I’ll explain how to give the toggle a saved state.
First of all, click on the toggle element on your page. Make sure the dropdown says “Dynamic”. Don’t worry about the Dynamic status for now.
Now enter your page’s workflow and add “When an input’s value is changed”. Then select the toggle element from the dropdown.
Now add the “Make changes to thing” block and set the thing to change to the location of where you want the toggle’s on/off value to be stored. For my testing purpose I’m simply setting it to the current user. Where you save it will be based on your use-case.
Create a new field, give it a name and make sure it is a yes/no value
Set your new field’s value to “This IonicToggle is checked”
Now head back to your Design page and click on the toggle again. Set the blank Dynamic status to “[Your thing]'s isToggleOn is “yes””
And that should be all. Let me know if you have any other issues.
Thank you for your help. I will try this now …
Perfect thank you, I see now how to add a workflow to the toggle. Many thanks for your step-by-step instructions!
