Adding combo-box style dropdowns to your web page

Announcing the Improved Dropdown jQuery plugin!

I’m happy to announce that I’ve released a new jQuery plugin today that will enable web page authors to create a richer user experience than is offered by the standard implementation of the SELECT element in poplar browser platforms. The plugin will supercharge the dropdown controls into combo-box style controls that allow filtering the selection list based on keyboard input.

The following two screen shots tell the story of this plugin better than a 100 words ever could.

An Improved Dropdown demonstrating groups and disabling items

Headings and disabled items are fully supported.

Filtering down to the potential matches based on keyboard input.

This list is filtered to only matching items as the user types.

Another auto-complete plugin? Why?

Okay. I am fully aware that there exist a number of freely available jQuery plugins with similar functionality. However, none of them seemed to fit exactly what I needed on one of my development projects so I built ImprovedDropDown originally for my own use, and later decided it was worth sharing with the developer community.

Key differences between ImprovedDropdown and the typical auto-complete plugin:

  1. It allows free-text entry to filter the list, but forces the user to pick an item that is in the list.
  2. When filtering/suggesting items it uses open-ended contains logic, not begins-with logic.
  3. It pulls the suggestion list from plain-old client side HTML rather than requiring an AJAX call for suggestions.
  4. It supports non-selectable group headers in the list similar to an OPTGROUP tag in a SELECT control.

Item #3 at first glance may look like a step back since AJAX is a cool way to serve up suggestions for a long list of choices. However, I was looking for a super simple way to add functionality to a dropdown without adding the additional complexity of  extra server-side code.

For small to medium sized lists it seemed overkill to implement AJAX handlers on the server all the time. As a bonus, this control will work just fine for static web-sites where the hosting provider doesn’t make available a server-side scripting capabilities.

Do I have to pay for it?

Nope. I’m releasing this project as open-source freeware as a thank you to all the other developers that have contributed greatly to many of my development projects by  contributing their own code to the community. I’ve licensed it under the Apache 2.0 License, which is fairly liberal in terms of what you can do with the code either in commercial or non-commercial software.

Although it isn’t mandated by the license, the one thing I ask in return for using the software is to let me know that you are using it. A shout-out on twitter (@JohnFx), an e-mail, blog post, or comment somewhere on this blog will suffice.  You don’t have to tell me any specifics of your project, unless you just want to brag on it. Primarily, I am just using this request as a way to gauge how much use it is actually getting in the wild.

Is it complicated to use?

If you are new to jQuery, there is a small learning curve there, but even if you don’t know jQuery you can pretty much just copy the included examples to get up and running.

Step 1: Copy the files to your site (jQuery + the 3 ImprovedDropdown files)

Step 2: Add a few references to the HEAD section of the page where you want the control.

Step 3: In the $(document).ready event, call the improveDropdown method to upgrade one or more controls on that page.

Example code (steps 2-3) to upgrade all SELECT elements on the  page to Improved Dropdowns:


<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/improvedDropDown.js"></script>
<link rel="StyleSheet" href="css/improvedDropdown.css" type="text/css" />

    <script type="text/javascript">
       $(document).ready(function () {
            $("select").improveDropDown();
       });
    </script>

</head>

Sounds Great. Where can I get it?

You can download all the files you need to get started from the Improved Dropdown project page at BitBucket (Go Mercurial!) in case you’d like to contribute, follow the project, or just laugh at all the bug-fix changesets that it took to get to the 1.x version.

What do you think?

I put considerable thought into making  the integration of this functionality into existing web pages super quick and easy. I hope that you will find it easy to work with and your users will like the functionality it offers. If you have any comments, complaints, or suggestions for improvement I would love to hear them. Just post a comment somewhere on the blog or drop me an e-mail (see “About” tab for my address).

FogBugz News Network (FNN) Plugin Version 1.2.1 Released

This update has been in the works for a lot longer than I would have liked, buried under a bunch of higher priority projects. However, I finally found enough spare time to clear the backlog of feature requests and publish a really significant update to my popular FNN plug-in for FogBugz, a project management tool for software development. Thanks to everyone who submitted bug or feature reports.

Where can I get it?

If you are hosting your own install of FogBugz, you can download the new version immediately from the FNN page on the FogBugz PlugIn Gallery.

For those of you using FogBugz On Demand, it will be a bit longer before you can get your hands on it. It has to go through an extended Fog Creek plug-in approval process and be scheduled for inclusion the next available maintenance cycle. If all goes well, it should make it up to the FBOD site in the next month or so.  I’ll update the status in this blog post as things progress.

What’s New?

Despite the minor tick on the version number (1.1.6 -> 1.2.1), there is really quite a bit in the new version, so I encourage you to check it out if you are a FogBugz user.

New Feature: Activity Report

One of the most requested features for the next update of FNN was to enable the specification of a custom date range on the Recent Events Report in addition to the current functionality of showing the last X events that met the other filter critera. I considered adding a toggle, but it just looked too cluttered in all my prototypes, so I decided to split this off as a separate report, the Activity Report, which is now also available from the Extras menu in FogBugz.

FNN Activity Report

