Add html to active admin page

Question

I would like to add either some html or a div to an active admin form, so that I can add a jquery file uploader progress bar to the active admin form page. Currently, my form looks like this:

  form(:html => { :multipart => true}) do |f|
    f.inputs "Studio" do
      f.input :name
      f.input :position
      f.input :description
      f.input :image, :label => "Image - (must be 335x221px)"
      f.input :gallery_image, :label => "Image - (must be 600x400px)"
    end
    f.actions 
  end

Let's say I wanted to add a div above each of the uploaders to show my upload progress, how would I add some sort of a div above each?

Answer 1

You should move your form to a view and make modifications there.

app/admin/studio.rb

form do |f|              
    render partial: 'form'                        
end  

app/views/admin/studio/_form.html.erb

<%= form(:html => { :multipart => true}) do |f| %>
    <div class="progress">...</div>
    <%= f.inputs "Studio" do %>
         <%= f.input :name %>
         <%= f.input :position %>
         <%= f.input :description %>
         <%= f.input :image, :label => "Image - (must be 335x221px)" %>
         <%= f.input :gallery_image, :label => "Image - (must be 600x400px)" %>
    <% end %>
    <%= f.actions  %>
<% end %>

Answer 2

Active admin created a DSL on top of Formtastic according to their docs

https://github.com/activeadmin/activeadmin/blob/master/docs/5-forms.md

So you can now do:

form do |f|
  f.semantic_errors(*f.object.errors.keys)

  import_errors = self.controller.instance_variable_get("@errors")
  if import_errors.present?
    ul class: 'errors' do
      import_errors.each do |e|
        li e
      end
    end
  end