Using loops and lists to quickly change multiple component properties

In response to this question from @arduinofanboy, this tip outlines how to toggle the properties of a collection of components.

The scenario is that if, for example, there are 5 vertical arrangements on the screen then 4 should be hidden and only one should be displayed. This is a useful thing to be able to do, especially for navigating between several pages on a single screen.

In this demo app there are seven labels, one for every colour of the rainbow. There is a toggle button at the bottom of the screen and a textbox which allows the user to specify which label they want to display.

Start by creating a list of all the labels:

For this app I also created a list of colours, but your app could just as easily have a list of text values, background images etc.

With these two lists it is possible to give each label a unique colour using the “for each item in list” block. You can find this block in the “Control” category.

Using the “for each item in list” block again, we can create a procedure to show all the labels and hide all the lables. Creating the “showAllLabels” variable allows us to do this reliably.

Finally, we can display one specific label with the following blocks:

First we check to see if the user has entered a valid number, then, if they have we hide all the labels and finally display the specific label that the user has requested.

If you want to try this code out for yourself here’s the .aia file.
lists_of_components.aia (3.7 KB)

15 Likes

Very interesting, @domhnallohanlon

Thank you for sharing!

Thanks @amrita and @Kleyber_Derick …I’m open to suggestions for a better topic title though! :slight_smile:

@domhnallohanlon

I love your organization skills. Great!

Just wanted to point that in the first part the list of labels needs be linked to the variable labels not colours. And finally the in the last code block it should be true instead of false.

see screenshot below

AGAIN…I want to say thank you to Domhnall, this concept has helped me drastically!!! :blush:

~ALI

1 Like

well spotted @asardar! I probably took the screen shots before before I tested the app (how silly!) Now that you mention it, I’ve spotted a few more that need to be amended.

I’ll double check the sample code now and update the pictures tomorrow.

Thanks again for your keen eyesight and kind words!

Domhnall.

3 Likes

@domhnallohanlon what if look for it based on word, not by label number, I want to replace the label with text

Hi all,

I used this technique to make my code smaller and it is smart.

BUT

I seem to have problems when using this technique in timer fire-event as it seems that the variable scope is violated. If I traverse a number of elements with variable “j” 2 places, the result is really messy. Or so it seems to me…

I can accept this as variables seem to be super global, but how to control this properly? I tried to create specific variables to use inside the timer code, but that does not fly for me.

Anybody have similar behavior and perhaps some ideas?

Hey @henrikhngj5 - you’re a #thunkable-cross user, right?

Absolutely