Changing properties of cloned components

By using the “Any Component” blocks in Thunkable, you are able to clone entire rows or columns of content. But what if you then want to change some of the components within the row or column?

Design

Usually you can leave the precise details of your design until the end, but in this case you need to know what components will be going where so start off by placing everything in its final position.

Change One Label

While developing this example I started off by breaking the problem into smaller pieces. Rather than trying to have any button control any label, I started off by seeing if I could have any + button increase one label, and then have any - button decrease the value.

The ability to do this relies entirely on spotting the pattern in the repeating rows. In the case of my design, all the + buttons have odd indexes and all the - buttons have even indexes, for example:

  1. IncreaseButton1
  2. DecreaseButton1
  3. IncreaseButton2
  4. DecreaseButton2

Change Any Label

This part is a bit trickier, but again relies on the fact that if you repeat a row you are creating a pattern. Since my rows have two labels and two buttons, the “scoreLabels” will all be even and the “titleLabels” will all be odd. Your app probably won’t be identical to this one, but there will be a pattern and that’s what you’re looking for.
in the example below, if decreseButton2 i.e the 4th button in our list, is pressed then we update the 4th label. If however the third button is pressed i.e. increaseButton2, then we need to add one to the index so that we’re still updating the value in label4 and not accidentally trying to change the value of label3.

Ignore the Clone Button

Your app probably won’t have (or need) a clone button, but if it does you can ignore it by adding the test:

if component = CloneButton

like the example below:

Creating a “New” Row

Since the scoreLabel in Row1 might already have a value in it, we need a way to set the text back to 0.

Since each row has two labels we can use index x 2 to find the newest scoreLabel and set the value to 0.

A similar approach is used to set all the titleLabels to Label1, Label2, Label3 etc.

Remix

https://x.thunkable.com/copy/f6acb70f4dafd826a42c887b141ec650

2 Likes