If you have more than 5 or 10 similar components on your screen it can be tedious and time consuming to update each one individually.
Thankfully the Any Component blocks and the List blocks can be combined to automate these repetitive tasks.
Overview
In this tutorial we’ll learn how to build a Twitter directory app like this. The idea is that each profile URL begins with “https://twitter.com” and the only thing that changes is the individual profile name
Parallel Lists
With parallel lists, two or more lists are used to store “columns” of data. This first item in list 1 is intended to pair up with the first item in list two and so on.
In this specific example, clicking on button1 will open the first Twitter profile, Button2 opens the second profile, and so on.
Getting the List Index
Once the parallel lists are made we need to add another variable and a generic click handler to our app.
The profileIndex is used to store the list position of the button that is clicked. It is initially given a value of 1 but as soon as a button is clicked it is updated to any number between 1 and 4. This is highlighted in the screenshot below.
Making the Links
Now that we know which button was pressed we can go ahead and generate the corresponding link.
Using the profileIndex we go to the listOfProfiles to retrieve the appropriate link. This is highlighted in the screenshot below.
Demo
At this stage, this is what the app looks like. It’s functional - but there’s still room for improvement.
Adding a Third List
Rather than having all the buttons simply say “Button” we can add a third list to our app - listOfNames - that can be used to add the names to each of the buttons.
Looping through Buttons
When the app loads the variable j is used in place of each individual button …
Renaming a Variable
… this can be a little confusing if you are new user. If you right click on j there is an option to rename j to something more intuitive, such as button. This step is totally optional and your blocks will work just as well if you want to skip it.
Getting each Name
So now, for each button in the listOfButtons we want to change the text from “Button” to the person’s name. These, of course, are all stored in the listOfNames but using #1 here like this will set every button to have the text Thunkable, since this is the first item in our list of names.
Reusing the button index
Instead, we apply a similar logic to that used earlier. If button1 is pressed, get name1; if button2, get name2 etc. To do this we find the first occurrence of the button variable in our listOfButtons
Updating more Properties
If you want the buttons to all have the same colour or width for example it’s really easy to do, simply change the property of each button like this:
