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

make two column selector

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 

Left column selector

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

Repeater Loaded event

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.

Dragged and Drag-ended actions


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. 

Drag dropped actions

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.

Selected item fomula

The formula of the selected item is shown in the figure above. Change the selected value of this row of the repeater to 1.

make right column selector

Copy the column on the left and make the column on the right. Set global variables and interactions in the same way.|

Set default selected item of right column

Set the first item of the right column as selected.

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.

Confirm button interactions

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.


Leave a comment

Please note, comments must be approved before they are published

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