Dynamic text values based on conditional statements

You don't need several text elements to display different texts under different conditions. You can use conditional statements to change the text. This will make your app simpler to organise and manage.

Creating the conditional statements

Let's say you have a dropdown where I can select a product. You want a text element that tells you whether the product is 'For Sale'. But, the product status is stored in a Yes/No field type, so you cannot display the product status using dynamic data.

How you can do it is to create two conditional statements. One to show a text if the 'For Sale' field is Yes and another if it is No.

1. You begin by creating a text element and styling it how you want.
2. You then add two conditional statements to the text.
3. If the Dropdown value's For Sale is "yes" > Select a property to change when true > Text. Now you can enter whatever text you want to be displayed.
4. If the value is "no", you can show a different value.

And this is a generic example. You can also change the font, colour, alignment and a host of different properties of the text element depending on the conditions.

Let's take another example. You want to show a text based on the custom state value.

How to use Custom States

Custom state is the one of the most powerful features of Bubble. And many Bubble beginners struggle to use them.

NocodeAssistantHimanshu Sharma

We can create a simple toggle element to change the custom state value. Then we can use the custom state's value to show text based on the current value of the custom state.

1. I created a custom state at the page level called "Active". The value of the custom state depends upon the toggle element.
2. If the toggle is checked, the value is "Yes". Else it is "No".
3. I created another text element and put conditions similar to the earlier example.

The main takeaway is that just like the other features of Bubble, the text element is also powerful and can be customised for our needs. The only limiting factor is our creativity.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/dynamic-text

Editor - https://bubble.io/page?type=page&name=dynamic-text&id=nocodeassistant-tutorials&tab=tabs-1

5 common mistakes to avoid when building with Bubble

Are you building with Bubble.io? Avoid these 5 common mistakes when building your Bubble.io app.

NocodeAssistantHimanshu Sharma

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.