Axure Tutorial: Make Two Columns Selector with Repeater

Introduction

Region selector, date and time selector are controls we often use in interface design. They are actually a combination of widgets and data. The selectors made by the repeater allows us to quickly change data to meet different needs.

Features to be Realized

1. When the data of the first column in the selector is selected, the second column displays the data of the response.

2.When the confirm button is clicked, the interface displays the combined data of the first column and the second column.

How to Realize these Features

1. Make two columns of data through two repeaters and create them into dynamic panels that can be dragged. Select the response item by judging the position at the end of the dynamic panel drag. Add a filter to the item in the second column and filter according to the selected item in the first column.

2. When the confirm button is clicked, assign the combined data of the first column and the second column to the corresponding label.

Preview the completed prototype for this tutorial

Widgets Setup 

1. The repeater on the left has two columns. One column is continent and the other column is selected. If it is selected, it is 1, If it is unselected, it is 0. The first row is 1 by default.

2. The repeater is created as a dynamic panel and the dynamic panel is recreated as a dynamic face. The outer panel of the dynamic panel layer uncheck the Fit to Content.

Interactions Setup

When the repeater is loaded, the y value of the inner panel is saved to the global variable Default_Height. We will use it in the following calculation.

When the internal dynamic panel is dragged, the panel moves with the y value of the mouse. And set the top boundary and bottom boundary for the panel to make it move within a certain range. 

As shown in the above image, the calculation formula is the y value of the current panel, minus the default height, divided by the height of item, rounded, multiplied by the height of item, and finally added with the default height.

Then change the value of the Selected column of repeater to 0 and the value of the selected row to 1.

Drag and drop two labels into the canvas, named Selected Continents and Selected Country respectively.

When the left repeater item is loaded, If Item.Selected  is equal to 1, the current item widgets is selected; Filter the repeater on the right so that the Continent column on the right is equal to the Continent column on the left. Move the dynamic panel on the right to the default position.; assign the current item.Container to Selected Continent label. 

Similarly, when the repeater item on the right is loaded, set the same interaction and assign the current Item.Country to Selected Country label.

Make other controls and make the selector widgets into a dynamic panel. When the Confirm button is clicked, the current panel is hidden, and assign the Selected Continent + "|" + Selected Country to a label to complete the selection.

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.