Conditional Formatting of a Data Viewer List (aka "Painting the DVL")

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:

  1. Selecting one of the built-in layouts, like these ones:

image

  1. Creating a custom layout and selecting it

  2. 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 :wink: 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:

image

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:

image

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:

image
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:

image

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.

4 Likes

This is really helpful, Tatian. Good on ya.

So, if I’m understanding, creating the DVL is better/easier in Snap to Place (SnP) because there’s more customization control than Drag n Drop (DnD). So fewer headaches.

And inside the Custom Layout, we can set the over-arching design, kind of like with CSS. Move the text and img assets around, save it as a design template. I’m digging the Bindings feature, which is kind of like a class.

From there, I can import from SnP as a DVL into my existing DnD project. :crossed_fingers:

1 Like

Yep and just because I’m a stickler for details and it can get confusing if you swap out one term for another…

The steps are:

  1. Create a layout in a StP project. The layout can be just about anything but you’ll want a row as the top/outermost component in the component tree on the left sidebar of the Design tab. So something like a label inside a row or a button inside a row tends to work well.

You do not add the DVL component to the StP project. That project is only for creating the layout and saving the row as a custom layout. Likewise, you do not need any data sources attached to this project. You can literally make a custom data layout by creating a new StP project, dropping a row onto the screen, dropping a label/button into the row, and saving it as a custom layout.

  1. Save the layout by first selecting the row component. See the video below for the full process.

  2. Open a DnD project. Add a DVL to a screen and click on the current/default layout in the right side panel to select a layout. Select the saved custom layout that you created in steps #1 and #2.

You do not need to add any layout components to the DnD project. It strictly houses the DVL and accesses the already saved custom layout. You will also need a Data Source attached to the DnD project and selected in the DVL properties panel. Any DnD project can use saved custom layouts from any StP project. Saved custom layouts are listed on the Projects page in the My Data Viewer Layouts tab at the top.

  1. Bind any properties as needed (typically a label or button’s text). Again, see the video.

  2. Preview/test the project.

I linked to the documentation on another post as well but I like the video here as a starting point for learning about custom data layouts:

Ok, that helps me understand the process a little better. I’ll dig into it tomorrow night, thanks!