KITGOAL
Published in

KITGOAL

State in Bubble.io — Follow Along with this Tutorial

It’s a wise thing to create state on the page level rather than on an individual element. It’s a lot easier later to edit the state if it’s in one place.

State ceases to exist as soon as you leave the page. It’s like temporary memory.

In Bubble, create a new page named: state-example

Create a text element called show/hide message.

Create another text element called message-contents with some Lorem Ipsum text or random gibberish.

Double click in the margin of the current page and you should see the page title: state-example in the inspector. Click the info icon in the top right and you’ll see an option to add a state.

Give your state a clear name that will help you recognize it when you return to it in the future. Set the state type to yes/no with default no. There are various options for other use cases.

For our example, we want to show and hide some text when clicking a button that says show or hide (depending on the state).

Double click the show-message button. Click the conditionals tab. Set one conditional to show the text show message when state-examples’ show-message is no. Set another conditional to show the text hide message when state-examples’ show-message is yes.

Double click the show-contents text. Uncheck visible on page load and set to collapse when invisible.

In the Workflow tab, create two events.

Event #1 and #2 will both be when show/hide message button is clicked.

Event #1 will happen ONLY WHEN state-examples’ show-message is no and will have an action that will SHOW message-contents.

Event #2 will happen ONLY WHEN state-examples’ show-message is yes and will have an action that will HIDE message-contents.

Try it out. See if the show/hide functionality works. If configured correctly, the message-contents should initially be invisible. You should be able to click show message and the message will show. Then you should be able to click hide message and the message will disappear.

It’s a good idea to have text on your page that shows current state in the version-test mode if state gets more complicated. It’s easy to test and debug your website that way. For this example you could have text that says: show/hide: state-examples’ show message. Then when rendered on the page it should show: show/hide: yes (or no — depending). At first debugging may not be necessary. However, over time it can be very helpful to see what’s happening behind the scenes! Invisible problems are much harder to figure out!

Thanks for reading and for enjoying Bubble!

If you have any comments on this process, please email nathan@sayingthings.com.

--

--

--

A web kit designed to make your life easier. Want to be a part of it? Visit Kitgoal.com

Recommended from Medium

8 Best Next.js Courses to Learn Online for React Developers in 2022

Yup — JavaScript schema builder for value parsing and validation

10 things you need to know about React

https://lnr.app/s/Qa2JKP join plz.

How to Create a Todo List App with React Native

Designing UI for React Native

10 Javascript features everyone should know

Essential JavaScript String Methods

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nathan Puls

Nathan Puls

Voice Over | sayingthings.com

More from Medium

Search Engines and this website

BuildFest 2022

Everything You Need to Know About Fiverr Ranking System | Gig Ranking Services With “Top Rated…

An Introduction to Search Engine Optimization (SEO)