Breadcrumbs User Control – Part 1

Over the past few months, I’ve been working on a pretty high-end VSTO application. There had been some really ground breaking concepts thrown into that project which unfortunately, cannot be posted here for obvious reasons. What I can do is discuss a little widget I’m hoping to build that would eventually find it’s way into that project.

Background

The application contains an Advanced Search feature where the user can build reusable search template (called a Saved Search) as well as a reusable results templates. A “Saved Search” is basically a collection of search criteria linked to a results template. The results template decides which fields from are displayed from the “results set”.

We have 2 wizard UIs for configuring Saved Searches and Result Templates. The first page for each of the  wizards are almost identical in the fact that they asked the user to

  1. Pick an Entity class and then,
  2. Type in the name for a new saved search/result template to create or pick from a list of existing templates.

Since both the UI requirements were similar (and much similar UIs were required on few other places), this was implemented as a User Control that looked like:

All the text labels on the control were configurable and each time the selection changed in the Entity class drop down, it would fire an even asking for an array of existing items. On the wizard page this control was placed, the event was handled and the array filled with either the list of Results templates or saved searches for that particular Entity class.

Limitations of the Existing UI

The above interface was good enough initially. But it became quite cumbersome as the number of Entity classes grew (and it could potentially grow up to hundreds) and as more and more templates/searches were being saved. The user  was forced to go through all the Entity classes one by one if he wished to see all the saved items. I later added a Recent Items list but, the problem still required a better solution.

Adopting Vista Breadcrumbs Concept

One of the coolest new features in Vista is the breadcrumbs bar in Windows Explorer. The ease of which this allows you to navigate through folders is simply amazing.

And that got me thinking; can I adopt this to improve the user experience in the above case?  Here are my initial designs:

You would notice the peculiar menu items at the bottom indicating a character range (e.g. A-N). Well, I hope to make this work like Outook’s Address book buttons; probably using the code found here.

In the coming weeks, I hope to get some code out based on this concept UI. Obviously, there’s a lot of work required for a clean implementation. I can in the meantime get a quick and dirty , proof of concept control done using a auto scrolling Flow Panel and an array of Toolbar Strips. Well, stay tuned…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.