Alessandro Bardini
Alessandro Bardini

Reputation: 321

Insert custom element at the bottom of an ActiveAdmin index page

I would like to insert a custom element at the bottom of an ActiveAdmin index page. For example, having a Campaign model, in the ActiveAdmin campaign index page I would like to have the default index table followed by my custom element (a partial named campaigns_custom_element). I tried with the following code:

index do
    selectable_column
    column :id
    column :name
    column :advertiser
    column :duration
    column :paused
    column :in_preparation

    panel 'A custom panel' do
      render partial: 'campaigns_custom_element'
    end
  end

The problem is that ActiveAdmin always places the index table as last element:

enter image description here

Instead, my desired layout would be the index table followed by my custom element:

enter image description here

There is an easy and clean way to do this without having to create a whole custom index page?

Upvotes: 3

Views: 1252

Answers (1)

Sjors Branderhorst
Sjors Branderhorst

Reputation: 2182

If relying on javascript does not bother you here's a little proof of concept: Wrap your panel in div like so:

div(id: 'get_lower') do
  panel 'A custom panel' do
    render partial: 'campaigns_custom_element'
  end
end

Then add this snippet at then end of app/assets/javascripts/active_admin.js

;(function($) {
    $(document).ready(function() {
        $("#get_lower").insertAfter(".index_table");
    });
})(jQuery);

Upvotes: 2

Related Questions