In Page Editing In 'Active Admin' - Using Gem 'Best In Place'

Best In Place is a jQuery-based Ajax plugin that helps you add in-place editing to your application, leveraging RESTful server-side controllers to allow users to edit content without the need for traditional forms. Usage of this gem in a Rails application is well documented on its GitHub page. You can check out their live demo here. In this post, I am focusing on how to use the best_in_place gem within ActiveAdmin pages.

To add Best in Place to our app, we first need to add its gem to our application's Gemfile and run bundle.

gem 'best_in_place', github: 'bernat/best_in_place'

Require Best In Place in active_admin.js.coffee and initialize it:

#= require best_in_place
#= require best_in_place.purr

$(document).ready ->
  jQuery(".best_in_place").best_in_place()

To make a text field editable in the ActiveAdmin show page:

row :name do |project|
  best_in_place project, :name, :type => :input, :path => [:admin, project]
end

To make a select field editable:

row :status do |project|
  best_in_place project, :status, :type => :select, :path => [:admin, project], :collection => Project.statuses.map{|status| [status, status]}
end

A textarea can be made editable using the following code:

row :status_description do |project|
  best_in_place project, :status_description, :type => :textarea, :path => [:admin, project]
end

For editable datepicker with formatted output, use display_with:

row "Planned Start Date" do |project|
  best_in_place project, :planned_start_date, :type => :date, :path => [:admin, project], :display_with => lambda { |v| v.try(:strftime, '%b %d, %Y') }
end