How to create dropdown menus and combo boxes in Axure RP

First, let’s clarify what exactly is a dropdown menu, and what is a combo box, aren’t they the same? Well … no, not really, let me explain.

Technically speaking, a dropdown menu is different from a combo box. A combo box is a combination of a dropdown menu and text input (confined to a set list of values).

In other words, a combo box is more difficult to prototype because of the dual nature of the control and in this article, we will see how we can tackle this problem by starting with a simple dropdown menu.

So, this article has 2 parts, on the first part you will learn how to prototype a simple dropdown menu and in the second part, we will expand this control into a combo box.

Prerequisites

To follow along, you’ll need to be a little familiar with Axure and have some understanding of widgets, interactions, local variables and expressions.

Also, if you haven’t done it yet, you can download Axure the latest version from Axure Website.

PART 1 — Dropdown menu

Dropdown menus are easy to prototype in Axure, using simple Shape widgets and a Repeater widget for the list of options. To make this control self-contained (without dependencies) we will not use global variables, this will help us to easily reuse the dropdown menu in other projects.

What we will create

In this part, we will create a simple dropdown menu (a well-known input control pattern) used in mobile or desktop UI. There are multiple variations of this type of control (like pull-down buttons, pop-up menus, droplist and so on), but the principles shown here can be applied to any variation. This type of control allows the user to select an option from a predefined list of options. Usually, the selected option is then displayed inside the dropdown. If you want to learn more about this control type, you can take a look at the Apple HIG pull-down button (a.k.a. pop-up menu) here.

Step-by-step instructions

The level of difficulty is easy to medium. Everything was broken into 2 steps, so you could follow along more easily.

• Building the necessary shapes
• Adding interactivity

Step 1 — Building the necessary shapes

In this step, we are going to create all the necessary shapes for our dropdown menu control. To see an overview of the shapes and structure, take a look at the image below.

Basically, we have only one group called “dropdown” and inside we have 2 main groups:

• "dropdown_selection" group — In this group, we have all the necessary elements to form the dropdown selection part
• "dropdown_list" group — this group defines the list of options

If you don’t have too much experience with Axure shape widgets then you can read more about them here.

Here are more details about each group's shapes and properties (these properties can be changed to fit your needs).

The "dropdown_selection" group contains:

selected_value:

• Width/Height: 258/26
• Fill: #FFFFFF

dropdown_label:

• Text fill: #1A1816, opacity: 60%
• Font size: 12

dropdown_bg:

• Width/Height: 38/38
• Fill: #FFFFFF
• Corner: 4
• Shadow: fill: #1A1816, opacity: 20%, x: 0, y: 1, blur: 2

The "dropdown_selection" group contains:

dropdown_values_list | option_value:

• Text fill: #1A1816
• Font size: 16

dropdown_list_bg:

• Width/Height: 38/38
• Fill: #FFFFFF
• Corner: 4
• Shadow: fill: #1A1816, opacity: 20%, x: 0, y: 1, blur: 2

An important thing to mention here is how the dropdown_values_list Repeater is set up, on the data section we have only one column Value and the values are: 1,2,3

You can learn more about String functions from here.

Step 2 — Adding interactivity

The dropdown menu has 2 interactions added to different groups/elements to make everything work. Here are the details:

The first interaction is added to the dropdown_selection group on the Click or Tap event to Show/Hide the list of values but also to Rotate the dropdown arrow accordingly.

• Action Show/Hide:
  • Toggle
  • Target: dropdown_list
  • Animate Show: slide down, 250ms, ease in out cubic
  • Animate Hide: slide up, 250 ms, ease in out cubic
• Action Rotate:
  • Target: arrow_icon
  • Rotate: clockwise, by: 180
  • Animate: ease in out cubic, 250ms

Another interaction is added to the dropdown_values_list Repeater on the Item Loaded event to set up the way the option is rendered

• Action Set Text:
  • Target: option_value
  • Set to: text
  • Value: [[Item.Value]] lbs (this is an expression where Item.Value is the value from the Value column)

The last interaction is on the option_value item from the Repeater on the Click or Tap event to respond to the changing of the selection(option)

• Action Set Text:
  • Target: selected_value
  • Set to: text
  • Value: [[Item.Value]] lbs (this is an expression where Item.Value is the value from the Value column)
