Dynamic expressions are Bubble's way of making your app come alive — showing different text, colors, images, and visibility based on database values and user input. This tutorial teaches you how to modify element properties dynamically using expressions and the Conditional tab, turning static pages into interactive, data-driven interfaces.
Overview: Editing Components with Dynamic Expressions in Bubble
Dynamic expressions are the bridge between your database and your UI. Instead of hardcoding text like 'Welcome, User,' you write 'Welcome, Current User's first name' — and Bubble fills it in for each visitor. This tutorial covers inserting dynamic data into text, images, colors, and visibility settings, plus using the Conditional tab to change how elements look and behave based on live data. This is a foundational Bubble skill for anyone building data-driven apps.
Prerequisites
- A Bubble account with an app that has at least one Data Type with records
- Basic understanding of the Design tab and elements
- Familiarity with Bubble's Property Editor (the panel on the right when you select an element)
Step-by-step guide
Insert a dynamic expression into a Text element
Insert a dynamic expression into a Text element
In the Design tab, select a Text element (or add one by clicking + → Text). In the Property Editor on the right, click on the text content area. You will see a button labeled 'Insert dynamic data' — click it. A dropdown appears with available data sources: Current User, Current page's data, parent group's data, and more. Select a source — for example, Current User's first name. The expression appears as a colored tag in the text field. You can combine static text with dynamic expressions: type 'Welcome, ' then insert Current User's first name to get 'Welcome, Jane' at runtime.
Pro tip: You can chain multiple operators on a dynamic expression. For example: Current User's Created Date:formatted as MM/DD/YYYY shows the user's signup date in a readable format.
Expected result: The Text element displays dynamic data from the database, personalized for each user or context.
Use the Conditional tab to change element appearance
Use the Conditional tab to change element appearance
Select any element and click the Conditional tab in the Property Editor. Click 'Define a condition.' In the 'When' field, build a yes/no expression — for example, 'Current User's Role is Admin.' Below that, choose which property to change when the condition is true: Background color, Font color, Text, Visibility, or any other property. Set the value — for example, change Background color to green when Role is Admin. You can add multiple conditions on the same element. Conditions are evaluated top to bottom, and the bottom condition wins if multiple conditions are true and set the same property.
Pro tip: Conditions are the best way to create 'active' or 'selected' states on navigation items. Add a condition: When Current page name is 'dashboard' → set Background color to your active color.
Expected result: Elements change their visual properties automatically based on data values, user roles, or page state.
Change images and icons dynamically
Change images and icons dynamically
Select an Image element and look at its 'Dynamic image' property in the Property Editor. Click 'Insert dynamic data' and reference an image field from your database — for example, Current User's Profile Photo. If the user has no photo, you can set a default static image in the 'Static image' field — Bubble shows the static image when the dynamic source is empty. For conditional image changes, go to the Conditional tab and add a condition: When [some expression is true] → change the 'Image source' property to a different image. This is useful for toggling icons (e.g., a filled heart vs. outline heart for favorites).
Expected result: Images change dynamically based on database values, with fallback static images when the dynamic source is empty.
Reference parent group data in nested elements
Reference parent group data in nested elements
When you have elements inside a Group that has a data source (like a cell in a Repeating Group), child elements can reference the parent's data using 'Parent group's [Type]'. For example, inside a Repeating Group cell with Type: Product, a Text element can display 'Parent group's Product's Name.' This is more efficient than running a separate search for each cell. To set it up, make sure the parent Group has a Type of content and a Data source configured. Then in child elements, click Insert dynamic data → Parent group's [Type] → select the field.
Pro tip: Avoid running 'Do a search for' inside Repeating Group cells — use Parent group's data references instead. Each search in a cell multiplies database queries by the number of visible cells.
Expected result: Nested elements display data from their parent group without needing separate database searches.
Use Custom States for interactive dynamic expressions
Use Custom States for interactive dynamic expressions
Custom States let you change element properties based on user interactions without touching the database. Click on the page element (or any element), go to the Property Editor, and click 'Add a new custom state.' Name it (e.g., 'selected_tab'), set its type (e.g., text), and optionally a default value. In a workflow (e.g., when a tab button is clicked), add action: Set state of page → selected_tab = 'profile'. Now on your elements, add conditions: When page's selected_tab is 'profile' → show this group. When page's selected_tab is 'settings' → show a different group. This creates tab navigation without page reloads.
Pro tip: Custom States reset on page reload. If you need state to persist across pages, use URL parameters instead.
Expected result: Elements respond to user clicks and interactions by reading Custom State values in their conditions.
Complete working example
1DYNAMIC EXPRESSIONS — REFERENCE SUMMARY2========================================34INSERTING DYNAMIC DATA:5 Text element → Click content area → Insert dynamic data6 Sources: Current User, Current page data, Parent group data,7 Search results, Custom States, URL parameters89COMMON EXPRESSION PATTERNS:10 Personalized text: "Welcome, " + Current User's first_name11 Formatted date: Thing's Created Date:formatted as MM/DD/YYYY12 Currency: Product's Price:formatted as $#,##0.0013 Conditional text: Thing's Status:formatted as text14 List count: Search for Products:count & " products found"1516CONDITIONAL TAB SETUP:17 1. Select element → Conditional tab18 2. Define a condition: When [expression] is [value]19 3. Set property to change: Background color, Font color,20 Visibility, Text, Image source, etc.21 4. Set the new value22 5. Add multiple conditions (bottom wins on conflict)2324CONDITION EXAMPLES:25 Active state: When Current page name is 'dashboard'26 → Background = #3B82F627 Role-based: When Current User's Role is 'Admin'28 → This element is visible = yes29 Data-based: When Parent group's Order's Status is 'Paid'30 → Background = #22C55E (green)31 State-based: When page's selected_tab is 'profile'32 → This element is visible = yes3334PARENT GROUP DATA:35 Setup: Group → set Type of content + Data source36 Child elements: Insert dynamic data → Parent group's [Type]37 Avoids per-cell searches in Repeating Groups3839CUSTOM STATES:40 Create: Click element → Custom states → Add new41 Set: Workflow action → Set state of element42 Read: element's [state_name] in conditions or expressions43 Note: Resets on page reloadCommon mistakes when editing individual components of a dynamic expression in Bubble.io: Step-by-
Why it's a problem: Running a 'Do a search for' inside a Repeating Group cell instead of using Parent group's data
How to avoid: Set the Repeating Group's Type of content and data source at the group level, then reference Parent group's [Type] in child elements.
Why it's a problem: Adding multiple conflicting conditions without knowing evaluation order
How to avoid: Order conditions intentionally. Put default/fallback conditions at the top and specific overrides at the bottom.
Why it's a problem: Forgetting that hidden elements still take up space unless 'Collapse when hidden' is checked
How to avoid: Check 'Collapse when hidden' in the Layout tab for any element that toggles visibility with conditions.
Best practices
- Use dynamic expressions for any text that changes per user, per record, or per context
- Keep conditions on the Conditional tab ordered from general (top) to specific (bottom)
- Use Parent group's data references instead of searches inside Repeating Group cells
- Add format operators to dynamic dates and numbers for readable display (:formatted as)
- Use Custom States for UI state like selected tabs, expanded sections, and active filters
- Check 'Collapse when hidden' on conditionally visible elements to prevent layout gaps
- Test dynamic expressions with multiple test users to verify they display correct personalized data
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Bubble.io app and I want to make elements change their appearance based on database values. Can you explain how dynamic expressions and the Conditional tab work, with examples for changing text, colors, and visibility?
Help me set up conditional formatting on a Repeating Group that shows orders. Each order cell should have a different background color based on the order status: green for Completed, yellow for Pending, red for Cancelled.
Frequently asked questions
Can I use dynamic expressions in element styles?
Not directly in the Styles tab. Use the Conditional tab on individual elements to change style properties dynamically. Conditions can modify colors, fonts, borders, and more based on data values.
Why does my dynamic expression show blank?
The data source is likely empty. Check that the element's parent group has a data source, that the field you are referencing has data in it, and that Privacy Rules are not blocking the field. Use the debugger to inspect the expression's value.
Can I nest dynamic expressions inside each other?
Yes. You can chain operators on a dynamic expression, like Current User's Company's Name:uppercase. Each colon operator transforms the result of the previous one.
How many conditions can I add to one element?
There is no hard limit, but too many conditions can make the element hard to maintain. If you have more than 5-6 conditions, consider simplifying your logic or splitting the element into multiple conditional groups.
Do conditions consume Workload Units?
Conditions that reference Custom States or static values cost nothing. Conditions that trigger a 'Do a search for' do consume WUs because they hit the database. Use Option Sets or Custom States in conditions when possible.
Can RapidDev help optimize complex dynamic expression logic?
Yes. RapidDev's team can audit your app's conditional logic, identify performance bottlenecks from over-complex expressions, and restructure your data model to simplify dynamic displays.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation