How to add dropdown that supports multiple selection

Ayesha Hassan shared this problem 1 year ago
Solved

In my prototype, I want a dropdown that supports multiple selection.

When i click on an input box, a drop down opens. Every item of drop down has a checkbox next to it. You can select multiple options from the dropdow using checkboxes and when clicked outside the dropdown, those values are populated in the input box with commas between them.

For example, a contacts dropdown from where I can select multiple contacts using checkboxes next to each contact name.

Best Answer
photo

To create a dropdown with multiple selections:

1) Drag a Check List widget from the Widget library onto the Canvas.

2) Group the Check List widget in a Dynamic Panel by right-clicking on it, and clicking on 'Group in Dynamic Panel'.

3) Mark the Dynamic Panel as hidden by selecting it on the Canvas and looking to the Properties palette, and ticking the "Hide component" box.

4) Drag an Input Text Field right above the Dynamic Panel on the Canvas.

5) With the Input Text Field selected, create an "On Toggle" + "Show" event, and select the Dynamic Panel as the target to be shown.

Optional: To have the values from the 'ticked' Check List box display in text below:

1) First drag a Text widget onto the Canvas below the Dynamic Panel.

2) With the Check List selected, create an "On Change" + "Set Value" event. Select the Text widget as the target of the Set Value action.

3) For the value of the action, look to the bottom of the Events Dialog and click "Calculated". The Calculated Expression Builder will appear. Select the Check List and drag it to the open space at the top of the expression.

Comments (6)

photo
1

Dear Ayesha,

Can you attach an example/a snippet of your idea you have so we can see how this looks like and assist you more helpfully? (Files at the community must be attached as .rar extension) .

Best,

Sonia Durán

photo
1

66c9b62ae72b6aeca6c4c069e05b84adHi Sonia,


I am looking at the same scenario. need to add a drop-down list option > where the user can select via a check box one or multiple options. Once selected the options selected should be displayed in the drop down box, and if more then one is selected it should be seperated with a comma.


I hope the attached image makes sense

photo
1

Dear Jan,


The following example should help. Let me know how this works for you.


Best,

photo
1

Hi Sonia,


Thank you very much, my computer doesn't support .rar format file, can you perhaps send it in a zip file please

Thank you very much for the response.

photo
1

Hi Jan,


Yes. Here you are.


Best,


Sonia Durán

photo
1

To create a dropdown with multiple selections:

1) Drag a Check List widget from the Widget library onto the Canvas.

2) Group the Check List widget in a Dynamic Panel by right-clicking on it, and clicking on 'Group in Dynamic Panel'.

3) Mark the Dynamic Panel as hidden by selecting it on the Canvas and looking to the Properties palette, and ticking the "Hide component" box.

4) Drag an Input Text Field right above the Dynamic Panel on the Canvas.

5) With the Input Text Field selected, create an "On Toggle" + "Show" event, and select the Dynamic Panel as the target to be shown.

Optional: To have the values from the 'ticked' Check List box display in text below:

1) First drag a Text widget onto the Canvas below the Dynamic Panel.

2) With the Check List selected, create an "On Change" + "Set Value" event. Select the Text widget as the target of the Set Value action.

3) For the value of the action, look to the bottom of the Events Dialog and click "Calculated". The Calculated Expression Builder will appear. Select the Check List and drag it to the open space at the top of the expression.