Axure Case: Multi-Selection Dropdown - Repeater Advanced Tutorial

1. Multiple options can be selected when clicking the options in the dropdown list.

2. When clicking the close button next to the option, hide the option and uncheck the list.

3. Click dropdown box to collapse / expand the list panel and change the arrow direction.

How to Realize these Features

1. Create two repeaters, one representing the dropdown list and one representing the selected options. When an option in the dropdown list is selected, a new row is added to represent the selected option.

2. When the close button of the option is clicked, the row of the option is deleted and the corresponding row in the dropdown list is unselected.

3. When the input box is clicked, toggle the show / hide drop-down list, and toggle the state of the arrow dynamic panel.

Preview the completed prototype for this tutorial

Widgets Setup 

1. Drag a label and a rectangle into the canvas. The label is named please select.

2. Drag an arrow icon into the canvas and create a dynamic panel. The arrows of the dynamic panel have two states, one downward and one upward.

3.Drag two repeaters into the canvas, one as the selected items and the other as the dropdown list.

Set Selected Options

1. Set the right padding of the rectangle to 24.

2. Set Fit to Text Width.

3. Delete all table rows.

4. Drag a delete icon to the top of rectangle and set it when loaded, move it to the right of rectangle -17.

Set Dropdown List

1. Double click the repeater of the dropdown, select the rectangle and name it name.

2. Sets its MouseOver and Selected style. Add a column in the data table called Selected. And set it to - 1 (as unselected list).

3. When each item is loaded, if the item If item.selected is - 1, the list item will be unselected. If it is 1, the list item will be selected.

4.Double click to enter the repeater and select the rectangle. Set the action of clicking / tap.  Switch item The value of Item.Selected to -1/1.  That is [[item. Selected * - 1]].

5. If the current list item is selected, add a row to the repeater of the selected items.

6. If the current list item is not selected, delete the row with the same name in the repeater of the selected item.

Sets The Arrow States and The Show / Hide of The Dropdown List

Group the rectangular background, arrow, and selected items, set the display / hiding of the dropdown list, and set the arrow dynamic panel to the next state.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

---

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.