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 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 about 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
Dropdowns 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 can 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 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 on 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
2. 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)
2. Action Show/Hide: — here we are hiding the list of options
Hide
Target: dropdown_list
3. 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, 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 drop down 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 can 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 an 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 finish with the input on 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 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 from 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 is happening 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 exit without any change and to properly handle this in Axure we make use of Cases/Conditions.You can learn more about Conditional Logic on 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
2. 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
2. 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 article helped you to easily tackle dropdown menus and combo boxes.
You can also download the Axure file from here: https://hi.switchy.io/1j2y
