Creating Radio Button Logic in Thunakble

Over in the Thunkable Community we had a question about illuminating a button when it’s pressed. One if the requirements here was that only a single button could be lit up at at time. In the example below, clicking on 1 changes the background colour to blue and then clicking on 4 switches button 1 back to grey and now button 4 will be blue.

It sounds simple enough — and in some respects it really is. Turn one button blue and turn all the others grey. I tried this in my recent YouTube Video, where I started building out the app logic at 1:06 and was comfortably finished blocking out my project within 2 minutes. Try it for yourself, I’m sure you could beat my record!

Haste Makes Waste

Ok, so what’s wrong with that first, “intuitive” approach? Well it doesn’t scale particularly well for starters. For the original 4 button layout I needed 9 blocks to get the behaviour we were looking for, and that was just for a single button. Scaling up from a 4 button layout to a 6 button layout would require going from 36 blocks to 78 blocks. It gets gets progressively worse for each button you add.

Another reason not to go for the simple solution is that it’s harder to maintain. Let’s say we want to change the colour to green instead of blue. Our original 4 button layout requires us to make 4 changes in our blocks, but if we have 8 or 10 buttons we’d need 8 or 10 changes in our blocks (you get the idea!)

So, can we do any better?

Enter the “Any Component” Blocks

The Any Component Blocks have been in Thunkable for a while now. In the latest release you can find them in Advanced > Any Component which I’ve highlighted in the screenshot below.

There might only be 7 blocks to choose from, but the possibilities are almost endless.

For our radio buttons, we first want to switch “off” every button on the screen and then we want to switch “on” the button that has just been clicked.

The solution I arrived at looks like this:

We loop through a list of all the buttons on Screen1. For every button in that list we set the background to grey. The really nice thing about this is that no matter how many buttons we have on that screen, we only need these 5 blocks to “reset” them back to their default colour. It works just as well with 104 buttons as it does with 4 buttons.

The last thing we do is change the background colour of our clicked button to blue. This is done by using that light green component block. Going back to the idea of making an update to this app, if we want to change the clicked buttons from blue to green we only need to change this one block. Not one blocks per button, just one block.

Thanks!

So there you have it. The full build, along with a link to my project page is over on YouTube.

Let me know what you think and if you have any questions like this, don’t forget to post them in the Thunkable Community.

Thanks!