Dynamic text values based on conditional statements

UI Oct 08, 2020

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 organize and manage.

Creating the conditional statements

Let's say you have a dropdown where I can select a product. You want a text element which tells you whether the product is 'For Sale' or not. But, the status of the product 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 2 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, color, alignment and a host of different properties of the text element depending on the conditions.


Let's take another example, let's say you want to show a text based on the custom state value. More on custom states and their use cases. 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 ones in the earlier example.

The main takeaway is that just like the other features of Bubble, the text element is also powerful and can be customized 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


If you need some help with your Bubble app or if want a custom Bubble app, send me an email at [email protected] or follow me on Twitter

Tags