Button interaction - Output to text field

Hi there,

I am new here and I am trying to create a set of buttons, that when clicked will output the text (appended) until the output text box is cleared or saved.

I am trying to get the first part functional (output text into output fields) but I am not sure how I would go about doing this?

I don’t know if I used the right terminology to describe what I am trying to do, which also might be part of the problem.

Thanks,

Don

Hi there, @donmai101… I’m not sure if I understand exactly what you are trying to accomplish, but if I understand it at all, it sounds like you could use a custom state that is a list of texts to do what you described. So, when a button is clicked, you would set a state to the state’s existing value plus some more text. Then, you could have a multiline input element on the page, and you could have the initial content of that element set to the custom state. If you want a space between the text from the different buttons, you would set the initial content to the custom state’s value joined with a space, and you would be good to go.

Hope this helps.

Best…
Mike

1 Like

Hey Mike,

Sorry for not getting back sooner. Thank you so much for the information you were spot on with the information you provided.

I am really having a hard time understanding how to take custom state data and put it into a field and make it so it so it appends that data and doesn’t wipe if out every time it receives new input.

Any further pointers?

Cheers,

Don

Create a custom state that is a list of texts.

Set the Initial content of a multiline input element to the custom state’s value joined with a space character.

initial-content

When a button is clicked, run a workflow that sets the value of the custom state to its existing value plus whatever text you want to add when the button is clicked.

1 Like

Hi Mike,

If I could buy you a coffee I would! Thank you so much for the help. You rock!

I was able to setup the link like you suggested but I noticed that when I try and hit button 1 again after its been hit or hit button 2 again, that it does not continue to add content. Any idea what it would stop at two inputs instead of continuing to add data after further clicks?

Well, it’s not really stopping at two inputs… it’s the fact that Bubble lists cannot contain duplicate values. So, once you click one of the buttons and its value is included in the custom state, clicking the button again will not add the same value to the custom state.

Are you able to explain in greater detail what you are actually trying to do here? What does the user need to be able to do and for what purpose do they need to be able to do it?

1 Like

Hey Mike,

Thanks for the reply! I am grateful for your insight and expertise!

I am hoping that the user is going to be able to click the buttons to create words using the button inputs which would require the user to be able to click the same button and store the same values at different points or potentially right after hitting it.

I am hoping that this is possible, got my thinking cap on. Could I use something like a temp storage location or would I have to store that data in the database? or maybe another means?

Crossing my fingers in the hopes that there is a way to accomplish this.

Cheers and thanks again for your time and valuable input.

Don

Forgot to mention, the output “word” string would only need to be a temp value which could be cleared on refresh or open or the window.

I vaguely remembered seeing the workaround in this thread before, and I was able to track the thread down again. I haven’t tried that workaround, but I understand what it’s doing, and I think it could work in your case. Anyway, check it out and see what you think.

Very interesting. Looks like a sweet work around.

I think I am getting caught up on the “each item:converted to a number” tried to find “each item:converted to a text” but that item doesnt seem to be there :frowning:

Mine is text with no number value.
image

Yup, so you’re going to have to modify the workaround a bit.

First, your custom state no longer needs to be a list.

Next. your workflow when clicking a button will look like this.

Finally, your multiline input’s initial content expression will look like this.

initial-content

Oh, and if you don’t want the spaces between the letters, add the :find & replace operator to the end of the expression and type a space as the Text to find and don’t put anything in the Replace by field.

IT WORKED!!! AHHH You rock!!!

If I may ask just one more question… If I wanted to create a “Space” button to add a space but my index find’s and replaces spaces, do you know a work around for that?

You could have the “space” button add a character such as an asterisk to the custom state. Then, you could add a second :find & replace operator to the initial content expression that finds an asterisk and replaces it with a space.

Hi Mike,

Sorry to bug you one more time and thanks again for all the help.

I seem to be having trouble putting the “space” logic in.

I have created a new custom state for the space button with and put *_ (the line is a space)

The logic doesn’t seem to be working. Not sure I am doing this right. Any thoughts? should the multiline input code be different, or the custom state for the “space button”

Thanks,

Don

Nope, not like what you are showing. It’s exactly like what I already showed you, and you don’t need a new custom state.

Create a button that will be the “space” button. Add a workflow for the space button that looks exactly like the screenshot I showed of the workflow for the “a” button, except replace both of the “a” characters in the Boolean Formatting dialog with asterisks. Then, refer to the last screenshot in my response with all the screenshots, and after the :find & replace operator that is already there, click the More… link and literally add another :find & replace operator (yes, there will now be two of those operators in a row at the end of the expression) that finds an asterisk and replaces it with a space character.

1 Like

Ahh that makes sense.

:slight_smile:
Don

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.