© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

DYNAMICALLY SET DROPLIST OPTIONS

Reveal different options in a second droplist based on selection made in the first.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GET STARTED

(Note: While it isn't possible in Axure RP to dynamically set the options in a droplist widget, this behavior can be simulated by using droplist widgets and dynamic panels in tandem.)


In AxureTraining.rp, open the page "Dynamic Droplists" on the canvas for editing.


The form on this page is used to select a new job title for an employee. Different departments have different possible job titles. Based on the choice made in one droplist, different options are available in a second droplist.

STEP 2: CREATE DYNAMIC PANEL

Right-click the first "Job Title" droplist—the one with the option reading "Administrative Assistant"—and click "Convert to Dynamic Panel".


In the field at the top of the Inspector, name the dynamic panel "Job title".


In the Properties tab, click the checkbox "Fit to Content".


Double-click the dynamic panel to open the Dynamic Panel State Manager.


Click the green "+" icon twice to give the dynamic panel a total of three states.


Slow double-click to rename each state. Name one state each of the following: “Operations”, “Sales”, “Development”.


Finally, take the "Sales" and "Development" droplists and cut / paste them from the main page into their corresponding dynamic panel states at coordinates (0,0).

STEP 3: SET DYNAMIC PANEL STATE BASED ON FIRST DROPLIST SELECTION

Return to the "Dynamic Droplists" page. Single-click the "Department" droplist widget. In the Properties tab, double-click "OnSelectionChange" to add a new OnSelectionChange case.


In the left column, click the action "Set Panel State".


In the right column, click the "Job title" dynamic panel.


At the bottom of this column, find the "Select state" dropdown and click "Value".


Click the "fx" button next to the entry field.


In the "Local Variables" section, change the first dropdown to "selected option of".


In the section dropdown, pick "This Widget".


Above the top field of this dialog,  delete the number "1" that was automatically inserted. Click "Insert Variable or Function…".


Under the "Local Variables" section, click "LVAR1".


Click "OK" to close the "Edit Value" dialog, and then "OK" again to close the Case Editor.

STEP 4: PREVIEW

Click Preview.


Try clicking an option in the first droplist. See the different droplists in the various dynamic panel states appear based on your choice.

MORE RESOURCES

To start, the page contains a “Department” droplist with three options: "Operations", "Sales", and "Development". Each of these options corresponds to another, subordinate droplist. Each of the three sub-droplists has two options, which are job titles for that department.

DEPARTMENT

JOB TITLE

TRY IT!

CORE TRAINING

TUTORIALS