How to combine a checkbox list and a drop down list?

Hi, All :slight_smile:

I’m working on my first app, and I’ve managed to make some progress, but one thing I am stuck on is how to make a checkbox list appear in a drop-down list. I will attach example screens.

The 1st - Checkbox Screen_A: will show the list all of the time, which I do not want. I do not need a checkbox by the “select …” prompt, and also do not require a ‘select all’ or ‘clear all’ function.

The 2nd - HideOptionsList_B: hides the list behind a label like I want, but I don’t know how to give it the checkbox feature.

Once multiple items are selected, I want to be able to close the list, ideally back to the “select …” prompt.

I’ve tried multiple tutorials, but they seem to all be one or the other list, or leave the list visible at all times. I’ve tried combining the two screens into one, but can’t get it right.

Can anyone offer advice?
Sample screens project: Thunkable

1 Like

Welcome to Thunkable

Try this demo
https://x.thunkable.com/projectPage/603fe31c6b9fa20011d0afcd

1 Like

Thank you for the reply :slight_smile:

That is one of the tutorials that I looked at to help with the checkbox feature, but the list is always on screen.

Did my link to the project work? It does on my end, but not sure if you can access it.

1 Like

You need to change this in your second screen

image

1 Like

Here’s another demo:

https://x.thunkable.com/copy/29b54d6e5e8a4071d3727b3166dba763

I created that as part of an answer to this topic:

1 Like

here’s my take on it:
https://x.thunkable.com/copy/99b2477b37223bf50eda2f11b4d76165

it requiires two things

  1. a submit button has to show up to indicate DONE selecting - it disappears after it’s pressed
  2. a variable has been designated as the destination of the response (in this example, responseList) after you press submit

for the demo, i also displayed the responseList string in text_input1 so you can cut-n-paste it to see the returned responseList

2 Likes

D’oh. I missed that correction. Thanks for catching it, @muneer

1 Like

Thank you @tatiang
That is close to what I’m trying to do, but I am not wanting to change the first line to a selection. Open list, select items, close list, and selected items would show up on another screen.

Thanks again for the help :slight_smile:

oooh, this looks like it will work! I will try it out and update here after :slight_smile:
Thanks @manyone

Thank you @manyone - this worked for me :slight_smile:

I need to tweak it a little if possible, so I’ve played around a bit but no luck yet.
Right now, it shows the # of the option along with the option ex: 2:Option 2. I’d like to get rid of the number and : ( 2: ) , and just show the option. Is this possible?

Must the response list only show on the same screen, or can it be sent to another screen? I’m searching all of the tutorials to see if it’s already there, or if I can piece it together.
I’m trying to build an article entry screen, and when completed it will show as a completed screen, and also in a library.

For example: New Entry page: Enter info related to Article, choose options, complete screen. It returns to an empty entry for the next new entry. Go to Library Screen where I will see all entered Articles. Click on an Article and it takes me to its Individual Page, showing all the info I entered and any notes.

i included the option # and the option name because even in a simple listviewer you get 2 options of item or index ,when one selection is made.
anyway if you don’t want the index to show, change the bottom part of this block

to this:

the response list is showing on that screen for verification purposes only - whiile i was developing this. currently the value is saved in a variable called responseList. it could have been any name. but as long as you know its name, you can display it in another screen.

1 Like

Thank you for your advice, @manyone. I had been stuck on this component for a while, and I appreciate the time you took to help me.

I’m glad i could help.