How To … Create a Linkable Combo Box

The combo box is a common UI element used in many websites and software applications. This post explains how to quickly prototype a combo box that links to different pages depending on which entry is selected. Here is how it’s done in three simple steps…

 

Step 1: Create prototype pages

First, create the page that will contain the combo box as well as the pages that the combo box will link to. Here’s an example prototype of a web shop where the combo box is used to navigate to the pages “Products” and “Solutions”:

Screenflow of “Products & Solutions”

Screenflow showing a combo box serving as navigation element

If you want the combo box to be displayed on more than one page, consider placing it on a layer.

 

Step 2: Add entries to the combo box

Next, add the combo box stencil from the Stencil Palette and place it in the desired position. Double-click on the combo box to edit the entries, e.g. using the names of the target pages.

Adding the Combo Box to the prototype

Adding a combo box stencil to a prototype

 

Step 3: Define interactions

Finally, we need to add interactivity to the combo box. To do so, open its Context Menu and click on the Interactions tab. In the Interaction Dialog, choose “changes the selection” as the trigger in the first column and select the entry you want to link up under “Value”. In the second column select “show page” as the reaction and select the page you wish to display. Then hit “Save” and repeat for every entry of the combo box you wish to link.

Adding the "changes the selection" interaction to a prototype element using the interaction dialog

Linking up individual entries of a combo box using the “change selection” option of the interaction dialog

 

That’s it! You have successfully created a linkable Combo Box!

 

Do you need help with linkable combo boxes? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

Speak up! Let us know what you think.