Visualforce Component - Grouped Chosen Picklist

Key Information

The challenge is finished.
Show Deadlines

Challenge Overview

A few weeks ago we ran a challenge to build a Visualforce Component using Chosen, a javascript library to create type-ahead picklists. It was such a success, we are coming back for more!

In this challenge we want to build a Visualforce component which creates a grouped single-select picklist. See the example below:

In this situation, the bold items are the group names (NFC East, NFC North).

The values in the map should be dictated by a map which will be passed to the component. This map will include:

  • id - A SFDC id
  • displayValue - string
  • groupName - string

You must group the values when displaying based on the group name. The displayValue will be the value rendered in the picklist, and id will be the value is passed back to the controller when a selection is made.

In the example above, the map would look like this:

id displayValue GroupName

Dallas Cowboys

NFC East
2 New York Giants NFC East
3 Philadelphia Eagles NFC East
4 Washington Redskins NFC East


You must use Chosen to power the picklist: http://harvesthq.github.io/chosen/

Final Submission Guidelines

Upload all your source code as a zip (you can simply zip up your Eclipse project for convenience) and provide any documentation and/or instructions that are needed. Please be clear and concise with any setup instructions.

A video of your application using Jing or Youtube is required. An unmanaged package for installation is also required.


Topcoder will compensate members in accordance with our standard payment policies, unless otherwise specified in this challenge. For information on payment policies, setting up your profile to receive payments, and general payment questions, please refer to ‌Payment Policies and Instructions.


Final Review:

Community Review Board


User Sign-Off

ID: 30041351