Thunkable Staff: I didn’t see a category for community tutorials so I’m posting here. If this isn’t allowed, please move it to a different category.
The concept of “painting the DVL” (thanks, @jared for the term and an explanation here!), which I would tend to call “conditional formatting of the DVL” can be a tricky one to understand. It definitely took me some time and many attempts to get it right. I still have to check and-recheck my blocks each time I use this method.
So what is “painting the DVL”? Well, it’s the idea that DVL’s (Data Viewer Lists) have essentially three ways you can change their appearance:
- Selecting one of the built-in layouts, like these ones:
-
Creating a custom layout and selecting it
-
Changing one or more properties of the DVL components such as background color
In this case, we’re talking about #3. You can see what this looks like in the preview screenshot below or by watching this video (no sound) that shows the way this all looks when it’s set up correctly:
Notice how the DVL rows that were normally yellow from the custom layout I designed change to either orange or gray based on the word displayed. I’ll be explaining how to do all of this below…
But first! The caveats! This is advanced Thunking. It’s not for the faint of heart. If you’re just starting out with Thunkable and/or you have not done a lot of coding in the past, maybe save this for another day and just use DVLs the way they were intended to be used (see #1 and #2 above). That being said, I will do my best to answer questions in this topic but please keep in mind – as is true for all forum posts – that the more details you can provide (screenshots, links to projects, explanations of both what is and is not working), the more likely I am to be able to help you.
Let’s start with a screenshot of the blocks I used for this demo:
And the preview of those blocks:
And if you’re just wanting to jump in and try it yourself instead of reading my long-winded tutorials 
well then here’s the project link (the first screen is the one you want): Thunkable.
You can see in the sidebar that I’ve expanded the DVL to show the layout components:
In this case, I created the custom layout. But you could also do this with one of the default DVL layouts. What I typically do is to loop through the data source values (rows) in a column and if a certain condition is true, I make a visible change to the DVL. In most cases, that either means I’m changing the background color or I’m setting the component to visible/invisible.
The actual conditional formatting is the easy part (I think!). The hard part is that Thunkable has a few bugs with the Get Value and Get Row Object blocks so we have to get a little creative about how to access Data Source values. What I’ve done is to take the list of values for the column “Fruit” and get a particular item during each iteration of the loop where i is the index variable for the loop.
So we’re looping through the number of rows in the data source:
And then the if block is checking to see if the list item at index i (which is really just a cell in the data source) is equal to the text string “Orange”:
My data source has “Orange”, “Apple” and “Strawberry” as the values in the column. You can see those in the Data section of the project (link above). FYI, you could just as easily use the Logic and Math blocks to check if the list item value is less than or greater than a certain value and make changes to the appearance based on that.
So to actually change the DVL appearance, I expand the DVL in the sidebar and then click on one of the components such as Column1 and I suddenly have access to all sorts of properties of that component:
I can use the set blocks to change any of those properties. In the case of the first screenshot above, I chose Background Color:
There’s a spot for a row id. In many cases when using Data Sources, you can simply put an integer value such as 3 in there to get – for example – the 3rd row of data. Here, you can’t. You need an actual row ID. Row IDs are long text strings like “d613hjJHGFS23io0A234mns.” We can’t view them in the Thunkable interface but we can access them via the list of values block by selecting “ID” from the drop-down menu where we normally choose a column name:
The “ID” column is created automatically and is always hidden from view when displaying the Data Source table. Thunkable generates the row IDs on the fly as rows are created. So… we need to get the row ID for the row we’re currently evaluating in the loop. You can see that I do this by first assigning the list of IDs to a variable called row IDs list before I start the loop, and then using the in list get # block to get the matching ID for the current row:
Feel free to play around with the demo project that I linked to above.
One word of warning: if you change the DVL layout you’re using or select a different data source for the DVL, it messes up the set blocks and you have to re-configure them. You’ll know because you’ll see a warning icon and an error count at the bottom of the screen. In that case, you’ll need to re-select the component name such as “Data_Viewer_List3’s Column1”. And more frustrating than that is that the property values such as the thumbnail colors or – if you use the Visible property, true/false – will reset to their default values. I find this so annoying and I’ve asked Thunkable to fix it. My workaround is to use blocks for the property values. For example, instead of selecting a color by clicking on the thumbnail, I drag a text block onto the thumbnail and then use a hex value (“#90EE90”) to set the color. Or for the Visible property, instead of selecting True or False from the drop-down menu, I drag a True or False block from the Logic drawer onto the property value spot. If you then change the Data Source or DVL layout, those blocks will retain their values.
