Is it possible to create content in a input field from a button? I’m needing to create a onscreen 10-key for users to type in their phone numbers and I want to bypass the native keyboard.
Essentially, when a user clicks the buttton labeled “2” can a “2” be inserted into a input field somehow??
Just curious, why bypass the native keyboard?
I think this is possible, but I couldn’t figure out how to save the list of Numbers from the input, to the Current User’s Phone Number without the commas. Does anyone have any ideas on what to change in this example? (Please feel free to make changes)
Preview:
Editor:
That’s exactly what I need to do. How did you do that? And how do we get rid of the commas?
Right, good question about the commas! I’m not quite sure. I would explain how but I don’t want you to go through all of the steps, and then realize that my custom states setup that I used was incorrect, and the custom state which keeps track of the numbers shouldn’t be a list after all. I’m guessing that part may need to change in order to get rid of the commas. Maybe we’ll wait a tiny bit longer to see if anyone can figure out the commas part, then I’d be happy to explain/help you replicate it in your app.
@ilham.hafizovic and @scriptschool do you know if any regex patterns would remove commas and spaces from the value of an input? In this example I’m trying to save a phone number to a User, which is a list of text values stored on a custom state, being displayed as a Phone Number in the Phone Number input. I just tried a few regex patterns but didn’t have any luck with the ones I tried.
Hey @darylawilder I found a workaround for now to not have commas or spaces so the number is stored like this:
So here’s the step-by-step (though I feel that there may be easier ways to accomplish creating a keyboard like this! It was just the only way I could think of for now. 
)
To start, I created a new Data Type called Phone Button:
Then I opened Excel and created a single column with 11 rows of each number (1,2,3,4,5,6,7,8,9,0) or symbol that we need to display in the keyboard, as well as one entry for * and one entry for #. To get this to work, I needed 100+ app data entries, so instead of manually creating them in Bubble, I created the spreadsheet below and saved it as a CSV:
After saving that, I uploaded it to the App Data: Phone Buttons. After clicking the ‘Upload’ button, I selected ‘Phone Number’ as my Data Type, uploaded the CSV (“Numbers”), ‘Validated’ the data, and then clicked ‘Upload’:
After that, everything is displayed as an entry within the App Data tab:
After uploading the data, I went back to the UI editor and created the Input element (for the phone number), and 12 repeating groups, each containing one for each of the keyboard’s button. Each repeating group’s Type of Content is Phone Button, and the Data Source is Do a Search for Phone Buttons, with the constraint for each search that the Number must be equal to the value we manually enter depending upon the position of the repeating group in the keyboard. For example, the first repeating group setup could look like this:
And the second is the same, except for the Phone Button’s Number must equal 2:
And that process continues for the rest of our keyboard button repeating groups. The next step is to set up the dynamic data for each of the blue Buttons. The dynamic expression for the text of the button is “Current cell’s Phone Button’s Number”:
So now we have everything set up display-wise We just need to set up the workflows and make sure that the numbers a User entered is displayed correctly within the Phone Number input. To do this, I set up this workflow on each button within every repeating group:
"When Button 1 is clicked → Element Actions → Set State → Element: phone_keyboard (setting a custom state on the page), Custom State: create a new custom state…
Here, the custom state is going to ‘keep track of’ the numbers that a User has clicked. Fortunately, this is using custom states which don’t use any workflows. The custom state will store this number, and we won’t need to make any changes to the database or use any workflows until the User clicks Save.
After the custom state is created, Bubble needs to know what the value of it needs to be when that keyboard button is clicked. Since the custom state is storing a list of Things (or, a List of “Phone Buttons”), we want the List to add all numbers that a User clicks on to this custom state list. So the value would be setup in this way:
Here we’re just telling Bubble to add the number which the User just entered to this list of numbers (represented by the custom state Phone Number, which is a list of Phone Buttons). In the “when statement” there is also a condition that the numbers are only added to our list when the list count is less than 10:
This next part is a little confusing to explain, but the reason I created 11 copies of each number in the App Data is because if I only created one ‘entry’ for each Phone Button (1,2,3,4,5,6,7,8,9,*, 0, # only), the Phone Number list of Phone Buttons would not save the same data entry more than once. For example, if we didn’t create all of the entries, and a User tried to enter 555, the Phone Number custom state would only add 5 one time; the Phone Number already contains that entry. To workaround that, I created the 11 entries so that the same ‘number’ can be added multiple times. Then I added :filtered to each repeating group with the following Advanced Constraint:
Here we’re just saying that every repeating group should only display entries that aren’t already within our Phone Number list. So you can’t ‘see’ this happen in preview mode, but when a User clicks on the 1 button, that individual entry is added to our Phone Number, and the ‘next item’ 1 is displayed in the repeating group and ready for the User to click on and add to the Phone Number custom state. That way, Users can enter the same number multiple times as needed.
So now every time a User clicks on the keyboard, that number is added to the Phone Number custom state. The next step was to create the workflows needed for the backspace button. Though we were able to use the :plus option when adding items to our Phone Number custom state, Bubble doesn’t have a :minus option in order to remove items from our Phone Number. The workaround for doing this is to use :filtered in this case as well, where we just need to set the workflow up in this way:
This part is really tricky to explain, but will definitely make more sense the more you use it; but here we’re just telling Bubble that any Phone Buttons with a unique ID that matches our Phone Number’s last item (the most recently clicked number by the User), can’t be in our Phone Number list, and must be filtered out of it, or removed.
For example, if a User entered 123454 and pressed the backspace button one time, Bubble would only remove the 4 on the far right (not both 4s). This is because each 4 (all 11 of them each have their own unique IDs).
The next step I did was just to set up the initial content of the Input to be this:
And then created a Phone Number field within the User Data Type:
This is where I had some trouble figuring out how to replace the spaces and commas (and I believe there is a more efficient method than the workaround I found, such as: using a regex pattern) but for now, to remove the commas I created a ‘Do When Condition is True’(every time) event in the workflow:
And in that workflow, we’re stating that every time the Phone Number reaches a count of 10 items, set the following custom state:
Element Actions → Set State → Element: phone_keyboard, Custom State: create a new custom state… (I named this No Commas to help me remember but you could name this anything you choose).
And the value will be:
Here I just set the state of the the No Commas [Phone Number text] to be Input Phone Number’s value with the :find and replace option. Find and replace finds the commas and replaces the commas with nothing (so we’re just removing the commas from the value). Then I needed to get rid of the spaces within the text, so I set another action in the workflow which was:
Here it looks like nothing is there, but there is a single space in the ‘Text to find’ input, and the Replace by Input is blank. This then removed the spaces from the number.
Last but not least is to make sure this phone number is saved to the User. Here I created a condition on the workflow which is When Save is clicked and when the Phone Number: count is 10 (the User filled out a complete, 10-digit phone number), to then proceed and save that number to the User. The workflow looks like this:
*When Save is clicked and when phone_keyboard’sPhoneNumbercount is 10" → Account → Make Changes to Current User → Field to change: Phone Number, Value = phoneKeyboard’sNoCommas. This way, the phone number is saved like this:
Then I just have one more action in the workflow to reset the Phone Number custom state to empty:
And that is everything! I think there are definitely other ways to accomplish creating this keyboard, but for now I believe this will work and save everything correctly. Please let me know if anything was confusing/didn’t make sense or if you have any questions. Or, if anyone has any suggestions on a better method please feel free to make changes of course.
Maybe NoCode, but not Simple!
When you have to go through all that just to enter a phone number, I would be tempted to have a design rethink!
Very true! The native keyboard is best; I just thought it’d be interesting to try 
Great explanation. Thanks for posting.
P
PS - I didn’t answer your earlier question b/c you already realized how to get rid of the commas.
BUT – found this today… This is amazing, and should save anyone into this stuff a TON of time: http://www.regexpal.com
The name says it all! Tested it out, seems amazing.
Best,
P
Thanks for the link, P! That will definitely save a ton of time!!
Wow @fayewatson, what an eye-opener! 
If the commas and spaces are from a list of items going into text, they can be avoided by using the “join with” and leaving its parameter empty, which turns into “” the empty string.
As an alternative … Have a disabled input field, linked to a custom state of type number.
Multiply the number by 10 and add x for each button press where x is the number on the button.
So if the field is 123 … press 4 = 123 * 10 + 4 = 1234.
Condition on the field so that it is blank when zero.
Oh, and the “Back” key would be number / 10 - 0.5 : rounded to 0
Nice one, @NigelG
Another alternative, have a string seeded with a space, then use regex to append to the string:
regex: $
replacement: 4
takes 123 to 1234
This allows the * and + characters too.
(Use trim on the string to get rid of the space).
Ah! That is a much faster and cleaner way of creating this - thank you! Here’s a forum example with Nigel’s method incase anyone is interested:
Preview:
Editor:
The custom states that I used on this page are all set up on the page itself (keyboard_ex2)
1st custom state (to keep track of the Phone Number)
Name: “Number”, Type: number, List: No
2nd custom state (to convert the Phone Number into a text)
Name: “Text”, Type: text, List: No
3rd custom state (to make sure the User only enters a total of ten numbers)
Name: “Number Count”, Type: number, List: No
@mishav those sound like great alternatives as well! I am trying to recreate what you suggested. I have not used the :joinwith option before; in my first example where the Phone Number is a list of texts and I turn that into one single text value, what would the value be (using the :joinwith) function? Or is this done as each button is clicked?
Nice work @fayewatson! Keeping track of the total isn’t needed, can just make sure it is less than that big 11-digit number of 1 and lots of zeroes.
This is not so obvious, so some screenshots …
Keep scrolling down … if the previous part is a list of texts, or a list of something that can be converted to text like numbers or dates, the “join with” should be an option.
Notice the next entry no longer has the little “Search…” bit, which means a value can be entered:
Pressing Enter will get the empty string, which means all the items in the list get jammed next to each other in the resulting string:
Or some other delimiter can be entered, like “||”, to get the result of “item1||item2||item3”.
Ah, of course! Less than 10,000,000,000 - seems so simple but I would not have thought of that. I just went through the forum examples and got rid of the unnecessary custom states and used the “joinwith” option (screenshot below). Thank you so much for the explanations and tips @mishav! 
Really appreciate it!
