An Introduction to Using the "Any Component" Blocks

Apr 15, 2020

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.

You can check out the Thunkable documentation here

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.

Where are the “Any Component” Blocks?

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”

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

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

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:

  • Detect when any button is clicked
  • Then display the text from that button on the screen

You can preview a live example of this app here

The “All Components” Blocks

The “All Components” blocks allow you to get all of a certain component on the screen. 

There are two variations of this block: 

  1. Get all components (of a certain type) in something
  2. Get all components (of a certain type) on the screen

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:

  • Detect when any button is clicked
  • Confirm that button is in the group of buttons we want to perform the action
  • Then update something (in this case, give the screen background color a random color)

You can preview a live example of this app here

The “Create” and “Clone” Blocks

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: 

  • Clone my predefined row
  • Update the last label in the row to a random number between 0 and 9

You can preview a live example of this app here

The “Remove” Block 

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. 

You can preview a live example of this app here

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

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.

You can check out the Thunkable documentation here

Wrapping It Up

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.

You can get access to my Thunkable toolkit here

Happy Coding!

I help DIYers make mobile apps with Thunkable

Want to see how?

Show Me How

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.