Creating dynamic text color changes

Hi all

Im trying to build an app to help my son choosing foods that will not cause him issues when choosing foods (recently diagnosed with Crohns) , i have the base of what i need but not sure if this is a limitation or if i just have no clue how to achieve it (hopefully the latter)

Im scanning a food barcode, this then pulls in information via an API containing its ingredients, what i want to do is have a list of words / labels that will display in RED (ingredients he cant have) i cant use another text box as the text will differ each time

View recent photos

Picture for example, can i somehow define words like “bht for freshness” “Folic Acid” and they would appear in RED i have no idea how to go about this as the text isnt static

thanks in advance


There isn’t a way to format certain words differently from the rest of a text string but you can get creative with how you work with the ingredients. Since they are a list of comma-separated values, you can convert them to a list and then loop through them in order to determine which ones are okay ingredients (add to a list variable for okay ingredients) and which are not (add to a list of not okay ingredients) and then display those two lists separately.

See this block: Lists - Thunkable Docs

1 Like

Thanks, i did wonder this however i couldnt see a way to say “THESE ARE BAD” create a list with these, and same for ok , my brain and logic doest always go hand in hand, i get this far :smiley: and im pretty sure thats wrong too

ill keep trying im sure itll click at somepoint

Does anyone know if i can use Data sources for this, IE a local table of allowed and not allowed, populate these manually and then somehow have some IF exists loop check each ingredient in the barcodes response file against the local tables, so i can atleast display a box for each allowed, and not allowed.

Very difficult as a beginner as im not sure of limitations, and how to achieve what i need in new software, i cant seem to find this information online

You’re off to a good start! Now you just need the if/else conditional blocks. Make a variable and create a list of terms that would be bad ingredients. Call it something like app variable ingredientsToAvoid. So, inside of your for each item loop, you would say if list app variable ingredientsToAvoid contains j then … add j to app variable bad ingredients list; else, add j to app variable good ingredients list.

So you’re checking to see if something like {“gluten”, “sugar”, “dairy”, “shellfish”} contains whatever ingredient is the current “j” of the loop. So if “gluten” comes up, it would be filtered into the “bad ingredients” list and if “apple” comes up, it would be filtered into the “good ingredients” list. Just making assumptions here, I don’t actually know much about Crohn’s disease.

I think you can use the Text or List block “does contain” to check for “j”. That will alter whether your app variable ingredientsToAvoid is a list or a text string (comma-separated). If that doesn’t make sense, let me know and I can post a screenshot example.

1 Like

@tatiang 's approach is very good if you’re looking to bifurcate the two lists. If you are looking for something like “display a list of all the ingredients, highlight the bad ones red in the list”, you can try the following. It’s a bit advanced, but if you’d like to go with it we can help.

  • a custom data viewer list layout, with just a container and a label inside, with the container’s background color added as an advanced binding property to the layout would do the job.
  • as we receive the ingredients list from the API, we populate our Local DB source with the list in one column, and set the second column to what background color it needs to have; i.e. if the ingredient is bad, code would populate that ingredient’s background color to red, else white.
  • you can use @/tatiang’s idea to filter who’s good and bad, and set bgcolor of that iteration to red.

I know this is all a bit advanced stuff, but we’ll be glad to clarify & help you at any step.
Cheers, Kartik.

1 Like

Yes! This idea of “painting the DVL” (see this: Conditional Formatting of a Data Viewer List (aka "Painting the DVL")) is a powerful and flexible approach to formatting things in Thunkable. But it’s advanced, for sure.

1 Like

(off-topic) Kudos @tatiang , great tutorial there. :+1: :+1: I’ll go through it for my next app where I’m doing a bunch of stuff with DVLs :grinning:

1 Like

Thanks, i think im overthinking things but i feel like im getting the process logic fine, but i cant find blocks to fit, so im clearly not there with the block logic

Thanks ill try both ways for the exposure, but ill start with the easier version as even that is hurting my poor brain atm :smiley:

1 Like

@tatiang @kartik14

I think im almost there, however results in Allowed text and Not allowed only show 1 entry , how do i add items to a variable rather than set j to variable, as i think its just keeping the last loop rather than everything - IE app variable only contains the last loop rather than each loop…

You need to initialize the app variable with an empty list block and use “add items to last in list” block in Lists section.


Remember to reset both variables to “empty list” before the “for loop”, to make sure both lists are empty for a fresh population.

Now using the below block would allow you to display contents of the lists in both variables, in a comma-delimited format (as labels don’t support direct lists)

Does this look correct ? im not sure where im placing the 2nd block (circled) as it errors placing where i assumed at the start of the else loop

Here’s how I would set up the blocks. I can’t test it because I’m still seeing the project corruption or whatever bug (see this for an update: [Solved] How do I set API Headers? - #29 by tatiang) was preventing proper parsing of JSON in Thunkable but I believe those blocks should work. Note that I used property notation because I find that easier but you can absolutely still set app variable all_ingredients the way you did in your last screenshot. It doesn’t seem to matter for me; both methods crash the project.

Edit: Oops! I accidentally added an extra get object from JSON block. Please remove that when you set up your blocks since you’re already converting the API response to an object in your screenshot.


Bizarrely i changed everything as per you recommendation and it worked perfectly , i dragged a block out and placed it back and now crashes the Live app when testing , can you please just skim over this as i cant see anything is any different or wrong ( guess CTRL+Z just doesnt work :D)


Im stumped, had an ah ha moment based on what you said yesterday creating list blocks from variable so changed the Not Allowed ingredients to a static list (as below) but still crashes app - its odd as when i first created the block using variable it 100% worked lists populated just as required, subsequent attempts just result in app crash.
Im wondering if the API limits me to how many UPC Lookups i can do in 24hrs , not sure if that would cause this issue however but ill leave it for today and resume tomorrow as i think ive reached as far as i can get for today

A rate limit (quota) from an API would not cause a project/app to crash. It would just return an error which could be seen in the green [error] block.

Those latest blocks look correct to me. I had reported a problem with the does list contain block crashing when using a variable within a loop (here: [Solved] How do I set API Headers? - #29 by tatiang). But when you replaced the variable with a static [gear] list block, it’s still crashing? I’m not sure why that would be.

One suggestion I have as far as debugging goes is to add set label's text and wait blocks throughout your code to see where it fails/crashes. I explain my method for doing that here: Debugging in Thunkable X (Video)

thanks again @tatiang
the crash is caused by something here, runs fine up to this point, ill see if i can debug tomorrow further but seems likely its the the “set app variable all ingredients from list” block

@tatiang , tested again this morning and working again, so ive checked thresholds on UPC lookups and ties in with exceeding lookups - thanks again for everything really appreciate everyones help, ill verify it breaks again after exceeding lookups

1 Like

If it does crash when you exceed your quota, you could temporarily assign the green [response] block to a label and see what its value is. If it’s “null”, then you could check for that value with an if/else statement. And then only run all the parsing code (set app variable $API to…, etc.) if the value is not null. I like to add an alert when it is null or when the green [error] block has a value to let the user know what happened.

1 Like