Develop­ment

Using Harvest Chosen select with ActiveAdmin

Using Harvest Chosen select with ActiveAdmin

One of the biggest pain points in ActiveAdmin is the large single and multi-selects that come into play with models having relationships. When the list of possible selections for a relationship grow too large, the list becomes completely unwieldy, and the user is left to dig through a long list of what often seems like irrelevant information.

To resolve this issue, we’ve made heavy use of Harvest’s Chosen jQuery plugin (https://harvesthq.github.io/chosen/). Chosen is a fantastic tool, and we’re happy to share how we use it with another one of our favorite tools, ActiveAdmin.

Here are the steps for adding Chosen to ActiveAdmin:

  1. Include the Chosen assets (JS, CSS, and icon sets) in your application.
  2. Tell ActiveAdmin to load these assets (see application.js and application.css).
  3. Attach Chosen to the element selector of your choice. (We use .chosen-select.)
  4. Apply Chosen to your ActiveAdmin resources (f.input :user, as: :select, input_html: { class: ‘chosen-select’ }).

There are a few other pieces you may find handy for using Chosen in ActiveAdmin. You can add the multiple: true input option to allow the Chosen multi-select to take over for the very clunky cmd+click multiple selection, and you can allow blank selection with the allow_blank: true input option. These are features of ActiveAdmin’s underlying Formtastic gem, but Chosen knows how to deal with them. 

If you’re interested in trying out these tips, I’ve created a sample app using Chosen for a single-select here: (https://github.com/boie0025/activeadmin-chosen-example)

While ActiveAdmin is a powerful tool, the way that it handles single- and multi-selects can quickly become unmanageable. Chosen provides a much sleeker method for handling select options.

If you’re interested in learning more about Chosen or looking for a better administration interface, drop us a quick note! We’d love to hear more about your project and the unique challenges you’re facing.

pin-icon phone