New Feature:  Subscriptions Report (and Management Tool)

This screen is also new to FNN, and is used to get an overview of who is subscribing to various items (Cases, Wiki Articles, Discussion Topics). Like the other reporting screens it can also be filtered by person and/or project. You can also remove a subscription from this screen for items where you are the subscriber or you are a site admin.

New Feature:  Auto-Updating Recent Events Report

The popular Recent Events Report has a new feature that was requested by someone on the Fog Creek team at the StackOverflow Dev Days event in Austin last year. By checking the new “Auto-Update” checkbox on the report, it will give you a live feed of the what is going on in your FogBugz database. New updates will be inserted at the top of the report roughly every 5 seconds so you are always looking at the most recent X items, without having to continually refresh. Perfect for the micro-manager in all of us, right?

FNN Recent Events Report

I also made some other minor tweaks to this screen, including:

Feature-ette: You can now display up to the last 1,000 most recent items instead of the paltry 100 allowed by the old version.
Tweak: The description column was empty more often than I liked, so I made it fall back on another location to fill this column if the primary source was blank.
Fix: There were a few scenarios when cases would not be displayed on this screen, when indeed they should have.

What does it cost?

Nada. It’s still freeware. I haven’t attached any licensing terms to it yet, but am okay with you doing whatever you want with it so long as you don’t steal my work and claim it as your own. I developed this and the other plugins mentioned on this site principally for my own use as a FogBugz user, but didn’t want to Bogart these useful utilities all to myself.

Also, since some have asked. It’s not open source at this time. I’m considering it, but want to sheppard it along a little longer on my own before I let other cooks in the kitchen.

Feedback is Appreciated

If you have any complaints, comments, ideas, etc., please either drop me a line using the e-mail link next to the plug-in on the FogBugz PlugIns Admin Page, or just throw a comment up on this post. I also follow the FogBugz StackExchange site semi-regularly, so you can also post ideas/comments there if you want to give other users a chance to vote on them or add to them. Now that the backlog is almost empty on this project, I should be able to get to new requests pretty quickly.

New FogBugz 7 Plug-in Enables You to Erase History

fogbugz-logoIn a previous article, I pre-announced (with permission) the new plugin capabilities of FogBugz 7.0, which has now been released, and put out a call for ideas for functionality you’ve always wanted in the product. I didn’t get a lot of suggestions, so I opted to start with something that I’ve needed for my team.

The Issue

If you’ve used FogBugz for any length of time, you no doubt have learned that this software comes with a subscription to Joel’s dogma on the way bug tracking should work and the software has generally enforced it, although the last two releases have shown a marked departure from their previous hard-line position.

One thing that comes up fairly often in their discussion group is the desire for the ability to go back and delete/modify previous entries after they have been submitted.  It isn’t hard to come up with a list of reasons you might want to do this, but here is mine anyway:

  1. Everyone makes spelling/grammar mistakes, no-one wants them permanently memorialized as a monument to their illiteracy.
  2. Once in a while, you accidentally add an update to the wrong case. While you can add another entry imploring people to ignore the previous one, it mucks up the case history and makes it confusing to read.
  3. While working on a complicated case they sometimes take a hard left turn and make every previous discussion in the case notes irrelevant and misleading, especially for testers who come in at the end of the case and have to make sense of what the fix/feature exactly is supposed to do.

 However, I do see FogCreek’s position about not encouraging people to change history. For typos sure, but this capability could clearly be abused by a clever revisionist trying to hide their tracks.

FogBugz Scratchout Plugin

 My compromise was to approximate the Wiki model of changing history, let people change things, but leave a visible audit trail. I built a plugin that lets you mark case history events as deprecated and display them with the strike-through CSS effect. There is even a tool-tip over the struck text with an explanation of why it was deprecated.

Also, scratchouts are completely reversible with a single click.

FogBugz Scratchout Screenshot

FogBugz Scratchout Screenshot

 

Future Plans

Event Editing: The current version of the plugin addresses situations #2 and #3 (above) reasonably well, but it doesn’t yet provide a way to edit an existing event. This is something I’d like to implement in a future version.

Real Deletes: I’m still working out how the permissions would work, but for those who aren’t worried about abuse, I’m considering a configuration option, or maybe a separate plug-in that allows a permanent delete of a case or event from the database.

Aesthetic improvements: 

  • The button is still ugly, and due to limitations on the plugin API, I haven’t been able to reliably put the scratchout/restore links where I wanted to, in the header above each event. At least not reliably for all browsers. Any CSS experts that want to take a crack at that, let me know.
  • I’d like to do some visual effect so you didn’t need to hover over the text to see the scratchout reason, but I haven’t come up with an aesthetically appealing design for that yet.

Your ideas: If you are using this plugin and have some ideas for improvements, send them my way via comments on this post.

Available now at a plugin gallery near you!

If you have already upgraded to FogBugz 7.0, you can download and install the Scratchout plug-in from the FogBugz plugin gallery, it is also automatically available for all FogBugz on Demand users.

If you haven’t upgraded FogBugz yet, I strongly recommend it, the new version is a major step forward for the tool.