It is hard to summarize what all the “Any Component” blocks can do, but if I had to try I would say the “Any Component” blocks allow you to create new components, dynamically edit existing components, and remove components from the screen.
My goal here is not to provide definitions for each of the “Any Component” blocks and how to use them because the Thunkable documentation does a really good job of that already.
Rather what I will do in this post is give you a general overview of the “Any Component” blocks and share with you a few of the ways I've been using them in my apps lately.
The “Any Component” blocks are located in the blocks tab on any of the pages in your app. Current “Any Component” is the last drawer menu on the left-hand side.
Now let’s dive into the specifics of each of these blocks.
The “Component Block” allows you to reference any component that is on the screen. It is a “getter” block, so it “gets” the component you choose in the dropdown.
I'm sharing this block first because it is the simplest to explain and I'm going to use this block in a few of the examples the following this.
The “Generic Set” and “Generic Get” blocks are very similar to the green get and set property blocks that are in each of the component drawers. The powerful difference, however, is that you can dynamically specify what component’s property you are editing.
The two use cases I have found these useful for is when looping through and editing a group of components or when editing a component that was just created or cloned.
Now let’s look at a few examples using these blocks and some more of the “Any Component” blocks.
The “Generic Event” block allows you to detect the event of any component type (ie. buttons, switches, etc.) on the screen.
The main way I used this is when trying to detect when any button is clicked. So let’s look at an example of doing just that.
A great example of this is creating a keyboard in the app. A keyboard is just a group of buttons with numbers on them.
So we can:
The “All Components” blocks allow you to get all of a certain component on the screen.
There are two variations of this block:
The main way I have used these blocks is when comparing a button selected from the “Any Button Click”. Let’s look at an example of that.
This example is similar to the last one, but there is a button on the screen that we don’t want to do what the other buttons are doing.
So we can:
The “Create” and “Clone” blocks are very similar. They both allow you to generate something new on the screen, but the difference is “Create” adds a brand new component to the screen and “Clone” copies an existing component that is already on the screen.
I prefer to “Clone” blocks as it allows you to have the look and feel of whatever you want to add to the screen already defined.
I have been using the “Clone” block to create a customized list viewer. This allows me to define a row with a bunch of components in it (ie. pictures, labels, buttons, etc.), style everything, and then duplicate that row for each item in my list. Let’s see a basic example of this.
I have created and styled a row with labels in it. Now when I click “Clone a New Row”, I want to:
The “Remove” Block is pretty straight-forward. It will delete a component from the screen.
The only use case I have found for this block so far is deleting a cloned row, but I sure you can find others. Let’s see this block in action.
When a button is clicked, we remove the button from the screen.
P.S. I take this example a bit further in my video tutorial by showing you how to regenerate the buttons after there are no more buttons to press.
The “Generic Method” block allows you to call a function/method from another component. I have not used this block yet, so I won’t share an example.
However, I do have two notes, the components that are available in the “in” dropdown menu are dynamic based on the components on your screen. So if you don’t see something that you think should be there, be sure it is on your screen.
And lastly, I wanted to remind you that Thunkable has some great documentation on all of the “Any Component” blocks.
So you have seen a few examples of how you can get started using the “Any Component” blocks. I know they are a little intimidating, but it makes sense: the more complex blocks do more complex things.
If you are looking for some more free Thunkable training and resources, including access to the app shared in this post, you should check out my Thunkable toolkit. It has everything you need to get started with Thunkable.