Create active admin custom forms in Ruby on Rails

Create active admin custom forms in Ruby on Rails

Sanketkumar Karve

3 minute read

Active Admin is great gem for administration framework for Ruby on Rails applications.
Here you can find documentation to setup in you Rails applications.

Today, Our goal is to create a custom forms in Active Admin. We will create a User and Team model. When a Team is created a user is create along with it and assigned to team.
If you are using devise gem and already have existing User model that you can skip the following command to create User model.

rails generate model User email:string password:string first_name:string last_name:string

Now, Lets create a Team Model using command:

rails generate model Team name:string logo:string

Add bellow line of code in db/migrate/create_teams.rb migration file to create foreign key.

add_reference :users, :team, index: true
add_foreign_key :users, :teams

Lets make association between the 2 models:
In app/models/team.rb :

class Team < ApplicationRecord
    has_many :users,
    accepts_nested_attributes_for :users
end

In app/models/user.rb :

class User < ApplicationRecord
  belongs_to :team
end

Use bellow command to migrations to database.

rails db:migrate

Now, you can restart your rails server.

Register the Team and User model to Active administration

rails generate active_admin:resource Team
rails generate active_admin:resource User

This will create app/admin/teams.rb and app/admin/users.rb to set up the UI; refresh your browser to see it. Lets give permit to the attributes in active admin.
In app/admin/users.rb

ActiveAdmin.register User do
  permit_params do
    permitted = [
      :permitted,
      :attributes,
      :email,
      :first_name,
      :last_name,
      :team_id,
     ]
    permitted
  end
end

In app/admin/teams.rb

ActiveAdmin.register Team do
  permit_params do
    permitted = [
      :name,
      :logo
    ]
    permitted
  end
end

Active admin custom form.

Now, We are all setup create custom form.
In Active Admin, Forms to create CURD operation comes by default. We have to override the existing forms.
In app/admin/teams.rb

form title: 'Create Team' do |f|
  f.inputs 'Teams' do
    input :name
    input :logo
  end
  if f.object.new_record?
    f.has_many :users do |user|
      user.input :first_name, value: 'hello'
      user.input :last_name
      user.input :email
    end
  end
  actions
end

The above code will override the form to create a team. object.new_record? will disable the option to edit users in team edit form.

Lets, Override the controller too.

controller do
  def create
    team = Team.create!(team_params)

    params[:team][:users_attributes].each do |_, u|
      User.create!(email: u[:email], first_name: u[:first_name], last_name: u[:last_name]) do |user|
        user.team = team
      end
    end

    flash[:notice] = 'Team created successfully'
    redirect_to admin_team_path(team)

  end
end

Here, controller do will override the existing controller file. If you try to create a new team, a user will also be created and assigned to the team. Also, You can create multiple users. Team create form
This looks awesome. Lets, also show all the users in the team in the view tab along with view, edit and delete actions.

show do
  team = Team.find(params[:id])

  panel "Team" do
    attributes_table_for team do
      row :name
      row :logo
      row :created_at
      row :updated_at
    end
  end

  panel "Users" do
    table_for team.users do |user|
      column :first_name
      column :last_name
      column :email
      column :created_at
      column :updated_at
      column do |u|
        span link_to 'View', admin_user_path(u)
        span link_to 'Edit', edit_admin_user_path(u)
        span link_to  'Delete', admin_user_path(u), method: :delete, confirm: I18n.t('admin_user.delete_confirmation')
      end
    end
  end

  active_admin_comments
end

First, we override the show function then find the team and display teams and all users details in the panel.
Team View

comments powered by Disqus