Create a text input from a dropdown list

Hi, I have a very small List View (**FRListView)**containing 3 items: the first a blank item (no text); the second has the text value “FRAME”; and the 3rd has the text value “REG”.

I wish to use this List Viewer as a dropdown menu. But I also want the List Viewer box to be the same size as the other text boxes.

This List Viewer is to be situated situated amongst six Text Input Boxes and replace the current Text Input named “AddText_InputFR” (shown as Frame or Reg in the image below).

The results I have found in the Community only seem to cover selecting an item from the dropdown to create a message elsewhere on the screen.

I have tried copying the blocks from the results and applying them to my needs but I can’t get them to work.

What I am trying to do is this:

As mentioned above, the dropdown menu will only contain 3 values: a blank cell;space; “FRAME” and “REG

When screen opens, the user will be presented with a blank input box which will contain the dropdown menu. Which will be presented to the user as closed. When the blank input box is clicked, the dropdown menu will appear. The user will click on one of the text values and the dropdown menu will disappear leaving only the selected item showing in the input box. This text must be able to be entered like regular text into the Source Google Sheet just like the values in the other text input boxes showing

I wish to use the this box to replace the regular text input box currently present. (As shown above).

Any help to resolve this would be greatly appreciated.

I hope I have explained this correctly.

Andos.

That’s pretty much what I’ve done here:

You’d just need to modify it to appear closed when the screen starts. I would probably hide the list viewer and show a button that looks like it is closed. Then when the button is clicked, show the list viewer and hide the button. Unfortunately, that means the user would have to click twice (once on the button and then once on the list viewer) to see the choices. It’s a shame that Thunkable doesn’t have better mouse up/mouse released/mouse down detection events.

There are lots of other examples on the forums:

Hi @tatiang, I had already looked at that post but couldn’'t quite grasp it. I also tried another post link within that post and got completely muddled up. See my blocks below:

Also the size of the dropdown menu was way too big for my requirements.

When I tried your blocks, the dropdown menu stayed open. How would I close display it as closed?

I am going to try your blocks again. Then I will ask you how complete the rest of the process.

Many thanks,

Andos.

Hi @tatiang, I have setout the blocks as per you link and I made a button (FRBtn)which looks like a text input field.

My blocks:

My button:

When I click the button the dropdown (FRListView) appears (how would I make the dropdown look tidier?) See Below:

When I click an item on the dropdown menu nothing happens. No selection is made. Nor, does the dropdown list disappear after a selection.

Andos.

List Viewers are not that aesthetically pleasing. What they are is simple and quick to use. If you want something that looks better, I would go with a Data Viewer List (DVL) or – if you’re using the older Snap to Place (StP) interface instead of the Drag and Drop (DnD) interface, you can use clone blocks to create your own drop-down list. Then you have much more flexibility in terms of how it works and how it looks. But it will be more work!

Hi @tatiang, I have got round the size issue by changing the size of the ListViewer and removing the “blank” option from the menu. See below:

What am I doing wrong. When I select an item from the dropdown list it won’t select.

Andos.

1 Like

Can you share your project link with me and specify which screen this is on?

Hi @tatiang, here my link:

https://x.thunkable.com/copy/ec39b0d87b0ee59e4c637726e1c6a4fc

I am currently working on the “MANFVAddNew” screen.

Andos.

This is what I do in the drop-down demo I posted a link to above:

So when the user clicks an item from the list of choices, the list viewer’s text items get set to that single item. And then when the single item is clicked, the list viewer’s text items get set back to the full list of choices.

By default, a list viewer doesn’t “do” anything when you click on an item except store the text of the item in the green item block and the row number of the item in the green index block. It doesn’t close or change the appearance of the component. That’s why I had to figure out another way to do it.

Hi @tatiang,

I, initially, found the above paragraph very confusing. I understand it now.

I was thinking of this workaround…

Based on the first click to select the item from the list, is there a way that the first click could write the “text” from the selected item to an input text field and then close itself?

I asked because the field I was thinking of writing the text to is the “AddRecText_InputFR” Text_Input field located in the "AddRecBtnSave/ Click block. (Image below).

By creating a "when Frame is selected from the dropdown menu, enter the text “Frame” into the “AddRecText_InputFR” Text_Input field function maybe? and obviously the same for when the “Reg” item is selected.

What do you think?

I can’t help feeling that this is possible but again, I am not sure how to make this work.

Andos.

Sure but just to be clear: list viewers can’t “close.” They can be hidden by setting their visible property to false. In the Item Click block, assign the green item block to a text input’s text value. Then change the list viewer’s visible property to false.

check this demo

https://x.thunkable.com/projectPage/5fce83a95373b000115a9279

1 Like

Thanks @tatiang & @muneer, I tried both suggestions and @muneer’s suggestion worked perfectly.

Here are my resulting blocks:

I used @tatiang’s suggestion of using the “set FRListView’ s Visible to” blocks to achieve the desired visibilty effects and then tweaked the label and column sizes to achieve the perfect aesthetic appearance.

See below:

Screen loaded

Label clicked

(The actual dropdown perfectly displays the two options on my mobile device)

Item in dropdown clicked

Well done guys! Once again, you have come up trumps

Best regards,

Andos.

1 Like

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