Basic question: Setting field value from a button

Not the sexiest question you’ll get today, but probably the most basic. So simple yet I can’t do it somehow. Trying to understand data flow between objects. I just want to create 1 button and 2 input fields, “A”, and “B”. When the button is clicked, A’s text is placed into B. Tutorials seem somehow not to show this simple step. Does one “make a new thing” in the button’s workflow click event and then assign the new thing to field B? If so, how exactly is this passed around? Lots of errors with not choosing “saveable” objects. Thanks and sorry!

1 Like

There are a few ways to do this, and you don’t need to store the value on the database.

You can put the input in a group, and then set the group’s value in a workflow and set the input to default from the group.

It is a bit fiddly to do with an input, but doable. I can put an example in the forum app later.

1 Like

Yeah. I can’t get behind this Bubble thing at all. It tries to mask away the subtleties, but it just seems to be pushing them to odd layers behind the front end. Problem is that nothing is straightforward, as it is designed to give the impression of being. If you say that I can’t assign data “FOO BAR BAZ” from one field to another by a simple click of a mouse, my point has been proved. OK if we don’t need to create data in the database for that - fine. But a “group”? And how is this done? I have a series of small tests I need to do with any system like this, and I can’t get past the first one. OK if we have Google Maps interactivity and all that. I still need to see the fundamentals working clearly for me. All the video tutorials are highly specific to external API’s. For C.S. folks, we need to understand basics before wild stuff like that. But I appreciate the effort. It’s just that sooner or later, the subtleties keep biting people - I read all the support requests here and see the same thing. Suggestion: just do simple stuff first: a linked list, a sort, an assignment between several entities, loops. Show people the logic up front and we’ll get a ton afterward. My dead ends are outweighing my patience for sure, but before I leave this system, I’ll say I love you guys!

4 Likes

It is pretty simple. It took me 90 seconds, and most of that was firing up the forum app.

https://forum_app2.bubbleapps.io/version-test/swap

The button assigns the input in field A to a temporary field (bubble calls them Custom states) and field B pulls that in as a default.

The issue with a lot of these requests is that translating what you have asked for into requirements, so finding out what you really are trying to achieve.

Moving an input from A to B is simple. What then happens when you type something in B … and then press the button to move something from A… should it overwrite it ? Or not … etc.

There is always a balance between providing the simplest answer (and then getting “yes, but I didn’t want it to work like that”) and doing a bit of digging. I probably don’t always get it right, and think ahead too much.

Anyway, here you go…

1 Like

Here’s the logic I’m bringing from many (all) dev systems, from SmallTalk to C, etc.:
(1) Create 2 fields , A and B – they have text properties, right?
(2) Create a button whose Workflow, when clicked, would trigger a “Make changes to thing…” event that would let me specify B’s text as the “the thing to change” using A’s text value as the source. But there’s no apparent event that lets me change the text of something else, or even its state, using that “Make changes to thing…” predicate, which instead only refers to data or boolean expressions.

So if we shouldn’t add to a database to hold state data, and there’s no way to visibly see/hold it, how do such get handled?

1 Like

Maybe it is a terminology issue … Here a “thing” is analogous to a row (relational) or document (nosql). It is a database update.

To change an element on the page, we use the concept of “send data to…”. So if I have a list I can have a button send a whole new set of data to the list.

Inputs work a little differently. They have a default but you can’t directly send data to them.

In the example above I have created a " custom state" which is just a local variable with name and type - and I have set this to the value in field A. Field B is set to pick up its default value from this temporary field.

Field A > Temporary Variable > Field B is the flow on button press.

And I used the “Set state” to do the first bit.

1 Like

I’m appreciating the ineluctable air of abstracting away the workings of the MVC model. But we cannot get around the fact that variables are a first class object, and therefore always indispensable. Even as a state flag, that would be useful for altering data or interface conditions in a way that’s not tied either to database or external API elements (and shouldn’t be, so we can encapsulate logic away from external libraries, etc).

So if the notion of variables is to be held in a custom state, how exactly does one create a custom state and then set/read data from it?

Thanks much again!

1 Like

The example you uploaded works well, but (sorry for repeating the same question for the 3rd time): the custom variable you made is what I need to know how it was created. That was the question.

How exactly does one create a custom state and then set/read data from it?

1 Like

This is what I mean (i’m on the 4th day trying to get something this simple done here).

How does one create custom states?

1 Like

I did it when I created the workflow for the button.

The action I chose on "When Button Is Clicked " was to “Set a State”.

I then created the state called Text of type “Text” right there. I attached it to the page (bit of an odd concept, but all variables/states need homes in Bubble). So that is why it is state Text (what I called it) of Swap (the name of the page).

The action on the button then moves the field A text into the variable/state.

This variable/state is now available to other elements or workflows.

So I just set up the Input B field to take this variable/state as a default (Initial Content).

I am sure you recognise the concept of individual “objects” having their own data. So a page can have a “state” of EditMode set to yes or no. Or a button can have a count of the number of clicks it has received.

But we also use the states as temporary variables for the page.

So here …

… I am using a state that is a list/array of things/objects to store a temporarily selected list. Each time the user checks a checkbox, that checkbox’s fruit object is added (:plus) to the list.

3 Likes

LOL this is getting funny.

Nigel where did “swap” come from? How did you create that? In these illustrations, it’s already made. My question was how did it come into existence? What is “swap”?

Thanks, brother.

1 Like

As I mentioned above, “Swap” is just the name of the page in Bubble. It is one of the elements you can add custom states to.

So I added a state called “Text” to the page called “Swap”. Hence “Swap’s Text”.

The input box is called “Input From Here” and I am using the value in that box, hence “Input From Here’s Value”.

Bubble does like an apostrophe :slight_smile:

1 Like

Hi, Nigel.

That was the only piece that was not actually mentioned (namely that “swap” = name of a page… I didn’t see what it was referring to, and the name didn’t suggest the object referred to, e.g., “pg_swap”).

So I didn’t realize “swap” was the name of the page/app, and as well, I didn’t realize that pages could have states associated with them, either.

Sorry for wholesale confusions.

This makes sense now - thank you!! Very nice.

1 Like

No, it is a good point. And I am as guilty as anyone at not naming things very well.

I like using pg-swap as a page name so you know later on. Otherwise it can be difficult to find. Thanks, good tip.

1 Like

So is using custom states like creating temporary fields and values that are not actually hard-coded in the database? They are a browser function?

If that is the case, would custom states be an efficient way for page navigation such as headers and footers? If the answer is yes, then wouldn’t there be a workflow hit every time someone navigates to another page? I could see the workflow count increasing too quickly.

Two more questions about custom states:

  1. Can a page have more than one custom state?

  2. Does a custom state exist indefinitely even if the page changes? So if I redirect to another page does the custom state carry over (as a browser function?). If it does, then it will always be there until either the state is changed with another workflow or if the browser is closed?

Sorry for all of these questions but just when I think it makes sense, I am confused again.

Any element can have any number of custom states.

But they only exist while the page is loaded, not across page sessions. So if you navigate to a new page they won’t be there when you come back to that page.

1 Like

Thank’s Nigel!

Place the Tab Element and login reusable element on one of your pages and analise it. That’s how got to understand custom states.

3 Likes

Since this question is 4 years old, is there a less tedious, more robust way nowadays?

From my experiment, this approach has a limitation - the input field B has to be either read-only or hidden. Otherwise, once user touched this input field, its binding to the tmp placeholder won’t work anymore.

2 Likes

Try this, Add a Run Javascript step in your workflow and use something like $("#youinputId").val(123)

2 Likes