Axure Tutorial - Transfer - Repeater Advanced Tutorial


Shuttle box is a commonly used selector. It moves data in the left and right list boxes in a very intuitive way to realize multiple selection of data.

Features to be Realized

1. Select the items on the left and click the right arrow to move the items on the left to the right;
2. Select the items on the right and click the left arrow to move the items on the right to the left.

How to Realize these Features

1. It is realized by two repeaters. The repeater on the left has only one column, which is filled with the person's name by default. When you click the item on the left, select the item, and the repeater on the right adds a line with the same person's name. At the same time, add a filter to hide the items on the right. When you click the right arrow, remove all filters on the right and delete the selected item on the left.
2. Moving items on the right to the left is a similar principle, but the opposite.


Preview the completed prototype for this tutorial


Widgets Setup 

Widgets setup

1. Drag 2 rectangles, 2 triangles, and 2 labels into the canvas. And adjust the size and style.

Repeater settings

2. Drag 2 repeaters to the canvas and set the data. The repeater on the left is a column filled with names data, and the column name is Name. The data table of the repeater on the right also has only one column, and the column name is also Name.

Left repeater settings

3. Double click the repeater, select the rectangle, and name it List item left. Set selected style.

Interactions Setup

add right list data

1.When the rectangle is selected, the repeater on the right adds a row, and the added column data is the text of the current rectangle.

add Right column filter

2. Meanwhile,  a filter [[TargetiIem.Name ! = This. text]] is added to the column on the right repeater, which means that the data on the right column is not equal to the text of the current rectangle, and mark the current row.

3 When the rectangle is unselected, the repeater on the right delete a row, and the deleted column data is the text of the current rectangle.

4. Click the triangle on the right. Set interaction when Clicked: remove all filters and delete marked rows.

5. In the same way, set the interaction of the right rectangle and the left triangle.

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.

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.

This section doesn’t currently include any content. Add content to this section using the sidebar.