I have a question about the toggle icons (not the toggle feature).
a page with two toggle icons, as below:
I want toggle ‘on’ to be green
I want toggle ‘off’ to be grey
I have a custom state ‘Toggle’ set to Yes or No
In the workflow I set the state when toggle is pressed
If toggle is pressed I add a constraint to show toggle ‘off’ with the grey colour
Now, here’s the issue …
The above settings work to switch the toggle to ‘off’, but I cannot get it to switch back to ‘on’.
So, I decided to have two icons (one on and on off) and hide the grey icon when the green icon is active and vice versa. This works and now the toggle icon switches back and forth correctly. But, because I have a page with two toggle icons they are no longer independent, they both use the same custom state so they copy each other.
I don’t want to create two different custom states to solve this because I feel this whole set up can be more ‘lightweight’.
Just to clarify… are you talking about Toggle input elements? (such as Ionic Toggle)? Or just an icon that looks like a Toggle? In your screenshot it looks like an actual Toggle?..
I’m trying to understand your issues here, but the explanation is not that clear…
As far as I know there’s no way to change the ‘off’ colour of an Ionic Toggle element - the colour is set in the ‘Component Colour’ dropdown, and is white on every colour option (unless you use some custom CSS).
Or are you not using the toggle element as an actual toggle? And just want to change the ‘On’ colour from green to grey depending on a custom state value?
I have a custom state ‘Toggle’ set to Yes or No
You don’t generally need to use a custom state with a toggle element, as the toggle is a Bolean input, so has it’s own yes/no value. That said, there are instances when you may want to use a custom state but I can’t work out why you’d need to here…
In the workflow I set the state when toggle is pressed
In the case of a Toggle element it might be better to run the workflow when its value is changed, rather than when it’s clicked (although you can do if you set up the appropriate conditionals).
If toggle is pressed I add a constraint to show toggle ‘off’ with the grey colour
I assume you mean a ‘conditional’ (a constraint is something that’s applied on a search)… again I can’t see anyway to change the ‘Off’ colour of a Toggle element so I’m guessing here that you’re just trying to change the ‘On’ colour to grey - so not really using the Toggle as an input.
The above settings work to switch the toggle to ‘off’, but I cannot get it to switch back to ‘on’.
Are you talking about the actual Toggle input’s value? Or your own custom state value?
In any case, whether you’re using the Toggle’s actual value, or your own custom state, in order to switch between two values you’ll need to run conditional workflows, depending on the existing value (if using an on Click action), or the new value (if using an input’s value changed action).
I’m not clear on the rest of the question, but it seems like you’re overcomplicating something simple to me.
Although if you ned to use two custom states, why not use two custom states?
But, again, the Toggle input has it’s own value (which can be dynamic, and taken from the database, or a custom state), so I don’t see any need to use additional custom states here at all.
If I were you I’d ditch the custom states and just use the Toggle’s value. If you really need the off position to be grey then try some custom CSS.
Or, if you’re not using the Toggles own value, maybe use an Icon instead (assuming that’s not what you’re already doing) in which case you will need to set your own custom state, and use conditional workflows to set it’s value depending on it’s current value.
If you’re still having trouble then try posting some screenshots of your workflows and elements so things are a bit clearer as to what you’re doing and trying to do.
Thank you so much for your detailed responses @adamhholmes you’ve helped me loads.
I don’t know what an Ionic Toggle is. I haven’t used Toggle icons before and when I tried to find tutorials they mostly focus on the Toggle feature, ie. using a button to toggle between groups, which is not exactly what I need.
Yes, I am sure this is the case. Please see the image below. You can see I have two grey groups, one for ‘Hourly rate’ and one for ‘Flat rate’.
All I want to do is hide / show the grey groups when the toggle is either on or off (changing the icon colour is not a necessity for now, I just thought it would be a nice touch). The main thing is to get the toggle action working.
I won’t show any workflow screenshots because I’ve deleted everything as I was tied up in a mess! Have I been over complicating this?
So these elements are icon elements (that look like toggles)?.
To be honest, it’s actually a lot simpler to use an actual toggle element (such as Ionic Toggle - look for the Ionic elements plugin), as it does most of this for you.
But you can build the same functionality using an Icon (which I assume is what you’re doing).
In any case, it’s still fairly simple.
Just have a single icon element, with a yes/no custom state.
Set it to whatever Icon and colour you want to show for the ‘No’ state, then set up a conditional on it with whatever icon and colour you want for the ‘Yes’ state.
Then all you need to do is run 2 workflows whenever the icon element is clicked:
1 to set the custom state value to Yes (only when the custom state value is No)
And 1 to set the custom state value to No (only when the custom state value is yes).
Then set whatever other conditionals you need on your page (to show or hide other groups for example) based on the custom state value of the Icon.
