Drag and Drop: Unable to set the background or text of buttons in custom data viewer

[zander]

When I use the custom data viewer in the DnD interface I can’t set the background picture or the text for the buttons in the custom data viewer.

I created an example to show the issue. I set the advanced properties.

Try to set the properties but as you can see the values don’t show up

Link to project creating the custom data viewer in SnP:
Thunkable (Expires Feb 22, 2022)
Link to project in DnD
Thunkable (Expires same date)

[muneer]

Data Viewer List need to be bound (connected) to a Data Sources but the image you shared shows that it is not bound to any source

To be able to link, for example, text to a label inside the Data Viewer List you need to supply from the text from a source not from a variable or a component in the app.

[Edit]
Not all components can be mapped inside the Data Viewer List/Grid.

[zander]

These properties are able to be mapped in the SnP but not in the DnD. Even when supplied with a dataset and mapped, the values do not change.

In the screenshot below, even before setting a data set to link to. You can see the properties you are able to map with. This is not the same as in the DnD photo above, in which the properties are blank.

[muneer]

DnD is still in Beta stage and not everything that works in StP would also work in DnD.

However, you can fill in a bug report for that.

Bugs and Feature Requests

[zander]

Yeah I just wanted to make sure I wasn’t crazy, I figured it was a bug, but I wanted to confirm with the community. I’ll raise a bug report on git and copy it here. Thanks Muneer!

[jared]

You’re not crazy. It’s not there just yet. You can make the changes to the dvl rows using loops or when you make the data. Want an example?

so for context. each user in the app has a list of notes. each item in the list is an object and each object has a handful of properties.

So i first delete all the rows in Table 1
then I get the list of objects stored under cloudNoteBucket/firebaseUserID/notes/ and loop through it
during each loop, I create a new row in Table 1

• because each item in the list is an object, I use the ‘get property of object’ and use the variable j to extract a value to save for each column in the table
  – j is a temporary variable in this loop. it’s used as a stand-in for each item in the list/array. so during the first. loop, j is the first item in the array, during the second loop it’s the second item, and so on.

for the image value column, i save either a true/false value
then after each row is created, i test if the CrossedOut Value for j = the word true or false and return a boolean true/false value.

• (it’s key to understand a word ‘true’ isnt the same as the green ‘true’ logic block or what this yellow block returns which is also a boolean value)

notice that when you save a row, it returns a green rowID block. if j’s crossedOut is true, then i use that rowID to modify the corresponding DVL row. So when row 1 in Table 1 has a crossedOut value of true, then the DVL’s row 1’s components can be modified. in this example, i am showing/hiding 2 different labels.

the next if block sets an image in the DVL to be visible when there is an image to show and keeps the image element hidden when it’s not present! it uses the same logic.

[muneer]

With looping through the local tables records you will be able to achieve the result in a roundabout way.

For Example, this is a sample local table values

I used these blocks

To achieve this result