I have an Ionic Toggle Switch where (via the use of Conditionals) I’m activating a Dark Mode for my pages. This works great, but how do I keep the conditionals active for when a user visits different pages, I cannot get it to work currently…
Conditionals don’t persist across pages, but there are two things you can try. You can add a field to the user and save the value to the DB, or you can use page parameters and pass the dark mode value in the URL as you navigate. Id probably save it on the user myself.
Just wondering, is there a reason you aren’t doing it that way today?
Because I’m still learning Bubble
How would I achieve the method you mentioned exactly? The user field option?
add in the database a field to the user called darkmode (yes/no)
And how would I save this to the DB field? That part I don’t understand?
You need to create a workflow which is triggered on switching. In this Worklow you can select ‘Make change to thing’ and select the user. The user has the field darkmode and if the user selected dark then put yes is this field otherwise no
@olcay.elikci beat me to the response. Let us know if you need additional help.
I’m glad you’re getting into Bubble! I hope my question didn’t come off as passive-aggressive…there are hundreds of ways of doing things in Bubble, so I always ask just in case someone figured something neat out!
Yes best route is to save this data to the ‘User’ data type, so that when he or she comes back and signs in its remembered.
On the ‘User’ data type create a new field as follows:
You could set the default to ‘false’ (unless you want the opposite of course)
On the Ionic Toggle element, right click and ‘Start/edit workflow’.
Apply a ‘Only when…’ condition
Under ‘Account’ > ‘Make changes to the current user’
Then right click the workflow item, copy
And then paste
Here is where you would reverse the operation
You can add extra actions if you’d like such as an alert to inform the user of the change and stuff like that…
Here is a test condition:
Thanks for the very detailed response Luke. Much appreciated. I have followed the steps and the DB field is updated as I toggle the switch but it is still not remembering the entry when i view another page?
No worries. Hmm, hard to say would need to check the page/s out - but can’t access via the link you’ve posted to your app there…
Have just made link live again.
I have made some progress, and in the conditional I now refer to the DB entry ie; Current User’s Dark Mode is “Yes”, but it’s doing this weird thing where it activates the toggle quickly when you move from page to page?
Take a look, would love to know how I could fix that weird quirk
On the profile page and candidates page, I’ve noticed that the condition wasn’t picking up the user expression, so I’ve changed some of these and this has fixed the load in every time you change page it keeps fading from white to black when dark mode = true - now it stays black with no transition unless switching.
I would recommend making the Floating Group Header into a re-usable element, so it doesnt dup and loads in faster.
Just looking at the ionic switch transition I see what you mean…
I’ve removed the condition from the ionic element and changed the preset status to dynamic:
Still some lag though…
I don’t think there is a way around stopping the initial load transition, even when the default is checked I’m afraid. The ionic toggle element is best used somewhere in a user settings panel rather than say in a header that is global across all pages.
I’d suggest taking the route of a custom toggle icon that uses conditions and workflows to function the same. The only thing your be missing is the fluid transition between enabling and disabling, but this could be achieved with some clever workflow animations or better yet CSS animations.
Thanks @luke2 Yeah I’ve seen a post on creating toggles. Any pointers on how to achieve the CSS/implement it in Bubble. The toggle I saw didn’t look too great without the smooth transition
Here are some really nice ones, though can be a little tricky to implement:
They are using the input and modifying, rather than say a image element with conditions…
Here is another, with some very flexible options with a similar approach:
Hope these help Marc
This topic was automatically closed after 70 days. New replies are no longer allowed.