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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

CUSTOM DROPLIST

Create a custom droplist using shape widgets. Use animated Show/Hide actions to create the droplist interaction, and use the Set Text action to display the user's selection.

STEP 1: HIDE THE DROPLIST OPTIONS

In the training document, open the page named "Custom Droplist". On the canvas is a group named "Custom Droplist" that contains two other groups: the "Select Button" group will serve as the droplist's button, and the "Options" group will serve as the droplist's body.


Select the "Options" group by clicking it twice on the canvas: one click to select the "Custom Droplist" group and a second to select the "Options" group itself. (Alternatively, you can select the "Options" group directly in the Outline pane.) Then, hide it by checking the "Hidden" checkbox in either the Style Toolbar or the Style tab of the Inspector.

STEP 4: PASTE ONCLICK CASE ONTO OTHER OPTIONS

STEP 5: PREVIEW

Preview the page in your web browser and click the select button to show the custom droplist's options. Then, click one of the options to hide the options again and set the text on the select button to the text on the clicked option.

MORE RESOURCES

 

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

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 2: TOGGLE VISIBILITY OF DROPLIST OPTIONS

Select the "Select Button" group and double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the action "Toggle Visibility" under "Show/Hide". Under "Configure actions", check the "Options" group.


At the bottom of the right column, select "slide down" in the "Animate Show" dropdown. Notice that "slide up" is automatically selected in the "Animate Hide" dropdown.


Click "OK" to close the Case Editor.

 

 

STEP 3: SET TEXT ON SELECT BUTTON AND HIDE OPTIONS WHEN AN OPTION IS CLICKED

In the Outline pane, select the "Option 1" rectangle widget. (This will temporarily show the hidden "Options" group on the canvas.) Then, double-click "OnClick" in the Properties tab of the Inspector to set up a new OnClick case.


In the Case Editor, choose the "Set Text" action. Under "Configure actions", check the rectangle widget in the "Select Button" group.


At the bottom of the right column, select "text on widget" in the left dropdown. Leave "This" selected in the right dropdown. This will set the text on the "Select Button" group's rectangle to the text on the "Option 1" rectangle.


Back in the left column, choose the "Hide" action under "Show/Hide". Under "Configure actions", check the "Options" group.


At the bottom of the right column, select "slide up" in the "Animate" dropdown.


Click "OK" to close the Case Editor.

 

Because the Set Text action in Step 3 references "This", which refers to the widget whose event is firing, we can use the exact same OnClick case for the other three "Option" rectangles as well. Rather than setting up the case again for each of them, though, we can copy and paste it.


With the "Option 1" rectangle widget still selected, right-click "Case 1" in the Properties tab of the Inspector and select "Copy" in the context menu. Then, right-click one of the other "Option" rectangle widgets and select "Paste". This will paste the copied case under that widget's OnClick event.


Paste this case onto the other two "Option" rectangle widgets as well so that all four have the same OnClick case.

SELECT ONE

TRY IT!