• Action Show/Hide: — here we are hiding the list of options
  • Hide
  • Target: dropdown_list
• Action Rotate: — we rotate back the arrow
  • Target: arrow_icon
  • Rotate: clockwise, by: 180
  • Animate: ease in out cubic, 250ms

If you are not really familiar with events, actions, and cases, you can read more about them on the Axure website.

This is it! We now have a simple and functional dropdown menu, so let’s move on to combo boxes.

PART 2 — Combo box

Combo boxes are a little more complex to prototype. I’m not going to repeat the same steps from the dropdown menu, but we are going to concentrate on the differences.

One thing to mention before moving on is that in our case, we will use a global variable to temporarily store a selection value. We can avoid doing this by creating a hidden Label widget to hold this temporary value (this option can be explored by you if you want).

What we will create

In this second part, we will create a simple combo box. There are multiple variations of this type of control, but the principles shown here can be applied to any variation. If you want to learn more about this control type, you can take a look at the Apple HIG for combo boxes here.

Step-by-step instructions

The level of difficulty is easy to medium. Everything was broken into 2 steps, so you could follow along more easily.

• Building the necessary shapes
• Adding interactivity

Step 1 — Building the necessary shapes

The structure for this combo box is similar to the dropdown, so we will concentrate on what is different.

First off, I’ve replaced the “selected_value” Label with a Text Field named “input_value”. We will use this input field to allow the user to input any number (eg: 1,2,3,4,5 and so on). Once the user has finished with the input on the Lost Focus event, we will reformat the render to be displayed as “X lbs”, where the X is the number input.

I’ve also added 2 more shapes:

• dropdown_hotspot — is now used to trigger the list of values (instead of the dropdown_selection group)
• separator_vertical — used to visually separate the input part from the dropdown button

Step 2 — Adding interactivity

The first interaction is added to the dropdown_hotspot (which is the same as the dropdown menu dropdown_selection group) on the Click or Tap event to Show/Hide the list of values but also to Rotate the dropdown arrow accordingly.

Most of the interactivity happens on the input_value Text Field we will respond to the Got Focus/Lost Focus events and, optionally, to the Loaded event.

Let’s see what is happening, we have some actions on the Got Focus/Lost Focus events to handle the user input, so while the input_value Got Focus we will clear the existing value (this is the reason why we need the input_value_var to simply hold the current value) and wait for user input, now the tricky part is on the Lost Focus event, here we need to check if the user has typed a new value, or he simply exits without any change and to properly handle this in Axure we make use of Cases/Conditions. You can learn more about Conditional Logic on the Axure website.

Below are the action details for each event (FYI: the current widget is input_value).

• Event: Loaded — this is optional and is used to initialize with the global variable value
  • Action Set Text: — here we are clearing the text from the input_value widget
    • Target: This
    • Set To: value of variable
    • Value: input_value_var
• Event: Got Focus
  • Action Set Variable Value: — we are storing the current value to the global variable
    • Target: input_value_var
    • Set to: text on widget
    • Widget: This
  • Action Set Text: — here we are clearing the text from the input_value widget
    • Target: This
    • Set To: text
    • Value: ""
• Event: Lost Focus
  • Case: NoChange | Condition: If text on This equals ""
    • Action Set Text: — here we are clearing the text from the input_value widget
      • Target: This
      • Set To: value of variable
      • Value: input_value_var
  • Case: NewText | Condition: Else If text on This not equals ""
    • Action Set Text: — here we are clearing the text from the input_value widget
      • Target: This
      • Set To: value of variable
      • Value: [[This.text.trim()]] lbs
    • Action Set Variable Value:
      • Target: input_value_var
      • Set to: text on widget
      • Widget: This

The last interaction is on the option_value item from the Repeater on the Click or Tap event to respond to the changing of the selection(option) which is the same as on the dropdown menu.

Yee! That’s it!

Creating a dropdown menu is easy in Axure but the combo box can be a little challenging. I hope this tutorial helps you to easily tackle dropdown menus and combo boxes.

Written by: Lucian Dinu

Latest tutorials

Links

UX Related - Website

UX Podcasts - Mobile App

© 2020 - 2023 InteractiveCTRL