Add Input by Tapping Components - Add PIN Code

I want users to set up pin code - not with the keyboard but with my “stylish” buttons.

To do that I have created the following design:

“* * * *” are to be changed by each tap to my numpad.
1234 is the final 4 digit value actually tied to a parameter. Of course this will not be visible, just for data purposes.

I feel like this can be done by private variables and such but couldn’t figure it out how can I concatenate the 4 digits and only limit users to 4 digits. Any ideas?

Simple example. Create a page variable called ‘Length’ (Number) and create one called ‘Value’ (Text).

On your Button tap event (for each button) do something like this:


First check that Length < 4, then if so concatenate the ‘Value’ variable by doing a + “button #”, and +1 to ‘Length’.
Capture1A

You probably want to add a back or clear button so the user can backspace or delete the most recent entry, so for that do like this:


Check if ‘Length’ > 0, if its 0 then just set your ‘Value’ variable = “” (blank). Otherwise subtract 1 from ‘Length’
Capture2A
and set ‘Value’ to SUBSTRING of itself ‘Length’ characters like so:
Capture2B
Capture2C

So now ‘Value’ should display whatever the user has pressed, 4 characters or less.

3 Likes

@JOHN_WORSHAM that worked very well. Thanks a lot!

I have added both delete and clear using the flows below.

1 Like

Hello @Atakan_Tokgoz and @JOHN_WORSHAM was curios how he was able to put the * at a constant distance from each other i tried the same with the line spacing of the input field but the results are not good. Can you please explain the breakdown of the component you use . I got that the numpad are just button in a container but do not get the **** field . How do you create it? Thanks in advance

I used line spacing (25) with a paragraph component.

Currently I’m using a paragraph which is connected to

At the initial design I used rows and a paragraph each but then I didn’t like how it looks. Instead made it invisible to visible. It was also simpler.

@Atakan_Tokgoz thanks for your help, It solved my issue