Axure Tutorial: Multi-Selection Dropdown - Repeater Advanced Tutorial

Introduction

We often need to select multiple people and tags in the selection of people and tags. Multi selection dropdown is a control to meet this requirement. In this tutorial, we will learn how to make it.

Features to be Realized

Dropdown List

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 

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

Selected Item repeater settings


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.

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.


2 comments


  • Well Joe

    Hi, Ed
    Thanks for your good question.
    You can set the Repeater style to Wrap(Grid), So they can be stacked together. Of course, you need to set the interaction of the repeater so that it can change the box height with the number of items you add. For example, if you set five for each row, if you added more than five, the height of the box should becomes twice the height
    Well Joe


  • Ed

    Hey,
    Forst of all nicely done! 👍
    Question?
    Right now when I have a big list and as I add more than just 3 items, it all goes accross the page.
    How do I limit so the items stay under the box where the dropdown is and stack over eachother?

    Appreciate the help
    Many thanks
    Ed


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.