How to Add In Page Editing Using Gem best_in_place

Best in place is a jQuery based Ajax plug in that can help us to add in place editing to our application that takes profit of Restful server-side controllers to allow users to edit stuff with no need of forms. We can easly integrate inline editing in active_admin with best_in_place.

Integration instructions

1. Install Best in Place as a gem via your Gemfile:

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

2. Require best in place in active_admin.js.coffee and initialise it

   # app/assets/javascripts/active_admin.js.coffee
   #= require best_in_place
   #= require jquery.purr
   #= require best_in_place.purr
   
   $(document).ready ->
     jQuery(".best_in_place").best_in_place()

3. Now you can add inline editing to our active admin pages

   To make text field editable in active admin show page

   # app/admin/project.rb
   row :name do |project|
     best_in_place project, :name, as: :input, url: [:admin,project]
   end

   To make select field editable

   # app/admin/project.rb
   row :status do |project|
     best_in_place project, :status, as: :select, url: [:admin,project],:collection => Project.statuses.map{|status| [status,status]}
   end

   To make checkbox field editable

   # app/admin/project.rb
   row :status do |project|
     best_in_place project, :status, as: :checkbox, url: [:admin, project], collection: { false: 'False', true: 'True' }
   end
   # or if you want use status_tag
   collection: { false: raw("<span class='status_tag in_progress'>False</span>"), true: raw("<span class='status_tag active ok'>True</span>") }

   Textarea can be made editable using following code

   # app/admin/project.rb
   row :status_description  do |project|
     best_in_place project, :status_description, as: :textarea, url: [:admin,project]
   end

   For Editable Datepicker with formated output use display_with

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

4. Using the display_with option.

   If you use the display_with option, you will need to modify your Controllers accordingly using the respond_with_bip responder, otherwise saved changes will not be decorated until the page is completely refreshed again. Luckily, this is really easy to address inside a controller block.

   controller do
     def update
       update! do |success, failure|
         success.json { respond_with_bip(resource) }
       end
     end
   end

   Example: Decorating the Contact Index's Phone Number attribute with number_to_phone

   index do
     column do |contact|
       best_in_place contact, 
         :phone_number, 
         url: [:admin, contact], 
         display_with: :number_to_phone
     end
   end