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).
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.
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.
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
Then click “+” as indicated in the image
If you have already connected your Google sheet then selected from already connected data sources otherwise click on Create New
Choose Google sheets from the next screen
You can then click on Select a Sheet
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
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.
And this is how it would be displayed by the app.
Now, the coding side.
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.
Here is the output of the second method
Hope this clarifies the steps to reproduce your list.
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>
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.
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.)