Drop-down Menu/Spinner Tutorial

spinner

#1

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

DDM_LV_B1

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.

DDM_LV_B2

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

DDM_LVB_B1

Again, initialise your list of items.

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

DDM_LVB_B2

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.

DDM_LVB_B3

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.