We’re working hard to bring you the Extended Listviewer component to make developing your app even faster, but in the meantime here’s a DIY approach.
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?
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:
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.