Creating AJAX-style auto complete functionality within Axure prototypes

I am currently building a prototype for a client which early on requires a demo to users of the system, and I really wanted to put the time into building a prototype that was as realistic as possible. With that in mind, I wanted to build an Ajax-style auto complete field that demonstrated the functionality and potential use of the field in the system.

The idea was to just build a simple text field for ‘first names’ with a dynamic panel that would refine the options based on the input – standard auto complete functionality.

So drop on a text field and a label, name them to distinguish what field is what, then put a dynamic panel underneath the text field, as shown in the screen shot.

Building the groundwork

zrclip_001p68bcb7be

Now the action we want to capture is the entering of data into the text field, and for this purpose, Axure provides the ‘OnKey’ action. Typically auto complete fields are shown after a few characters are entered, so I setup mine to display after two characters, then display a drop down of 5 results.

So in your dynamic panel, line up a table displaying 5 results that will sit just below the text field. As a useful extra, I bold the first two letters to give more context to what’s happening.

zrclip_003n5a06f5d2

Handy Note!

To help line it up underneath your text field, go back to the ‘page’ view when only have one state for your panel, and you will see the list in context and allow you to place it.

Now we need to add some more panels for each extra character typed. For my example I have five in total, each with a slightly refined ‘results’ list.

For every panel state, the list gets refined a little further, an extra letter gets bolded, and there should be an extra panel or two for ‘selecting’ an option.

image

Creating the logic & displaying the panel states

Once all the panel states are complete, the interactions are created on the page, using the ‘OnKeyUp’ event on the ‘First Name’ text field.

Add an ‘OnKeyUp’ interaction with two conditions:

Length of widget value – set this to ‘2’.

Text on widget – set this to the fist two characters of your results set.

image

and set the action for this to be the panel state created first, which shows the 5 results.

image

The panel for selecting an option should both highlight the option being selected and put the selected word in the text field.

image

The above screen shows the selected option highlighted, and the ‘OnClick’ action for the selected option uses the ‘Set text on widget’ action to set the text field to the selected option.

image

This needs to be repeated for the other panels, but changing the length and value conditions.

The overall interactions window should look something like the following.

image

The finished product!

The final rendered version should look like the following and work flawlessly!

image

This process can be repeated for other results sets / inputs to give more than one scenario, but generally no than two scenarios are required for a prototype.

If anyone wishes to get a copy of the .rp project or the .rplib for the master, I can put this up as well.

Happy prototyping!

Advertisements

Prototyping and spec generation with Axure RP

Axure RP and making life easier

As a business analyst in the web arena, a large part of my job is building and spec’ing interfaces for web applications. While this can be done with the standard office suite (Word and Visio), I always like to use gadgets and tools that can make my life easier. Axure is a prototyping, wireframing and specification application that can make designing web applications faster and also more enjoyable.

Axure RP provides a WYSIWYG, drag-and-drop interface by allowing the user to drop widgets onto the workspace and assign them proeprties. See the standard user interface below (with branding removed):

Interfaces can be built page by page, using these easy and familiar style. Concepts such as master pages can be used for reusable content such as headers, footers and navigation menus.

Building wireframes is only part of the functionality though, with the real weight coming in the form of field/widget properties and dynamic actions for prototypes.

Let’s start with field/widget properties and how they can greatly speed up specification generation.

Widget Properties and Spec Generation

A simple  scenario would involve the wireframes and specification developed independently in Visio and Word respectively. This leaves a lot of room for inaccuracies and inconsistencies across the two work products and requires greater effort in QA and governance to keep them aligned.

With Axure the two products are generated from the same source, within the same application and as a result will always match each other. Every element on the Axure canvas has a set of user-defined properties which are used to populate the specification when it is generated.



Each of the above properties can be defined by the user to meet the application needs (I have included a few staples above). Defining properties using select lists and number formats can increase the consistency of the generated specification. Below is a shot of the interface for defining widget properties.



Once you have your property list and have assigned values to all the elements, generating a specification complete with these properties is as easy as hitting ‘F6’. An example of a generated spec can be seen below.



The template that the specification is generated from can easily be edited to change values that are displayed in the spec, as well as heading and font styles.

Axure has a number of other useful features, which i haven’t covered in this article. Next I hope to cover dynamic panels and interaction’s for prototyping and source control using subversion and my backup process.