Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 20

Text Case Converter Workflows

Recommended resources

Welcome back! In our last lesson, you built your first functional tool, the word and character counter. You saw how dynamic expressions can be used to analyze and display data in real-time. This was a fantastic first step into the application logic of Bubble.

Today, we're going to build another essential utility for your platform: a text case converter. While the concept is simple, the implementation will introduce you to one of Bubble's most powerful features: workflows. Unlike the real-time counter, this tool will perform an action—converting text—only when the user explicitly tells it to by clicking a button. This event-driven approach is fundamental to building almost any interactive feature you can imagine, from simple tools to complex user dashboards.

By the end of this lesson, you will have built a tool that can convert text to uppercase, lowercase, and title case, and you'll have a solid grasp of how to use workflows and custom states to manage user-triggered actions.

Let's begin.

This is an example of the kind of tool you'll be building today, with clear input and output areas and buttons for different conversion types.

Part 1: Assembling the User Interface

As before, we'll start by setting up the interface. A clean, responsive structure is key, so we'll reuse the same two-column layout you've been practicing. This consistency is a core principle of good UI/UX design and will also help you build your platform faster.

On a new page, please set up the responsive two-column layout we've used in the previous lessons.

In the Group - Input Column (left side):

  1. Add a Multiline Input element. This will be where users paste or type their text. Give it a descriptive placeholder like "Enter your text here...".
  2. Below the input, add a Group and set its layout to Row. This will hold our action buttons.
  3. Inside this new group, add three Button elements. Label them UPPER CASE, lower case, and Title Case.

In the Group - Output Column (right side):

  1. Add a Text element. This is where the converted text will appear. For now, you can put some placeholder text in it like "Your converted text will appear here."

Your layout should now have a clear input area with action buttons on one side, and an output area on the other.

Part 2: Using Custom States to Manage Output

In the last lesson, we linked our output text directly to the input field with a dynamic expression. This time, our logic is different. The output shouldn't change as the user types; it should only change after a button is clicked and a conversion happens.

So, where do we store the converted text before displaying it? The perfect place is a custom state. A custom state is like a temporary variable that lives on a page. Our workflow will take the input text, convert it, and save the result to a custom state. The output text element will then simply display whatever value is in that state.

Let's set this up:

  1. Click on the page itself (the main index or your page name in the top-left element tree).
  2. In the property editor, click the small "i" icon to open the element inspector.
  3. Click "Add a new custom state."
  4. Name the state convertedText.
  5. Set its State type to text. Click Create.

Now that the state exists, let's connect our output element to it.

  1. Select the Text element in your output column.
  2. In the Content box, delete the placeholder text.
  3. Click Insert Dynamic Data.
  4. Find your page name (e.g., index) in the list.
  5. From the options that appear, select your custom state: 's convertedText.

The Text element will now display the value of the convertedText state. It will be empty at first, which is exactly what we want.

Part 3: Building Workflows with Text Operators

This is where we bring the tool to life. We'll create a workflow for each button. When a button is clicked, it will trigger a series of actions. In our case, the action will be to take the input's value, transform it using a text operator, and save it to our convertedText custom state.

Bubble has built-in operators for common text transformations. Let's review the ones we'll be using.

Operators and comparisons - Bubble Docs

The Bubble documentation provides a comprehensive list of operators you can use on different data types. We're interested in the ones for the 'Text type'.

In this document, find the section titled Text type. Please read the short descriptions for the following three operators: :capitalized words (this is Bubble's version of Title Case) :uppercase :lowercase

Now that you're familiar with the operators, let's build the first workflow.

The Uppercase Workflow

  1. Select the UPPER CASE button on your page.
  2. Navigate to the Workflow tab. You should see an event box that says When Button UPPER CASE is clicked.
  3. Click the Add an action box.
  4. Choose Element Actions > Set state.
  5. In the Set state action properties:
    • Element: Select your page (e.g., index).
    • Custom state: Select convertedText.
    • Value: This is where we define the logic. Click Insert Dynamic Data.
      • Select your Multiline Input element's name.
      • Choose 's value.
      • From the list of operators, select :uppercase.

The expression should now be MultilineInput A's value:uppercase.

This image shows the 'Set state' dialog. Notice how the 'Value' is being set by an expression, and the dropdown menu reveals various text operators you can use, including `:uppercase` and `:lowercase`.

Go to your app's preview, type some text in the input box, and click the UPPER CASE button. The text on the right should immediately update to the uppercase version of your input.

Part 4: Implementing the Other Conversions

Now you'll apply the same pattern to the other two buttons. This repetition is excellent practice and will help solidify your understanding of the workflow process.

The Lowercase Workflow

  1. Go back to the Design tab and select the lower case button.
  2. Switch to the Workflow tab and create a new Set state action for this button's click event.
  3. Configure it exactly as before, but for the Value, use the expression: MultilineInput A's value:lowercase.

The Title Case Workflow

  1. Select the Title Case button.
  2. Create its Set state workflow.
  3. For the Value, use the expression: MultilineInput A's value:capitalized words.

Now, test your complete tool. All three buttons should correctly take the text from the input, apply the respective transformation, and display the result in the output area. You have successfully used workflows and custom states to create an interactive tool!

Your Task: Build the Text Case Converter (15 minutes)

If you haven't been building along, now is the time. Follow these steps from start to finish to create your Text Case Converter.

  1. UI Setup:
    • On a new page, create your standard two-column responsive layout.
    • In the left column, add a Multiline Input and three Button elements below it (UPPER CASE, lower case, Title Case).
    • In the right column, add a single Text element for the output.
  2. Create Custom State:
    • Select the page element itself.
    • Open the element inspector (the 'i' icon) and create a new custom state named convertedText with a State type of text.
  3. Link Output to State:
    • Select the output Text element.
    • Set its Content to be the dynamic value of the convertedText custom state.
  4. Build Workflows:
    • For the UPPER CASE button, create a workflow that triggers on click.
    • Add a Set state action that sets the convertedText state's value to MultilineInput's value:uppercase.
    • Repeat this process for the lower case button, using the :lowercase operator.
    • Repeat again for the Title Case button, using the :capitalized words operator.
  5. Test:
    • Preview your page.
    • Enter text and test each button to ensure the conversion works as expected.

Conclusion

Excellent work! You've successfully moved beyond real-time data display and into the world of event-driven logic with workflows. This is a massive step in your journey to building a functional multi-tool platform.

Here are the key takeaways from today's lesson:

  • Workflows execute actions based on triggers: The most common trigger is a user clicking an element.
  • Custom states are essential for managing temporary data: They act as a bridge between a workflow's calculation and what the user sees on the page.
  • The Set state action is fundamental: It's how you update a custom state's value from within a workflow.
  • Bubble's built-in operators simplify complex tasks: You used :uppercase, :lowercase, and :capitalized words to perform text transformations with zero code.

In our next lesson, we will continue building native tools by creating a simple unit converter. This will combine the workflow skills you learned today with conditional logic and different input types like dropdowns, further expanding your Bubble development toolkit.