DEV Community


Posted on


Using select2 in ActiveAdmin by using activeadmin_addons


When I upgraded from Rails 4.2 to 5.0->5.1, I also upgraded ActiveAdmin version.
It seems that activeadmin-select2, which uses select2 in ActiveAdmin, hasn't been maintained since April 2016, and
It did not work with the current ActiveAdmin 1.2 and Rails 5.1 combination.

So I decided to use activeadmin_addons, which can be handled separately by select2 in ActiveAdmin.

How to use select2 from activeadmin_addons and how to migrate from activeadmin-select2 to activeadmin_addons are described.

If you run select2 in ActiveAdmin, you can display completion like this

If you want to add a function other than the list of table elements, I recommend you to make a simple design administration screen using Twitter Bootstrap etc.

This version of the gem

  • activeadmin (1.2.0)
  • activeadmin_addons (1.1.1)

Modification of Gemfile

activeadmin # Stay tuned
activeadmin_addons # add
# activeadmin-select2 # delete
Enter fullscreen mode Exit fullscreen mode

Automatic generation of configuration files

bin/rails g activeadmin_addons:install
Enter fullscreen mode Exit fullscreen mode

config/initializers/activeadmin_addons.rb will be generated

select2 configuration

Note that the default will be select2.

For example, if the date is set to select2, it will take time to adjust the width.
This is quite a hassle if you want to use an asset written in an existing ActiveAdmin.

There are two ways to get around it, and the latter one requires less modification when migrating from activeadmin-select2.

Workaround 1: Set default-select in the class for without using select2.

I'll put it this way.

f.input :created_at, input_html: { class: "default-select" }
Enter fullscreen mode Exit fullscreen mode

【Recommended】Workaround 2: Set default-select in the class for without using select2.

In the configuration file of activeadmin_addons, the default method of select is select2, so you can make it default.
The select tag becomes a normal select tag.

ActiveadminAddons.setup do |config|
  config.default_select = "default"
Enter fullscreen mode Exit fullscreen mode

For that you want to express explicitly with select2, set select2 in the class.
This modification method is easy to migrate because it replaces only the part of activeadmin-select2 that was set to select2 explicitly.

# When filling in a form in the old activeadmin-select2 version of select2
f.input :created_at, as: :select2

# activeadmin_addons version
f.input :created_at, input_html: { class: "select2" }
Enter fullscreen mode Exit fullscreen mode


Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.