How to show the new-resource form below the ActiveAdmin index page?

Question

A client requested to have the ActiveAdmin "New Resource" form show up underneath the index_as_table, in order to be able to refer to existing rows while creating the new one. I thought I should be able to do

form partial: 'form'

index do 
  ...   
  div id: "new_resource" do
    render partial: 'form', locals: { resource: User.new }
  end
end

However, this results in a broken-looking form and broken HTML, where the form fields are not even nested inside the form element.

Answer 1

Creating my own index template and re-creating all the awesome functionality of the existing one, only in order to insert some HTML beneath the form, seemed way overkill.

The solution I went with is using Javascript to fix the broken output from above, i.e. ensuring proper nesting of form fields within the form and moving everything to below the table. This has the advantage that we can still use the _form partial for both edit resource, new resource (on separate page) and new resource form on the index page.

Adding the following to active_admin.js:

$(document).ready(function() {

  // check if we're on the resource index page, if so, move the form div below the table
  // and fix the issue where form fields are not inside the form tag
  if ($('.index_as_table').length) {
    old_content = $('#new_resource').detach();
    form = old_content.find('form').detach();
    // Add a headline to the form, then nest the form fields
    form.prepend('<h2>Add New User</h2>');
    form.append(old_content);
    // Place it all below the pagination of the index table
    form.appendTo('#main_content');
    form.css('margin-top', '30px');
  }
});