Drop-down Menu/Spinner Tutorial

[jane]

This post will display two ways to make a drop-down menu in your Thunkable X app.

In Thunkable Classic, this feature was called a Spinner.

This tutorial will recreate the Spinner using two methods: in one, a List Viewer will be used. In the other, a List Viewer plus a Button will be used. Method 1 has fewer Layout components. Method 2 is more suited to displaying the currently selected item at the top of the list, and as such would be more suitable for a longer list.

The app can be accessed here, with one method on each Screen

Method 1: List Viewer

This method uses a single List Viewer to make a drop-down menu.

Layout

The Layout needed for this feature is simply an empty List Viewer.

Blocks

Start by initialising the list of whatever items you want to display in your drop-down menu.

Then initialise the message you want the menu to display before the user selects anything.

Set the List Viewer to show this message as a 1-item list when the Screen opens.

For this List Viewer, when the user clicks an item, one of two things is happening:

1. They want to see the menu of items
2. They are looking at the menu of items and want to select an item

We use an if-else block to handle this choice. If the current List Viewer is displaying a 1-item list, it is either displaying the initial message or it is displaying something the user has selected. So if the current List Viewer is displaying a 1-item list, we make it display the full menu of items.

If the List Viewer is displaying a list that is longer than one item, it can only be displaying the full menu of items. So we set the List Viewer to display the selected item as a 1-item list.

Method 2: Button and List Viewer

This Method uses a Button and a List Viewer to create a drop-down menu. The Button can display the currently selected item in a different format (different background colour/font/boldness/italicization) than the rest of the menu. In the following blocks, you can use 'from List_Viewer set Visibility to [true|false]’ instead of ‘from List_Viewer set TextItems to [List2|empty list]’ for the same effect.

Layout

The Layout components needed for this are a Button and an empty List Viewer. As you can see in the screenshot, I set the initial Button text to the prompt of ‘Select items…’. You can set this in the blocks as shown above if you prefer.

Blocks

Again, initialise your list of items.

We’re going to allow the user to close the menu of items without selecting anything.

When the user clicks the Button (the currently selected item), they will be trying to do one of 2 things:

1. Display the menu of items
2. Exit the menu without selecting anything

If the current length of the list displayed by List Viewer is 0, we can guess that the user would like to see the menu of items.

If the current length of the list displayed by List Viewer is more than 0, it must be displaying the list of items. If the user clicks the Button, we will hide this list again.

These blocks are pretty simple. When the user selects an item from the List Viewer, we will set the item as the text of our Button and we will hide the List Viewer.

If you’re using this method and your list of items is very long, try putting your List Viewer inside a scrollable Column and toggling the visibility of the Column instead of changing the length of the List Viewer list.

And that’s it! Again, here is the link to the sample app.

[podosancol3dvv9u]

Hi, i follow your blocks and works perfectly, but i want to make a multiple list selection and i can’t find the solution, if i create 3 buttons with the same list, how i keep individuals selections?

[jared]

i think you are lookiing for a solution like this

[podosancol3dvv9u]

Thank you so much, it works perfectly, but i found the next challenge, and i hope not abuse, when i select several buttons, i would like that when i press a Save button, all the buttons labels keeps saves in a grid from airtable o any kind of grid. Do you know how to do it or where can i find that information? Again, thank you for your help

[ak_tech]

just save all buttons’ text in a stored variable as a list and next time make buttons and set their text items in list
Happy Thunking!!

[drted]

Look at the documentation for Any Component. You can loop through the button collection in the screen. You might also want to look into the Create and Clone component functions as well.

[gkibria296]

How to view list of data in thunkable x from firebase like added image?

[codeswept]

That doesn’t look like Firebase.

[sketch]

You are Using google sheets not firebase.
Like @codeswept says.
Use cloud variabeles to Read the firebase Json.
Read the variable docs for more info about that.
Also please create a new topic instead of asking it in a 2 year old topic.
Thanks!

[sahniabhi11wv11e]

@sketch

variable

How do i connect a GoogleSheet to source items to be shown in the list?

What i have tried:
I used the list of values in block with the datasource tab and selected the sheet and the column I would like to use. Although it runs when i click on select item once nothing happens and when I click it for the second time the button disappears.

[tatiang]

Hi and welcome to Thunkable.

If you post a screenshot of your blocks or a link to your project, someone may have a suggestion for how to fix it.

[sahniabhi11wv11e]

My bad, sharing the screenshot of my current implementation.

[tatiang]

Remove this block:

The list of values block is already a list. You don’t need to add a [gear] list block in front of it. That just makes it a list of a list which causes problems.

If your database’s Story Prompts column contained {frog, cow, horse, pig} then your blocks would initialize animalList to this:

{{frog, cow, horse, pig}, 2, 3}

What you want is just this:

{frog, cow, horse, pig}

That’s what the list of values block does by itself.

[sahniabhi11wv11e]

Thank you @tatiang, I tried using the list of values block to directly store the list in a variable but tat did not fix the problem. The app crashes every time i click on the button twice.

[tatiang]

Can you post a link to the project? I’m not sure why you’re setting the List Viewer’s text items to empty list so much but I may have a better idea if I can preview your project.

Also, is it crashing when you simply preview the project and click a list viewer item twice?

[sahniabhi11wv11e]

Link to my project: Thunkable

I am following method 2 listed above. This code works when I hardcode a list, which i have setup currently in the project. It breaks when I use a GoogleSpreasheet as a source.

The app crashes after I click the button twice. When i click the button once nothing happens

[tatiang]

@sahniabhi11wv11e

The app crashes after I click the button twice. When i click the button once nothing happens

Which button? Button_GenerateStory?

[sahniabhi11wv11e]

The app crashed when I click on either the ButtonAnimalList1 or the ButtonActivities twice.

[tatiang]

I don’t understand these blocks:

Why would you want to empty the text items?

Does it still crash if you use these blocks instead:

If that doesn’t fix it, you may need to share a link to the Google Spreadsheet so I can test it with your data.

[sahniabhi11wv11e]

Thank you tatiang, this fixed the crashing issue but I still dont see the rows from the spreadsheet in the drop down. I only changed the source of ListViewerAnimals to the spreadsheet but both the ListViewerAnimals and ListViewerActivites do not respond to a click.

My spreadsheet