Make a list view

I need your advice. I making my project by dhunkable, but I don’t know how to make list view.
I hope to insert only “name” items of Google spreadshee file at list view. (Pic1)

And If I select one name among list name, I wish to display a phon number of selected name.
For referance, I made this function (Pic2) by “select list item listt” & " add items to lis" block, but I don’t know how to make it at thunkable(Pic3).

image

2 Likes

I don’t understand what your screenshots have to do with your question.

Here are some Google searches to get you started:

google sheet Thunkable
listviewer Thunkable

You need to read the documentation about Data Sources and List Viewers and then watch a couple of tutorial videos to learn how to do this.

Once you have the blocks set up, post a screenshot and someone can help you. The blocks you have aren’t at all related to your question so I’m really confused why you included them.

Here’s a good place to start, too:

3 Likes

First of all, Thanks for you interesting about my question, and seek your understanding about my english skill is not good.

Atually, Pic2 and Pic3 image is my orignal project. In case of Pic1, I made sample for understaing becasue my english is too bad.
I already saw youtube movie that you attached it. but I have a problem that the datasource cannot be used.
I have made my project by Appinvetor and I try to made it again by thunkable as same with previous made application.
As I know, befor UI componts of thunkable was simmilar with Appinvertor, but many thing is different now.
So, I have study to replace instead of previous application.
I am sorry if I make your confusion.

1 Like

Welcome to Thunkable. As you are coming from MIT App Inventor let me first go over how to link your Google sheet to your Thunkable project.

Thunkable has TWO development platforms; StP (Snap to Place) also called Legacy UI and DnD (Drag and Drop). How to connect an external data table is the same. I will use the new platform DnD but whatever step I take will have a similar, if not exactly the same, in the other UI.

Start by selecting the Data icon
image
Then click “+” as indicated in the image
image
If you have already connected your Google sheet then selected from already connected data sources otherwise click on Create New
image

Choose Google sheets from the next screen
image
You can then click on Select a Sheet
image

At this stage you would have completed the connection to the spreadsheet and you can see it listed as one of the Data Sources for the project
image

Now, using the Google sheet table in the app can be done in TWO different ways

  • Using DVL (Data Viewer List)
    Just add a DVL in the screen and then bind the DVL to whatever column in your table and a list view will be automatically created. The list view of the DVL can list number of columns not only a single column.

In this demonstration, we will use only a single column “names” as in the image.
image

And this is how it would be displayed by the app.
image

Now, the coding side.
image
This is the only code you need to show the number once the user clicks on any of the names.

  • Using simple List Viewer
    With this method we use the simple list viewer and feed it the names from the google sheet using a block in the Data Sources drawer in the Blocks screen.

We will need to use this block when the screen opens and then we use a similar block as above to display the number of the selected name.
image

Here is the output of the second method
image

Hope this clarifies the steps to reproduce your list.

4 Likes

Thanks so much!! I will try it!!!
Acutally, everythig of Thunkable is new for me because I am bignner.
But I think is that your advice help me!!

If you are ok, I want to ask one more!
Acutally, I want to change a selected item among listview items.
The below is sample image and I made sample image for understanding.
May I ask that you are help me one more>

1 Like

What do you mean by “change a selected item among listview items”?

If you can give more explanation of what you want to do.

First of all, thanks for your response.
When I click an item in the list, I want to change the text color or background of the clicked item.
For example, if I click “A”, I want to change the color of the clicked “A” to another color.

2 Likes

Try this
https://x.thunkable.com/projectPage/5fe49968180d0200197113a3

I made this example for a similar request. Maybe you find it useful.

1 Like

Thanks for your kind explain and I understood how to make it.
So, I checked my block but I can’t find a block that have a “row id”
(“Set______ for row id’s______ to _____” at all UI componet.)

The blow is my project!!!
my block2

1 Like

Yes, The List Viewer has Index. In this project I used Data Viewer List which has the row id.

1 Like