How to add dropdown that supports multiple selection
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.
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.
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.
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
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
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
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
Dear Jan,
The following example should help. Let me know how this works for you.
Best,
Dear Jan,
The following example should help. Let me know how this works for you.
Best,
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.
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.
Hi Jan,
Yes. Here you are.
Best,
Sonia Durán
Hi Jan,
Yes. Here you are.
Best,
Sonia Durán
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.
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.
Replies have been locked on this page!