How to allow users to define and use their own variables in Bubble?

Hey,

I’m working on a feature in my Bubble app that allows users to define their own variables and then use those variables within a text block.
Here’s the flow I’m trying to implement:

  1. The user defines a variable and assigns it a value. For example, they might define “company_name” as “Coca Cola”.
  2. The user then writes text in a text block and refers to the variable they defined. For example, they might write: “The company {company_name} is a leader in the beverage industry.”
  3. When the text is processed or displayed, I want the reference to the variable “{company_name}” to automatically be replaced with the value the user assigned to that variable (“Coca Cola” in this example).

I’ve been researching and experimenting with Bubble’s “Custom States” and “Dynamic Data” functionality, but I haven’t found a way to make this work the way I need it to. Has anyone implemented something similar or have any suggestions on how I could achieve this in Bubble?
I would appreciate any guidance you can provide.
Thank you in advance.

If I recall correctly, both @AndrewV and Vince from nocodefamily.com had something like that. My knee-jerk reaction is regex plus List Shifter’s iterate on a list but I’ve never actually implemented anything like this.

1 Like

Yes, that’s what I did but is not exactly what I’d like to build. I’d like the user to be able to create any variable (always defining 2 things: 1. name | 2. value) and then be able to reference to that “value” when writing by putting {name}.

Ideally when they type “{” they will see all the options they have. This could be great for ai prompting. For example:

  • User defines (1. Audience_A | 2. Young people between 17 and 20 years old with interest in…)
  • Then when prompting he just needs to say something like "create an ad to this target audience {Audience_A}.

I assume you want the variables to be available anytime the user is logged in yes. You can store the variables as a list of text in User. Each text will be{variable name}|value to replace.

When processing a block of text just run a loop for each variable in the list find (using regex) text:split by(|)first item and replace text:split by(|)first item. You can loop using native Bubble, plugins like ListShifter (highly recommended) or write some JavaScript using Toolbox.

Whichever way you choose the idea is the same. If you need this to run live while the user is typing in an input then you’re going to have to use a plugin, there are multiple mention or tagging plugins that can do this. You just need to supply them with the user’s variables list.

2 Likes

Thanks! I’ll try this idea now. Yes, I want this to run live so I assume I’ll need a plugin (will search for mention or tagging plugin).

Sorry, one more question: when you said “ListShifter” plugin you meant “Floppy: localStorage, List Shifter” ? I bought that one but I see many options (see image) and it’s not that intuitive for me. I should use the one called “List Shifter PRO”, right?

image

1 Like

Yep it’s now List Shifter Pro. If this is your first time with List Shifter I recommend going through the List Shifter KW thread. @keith has a bunch of great tutorials to get you started.

List Shifter: Reverse, Rotate, Swap and ITERATE (Loop) Over Bubble Lists | Now at v1.4: Adds Numeric Option, GET INDEX Action

Though most of the functionality is already explained in the plugin elements themselves.

1 Like

Thanks a lot!
Yess, first time so I’ll definitely do that.

Hey, here again (still struggling with this).
Question: I implemented this solution and it works but the problem is that when the user @mentions the variable while typing in the text block, instead of seeing only {variable name}, he sees {variable name}|value to replace. I tried to solve this with a find and replace from mention and it solves it but then I can’t make the loop because it only finds {variable name}.
Is there a simple way of doing a vlookup (like in excel) and say replace column A with column B? Can’t find a way to solve this :s

Solved! Forget about this, I could do the Vlookup search :muscle:t3:

1 Like

Not solved. It worked only with one register, when I add more variables it breaks. Not sure why.
Here a quick loom in case someone has 1 minute:

I think the problem is that the loop doesn’t run, that’s probably why it only works with one variable

Yeah. Looping in Bubble is a little bit of a hassle I use Floppy/ListShifter but you can do it natively using 2 custom workflows. One triggering the other.

1 Like