Axure Promotion · Axure RP · Axure Tutorial · Intermediate · Learn axure · Menu · Repeater · Jan 07, 2022

Axure Tutorial: Cascade Dropdown - Repeater Intermediate Tutorial

by WELLJOE

Introduction

Cascade dropdown menu is a control we often use. Using repeater can better realize the data binding feature of cascade dropdown menu.

Pre-Requisite

1. Master the usage of repeater.
2. Master the usage of dynamic panel.

Features to be Realized

1. When clicking the dropdown list input box, the dropdown list are shown.When selecting the first level option, the second level option is shown. When selecting the second level option, the third level option is shown. When clicking the third level option, the input box is hidden.

2. When clicking an option, the input box of the dropdown list add the selected option to its text.

How to Realize these Features

1. The first level menu, second level menu and third level menu are made through three repeaters. When clicking the option of the first level menu, select the current option, and add a filter to the second level menu to make the second level menu show only the second level menu under the selected menu; When clicking the option of the second level menu, select the current option, and add a filter to the third level menu to make the third level menu show only the third level menu under the selected menu. Hide the dropdown list when clicking the third level menu.

2. When clicking the option of each level dropdown list, the dropdown list input box add the option of the corresponding level to its box.

Preview the completed prototype for this tutorial

Widgets Setup

1. First drag a label into the canvas. Then drag and drop a text field as a dropdown menu box.

2. Then drag and drop three repeaters into the canvas, named L1, L2 and L3 respectively, and use them as cascading menus of three levels.

Data Binding

Bind the data in the repeater data table to three menus. The data can also be imported from a CSV file. Note that L1 needs to bind Province data, L2 needs to bind City data, and L3 needs to bind District data.

Interactions Setup

Set L1 interaction

1. Select the repeater of [L1], double-click the Rectangle of [L1], and add the interactive action of switching the selection when clicked.

2. Set the action when selected: show L2, add a filter, and assign the text of L1 to the text label.

3. Set the action when unselected: hide L2, and assign empty to the text label.

Set L2 interaction

5. Select the repeater of [L2], double-click the Rectangle of [L2], and add the interactive action of switching the selection when clicked.

6. Set the action when selected: show L3, add a filter, and assign the text of L1+ L2 to the text label.

7. Set the action when unselected: hide L3, and assign L1 to the text label.

8. Select the repeater of [L3], double-click the Rectangle of [L3], and add the interactive action of clicked. Assign the text of L1+ L2 + L3 to the text label. Hide L1 + L2 + L3.

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.