Emulating a Pin Code screen with Buttons and Dynamic Text

Hello all!

We make escape rooms.
I’ve been learning Bubble, and love the capabilities!

In testing, I wanted to create a screen emulating a secure door 4 digit code entry. I’ve created the button layout, but wanted to find out the best way to do this:

Currently I’ve mapped each button to create a new thing, and I want to print the button numbers as they update, like so:

I have it set up, but having each one create a new thing in Data every time, and deleting it by sort of mass wiping is clunky, and definitely doesn’t feel like the smoothest way to run this.

The data type is named ‘Code Digits’ and is format as text, which does display, and technically does the job I’m looking for, but I’m hoping to be efficient about this.

If this is indeed the most efficient way to do this, how would I best clear the data from the text box if they type in the incorrect code?

In addition, I then want to navigate to a new page when the code is input correctly, this should be simple right? Navigate only when the text box says ‘1234’ for example.

Thanks everyone!

Hi there, @notanescaperoom… apologies in advance if I am about to waste your time with a stupid question or with something you already know, but how open are you to the idea that the code does not contain duplicate digits? Why do I ask, you ask? If the code contains only unique digits in any combination, then everything you described can be done using a custom state set as a list. And how do I know that works? Well, your post caught my eye, and I wanted to see if I could build out an example using a custom state. It was only after I built out the example that I remembered you can’t have duplicate values in a Bubble list (not sure how I forgot… I blame you for having an interesting post :slight_smile:), so now I have what seems like a much less “heavy-handed” solution than using a custom data type and creating, deleting, and searching for things, but it’s got the “unique digits” caveat associated with it. Thoughts?


Try this - Testtona | Bubble Editor

I only made it for 3 digits, but you can do it for as many digits as you need. For ease of testing, I used list of numbers from the toolbox plugin for the pinpad.

1 Like

Pretty cool, @tona… for what it’s worth, though, the whole thing can be done with a single custom state (assuming the unique digits thing is not a showstopper, of course). @notanescaperoom, if you are interested in going the custom state route and want the details of my example, just give a shout.


1 Like

Thanks both, Tona, I’m playing around with your example now and it works, and using a repeating group is smart! Thank you!

Mike, I’d love a bit more detail on the custom state route as well if possible, I think getting to grips with custom states in general will really help with other parts of the rooms!


Well, to be clear, Tona’s example uses custom states, too… it just uses a lot more of them than my example because it doesn’t have the unique digit limitation. That was really the whole point of my initial response… if the code must be able to contain duplicate digits, then you have to go with a custom data type or a much more “involved” (no offense, of course, Tona) custom state solution. If you can live with the unique digits limitation, then you can use a single custom state.

I’m more than happy to live with unique digits! I haven’t managed to figure it out myself yet, but will give it a shot now I know its possible!

Ah, if the unique digits limitation is not a showstopper, then here are the details of my example.

I have a custom state called code on the index page, and that custom state is a number and a list.

The workflow for each numbered button is the same, with the exception of the number after :plus item in step 1, of course. Step 2 of the workflow clears the code when 4 digits are entered that are not the correct code of 1234. In step 3 of the workflow, I am showing a popup (as opposed to navigating to a new page) when the correct code of 1234 is entered.


Oh, and here is the text element that displays the code as a user presses each number…

Any of that make sense? Hope it helps!


1 Like

Not offended. I took into consideration the duplicate number limitation on the states. Otherwise, it’d be quite simple. I’m sure there are other code/plugin ways to do this.


Thank you both! This morning I used tips from both solutions presented above, and for the full customisability, I’ve went for Tona’s solution, despite it being more heavy handed. Thanks folks, much appreciated!

Mike, I think your technique will come in useful for a few of the other things I plan to create in this virtual escape room. Cheers!

1 Like

I’m glad I can help. Good luck.

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