[Solved] How to create a customized list view

I am looking for a list to present data in a dynamic and customizable way.

What I have seen from the toolbar so far, I can use a Data Viewer Grid and choose between

  • Only Title
  • Title and Subtitle
  • Title, Subtitle and Image
  • etc.

But it seems there is no way to customize the list in a way that suits my need. For example present a dynamic icon that is visible based on the datasource?

Hey @emailtester32x

What kind of app are you trying to build?

https://docs.thunkable.com/custom-data-viewer-layout

1 Like

Currently, if you need to use a custom Data Viewer layout, you’ll create it in the Snap to Place interface and then use it in the Drag and Drop (or Snap to Place interface).

It’s fully possible to customize what you show in any Data Viewer component (list or grid).

First, you need to choose or create an Dataviewer layout.

After you create and connect a datasource, binding the fields of the datasource you want to display in the DataViwer…

The datasource contains the items (text or images) you wish to display.

If you use Firebase or any external source as repository, you can create functions to load, filter and insert what you want in the datasource.

So you can manipulate the data you want to load in the datasource according your needs or rules.

Thanks for the reply.

I don’t have rows or columns in the components

image

You need to create a new datasource, and add tables / collumns to insert the data inside.

The rows with the data, you will add from any source you want (variables, text inputs, or external databases).

Please check the documentation avaliable online that explains how to do it.

And please, don’t mix the ListViewer with the DataViewer components… They are completely different.

In the ListViewer you use LISTS as source and have only a single column to show.

The DataViewer you can load data from different sources and display multiples columns, change layout showing images, icons and having full control on click actions.

I do have a data source with data. I can also display the data and modify it, even with using an API in the background. Works all perfectly fine. If I use the Data Viewer Grid.

But I have found no option to customize the Data Viewer Grid in a way that is useful for me. As mentioned, Rows and Columns as a design element do not exist in my Components/Toolbox. I watched the YouTube on that and read the documentation. It talks about Rows and Columns and shows an Icon how that looks like in the Components/Toolbox. But I don’t have that in my components/toolbox. (Do I need a paid subscription for that?)

As far as I understand the Data Viewer Grid, it presents itself with exactly 3 options for customization

How would I use that, to lets say for example displaying 2 icons at the same time? Or even one icon, since the Image property is designed in a way to show an actual image of something.

As I mentioned, you need to use the Snap to Place (StP) interface to create and modify custom layouts. To use the StP interface – which does have rows and columns – create a new project and do not check the “Use the Drag and Drop builder” box:

1 Like

Awesome. Thank you. Was already searching for that option.

In fact as I’m trying to explain, you need to create your own customized layout of your Dataviewer List. Above you have the video link that explains how to do it.

After you create and save your customized layout you can freely apply in your project. No extra costs!

To create a layout you must to design a new screen (as a regular screen), creating the rows and columns that will contain the structure for 1 row in your datasource. As @tatiang said, you can’t use the DnD interface to create this type of screen.

If you are using the new DnD interface, please create a new project, and don’t check the DnD option when creating the project.

Then you save this screen as a DataViewer layout, and after that you’ll see this new layout available in the dataviewer options when you select it in your project.

Again, it’s just a matter to check the procedures in the provided documentation. Hope it helps.

1 Like

This was the checkbox, I wasn’t aware of. :slightly_smiling_face: Now the Row and Column option is available.

1 Like

I’m complete new to Thunkable I’m an IOS developer for many years and I’m starting to migrate my SWIFT apps to Thunkable. This “Use the Drag and Drop builder” option reminds me on the Xcode “Use storyboards”. My concrete question is, is it a free to choose option or will the “older” StP interface not available in the future. For me as a programmer the “older” StP interface would be preferred because I think I have more options like in Xcode to control the screen layout with row and colum. Or shall I learn from scratch the newer DnD interface where the screen positing of the elements for me seems to be more a black box? What is the reason for having two different interface builder options?

1 Like

A quick response would be that you should learn DND… Namely this is because we will be fading out snapped a place. That said, we are going to be introducing rows and columns to the dragon drop interface very soon. We don’t have an exact launch date for it yet however it has been in testing and being worked on iterations are being produced and hopefully will be able to launch it soon. That said it can still be months away however the fact is, drag and drop will replace to snap to place interface. Snap to place interface will be faded out at some point. We will be providing a converter so that users can update their projects from snapped a place to drag and drop. It’s going to be wonderful

1 Like

Thanks, that’s a clear statement!

1 Like

Can you please give me a tip where I can find a video/documentation on how to exact position components using DND (without row and column component), thanks

Everything’s already exact positioned. Maybe I’m misunderstanding?

It was my misunderstanding. I found an entry here: https://community.thunkable.com/t/positioning-and-sizing-in-dnd/1244604

Everything you do in DnD is absolute positioned. :smiley:

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.