DEV Community

Cover image for Rails administrate : big tutorial, bits of philosophy
David Boureau
David Boureau

Posted on • Originally published at bootrails.com

Rails administrate : big tutorial, bits of philosophy

#rails #ruby

Article originally published here : https://www.bootrails.com/blog/rails-administrate-tutorial-and-philosophy/

administrate is a gem that allows you to build an admin dashboard. It's often qualified as "DSL-less" admin builder, i.e. every file your admin dashboard relies on, can be fully overridden by the developer. Let's see how.

1. Prerequisites 

$> ruby -v  
ruby 3.0.0p0 // you need at least version 3 here  
$> bundle -v  
Bundler version 2.2.11  
$> npm -v  
8.3.0 // you need at least version 7.1 here  
$> yarn -v  
1.22.10
Enter fullscreen mode Exit fullscreen mode

Now open your usual workspace, and type

mkdir myadmin && cd myadmin 
echo "source 'https://rubygems.org'" > Gemfile  
echo "gem 'rails', '7.0.0'" >> Gemfile  
bundle install  
bundle exec rails new . --force
Enter fullscreen mode Exit fullscreen mode

You have now a fresh, new, default Rails 7 app installed in the "myapp" directory - this is also the name of the tiny app, perfect for a tutorial.

You can also open in your browser, the official repository here, and the docs here, it will be helpful.

2. Build a complex enough domain

In order to see how good the administrate gem is, we need some complex enough models, a single table with a single string-based attribute will not reflect real-world, production-ready web applications.

bin/rails generate model Author name:string email:string bio:text favorite_number:integer awake:time birthday:date --no-test-framework
bin/rails generate model Micropost name:string content:text published:boolean author:references --no-test-framework
Enter fullscreen mode Exit fullscreen mode

Our Author has :text, :string, :integer, :time and :date types, plus the :datetime type (Rails already brings it to us thanks to timestamps).

Moreover, our Micropost has a boolean, and a reference to the Author.

That makes many types and relationships. Not quite yet like real-world apps, but certainly more than a "hello world" tutorial.

Migrate the database :

bin/rails db:migrate
Enter fullscreen mode Exit fullscreen mode

Then modify models as follow :

# Inside app/models/Authors.rb
class Author < ApplicationRecord
  has_many :microposts  
end
Enter fullscreen mode Exit fullscreen mode 
# Inside app/models/Authors.rb
class Micropost < ApplicationRecord
  belongs_to :author, required:  true  
end
Enter fullscreen mode Exit fullscreen mode

Now add some validations to these models.

# Inside app/models/Authors.rb
class Author < ApplicationRecord
  has_many :microposts  

  validates :name, presence: true
  validates :bio, length: { maximum: 50 }
  validates :email, presence: true, format: { with: /\A([^\}\{\]\[@\s\,]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }
end
Enter fullscreen mode Exit fullscreen mode 
# Inside app/models/Authors.rb
class Micropost < ApplicationRecord
  belongs_to :author

  validates :name, presence: true, format: { with: /\A[a-zA-Z]+\z/, message: "only allows letters" }
end
Enter fullscreen mode Exit fullscreen mode

3. Seed some data 

# Inside db/seeds.rb
author_ada = Author.create!(name: 'Ada Lovelace', email: 'ada@example.com', bio: 'Wrote great code.')

micropost_1 = Micropost.create!(name: 'add', content: 'how to add numbers in Ruby', author: author_ada, published: true)
micropost_2 = Micropost.create!(name: 'multiply', content: 'how to multiply numbers in Ruby', author: author_ada, published: false)

author_grace = Author.create!(name: 'Grace Hopper', email: 'ada@example.com', bio: 'Coded in the navy.')

micropost_3 = Micropost.create!(name: 'rubyMap', content: 'map things in Ruby', author: author_grace, published: true)
micropost_4 = Micropost.create!(name: 'rubyHash', content: 'Ruby dictionaries', author: author_grace, published: false)
micropost_5 = Micropost.create!(name: 'rubyArray', content: 'How to handle arrays in Ruby', author: author_grace, published: true)
Enter fullscreen mode Exit fullscreen mode

Seed the database :

bin/rails db:seed
Enter fullscreen mode Exit fullscreen mode

4. Install and scaffold administrate

Now we are going to inject administrate in your application. Open your terminal and type :

echo "gem 'administrate'" >> Gemfile
bundle install
Enter fullscreen mode Exit fullscreen mode

Once installed, I suggest to always commit changes before any new file generation, thus, it's far easier to see what and why (bad or good) surprises happen.

Now ask administrate to generate a skeleton.

bin/rails generate administrate:install
Enter fullscreen mode Exit fullscreen mode

That will produce the following output :

      route  namespace :admin do
              resources :authors
              resources :microposts
                root to: "authors#index"
              end
      create  app/controllers/admin/application_controller.rb
      create  app/dashboards/author_dashboard.rb
      create  app/controllers/admin/authors_controller.rb
      create  app/dashboards/micropost_dashboard.rb
      create  app/controllers/admin/microposts_controller.rb
Enter fullscreen mode Exit fullscreen mode

Nice ! administrate is smart enough to tell us what actually changed. Take time to inspect generated files one by one.

5. Let's see what administrate look like in our Rails app

We haven't yet launched our own server. Maybe it's time to have a sneak peek :

bin/rails s
Enter fullscreen mode Exit fullscreen mode

And open your browser at localhost:3000/admin

Administrate

Administrate

Try to navigate to the creation page, edit page, as well as the show page. See how data and relationship are already defined. Of course this could be customised and improved, but at least, "it works".

6. The easy winners : dashboard, and controller

That's the real power of administrate : many parts are really easy to customize. Moreover, everything is heavily documented.

# inside app/controllers/admin/authors_controller.rb
module Admin
  class AuthorsController < Admin::ApplicationController
    # Overwrite any of the RESTful controller actions to implement custom behavior
    # For example, you may want to send an email after a foo is updated.
    #
    # def update
    #   super
    #   send_foo_updated_email(requested_resource)
    # end

    # Override this method to specify custom lookup behavior.
    # This will be used to set the resource for the `show`, `edit`, and `update`
    # actions.
    #
    # def find_resource(param)
    #   Foo.find_by!(slug: param)
    # end

    # The result of this lookup will be available as `requested_resource`

    # Override this if you have certain roles that require a subset
    # this will be used to set the records shown on the `index` action.
    #
    # def scoped_resource
    #   if current_user.super_admin?
    #     resource_class
    #   else
    #     resource_class.with_less_stuff
    #   end
    # end

    # Override `resource_params` if you want to transform the submitted
    # data before it's persisted. For example, the following would turn all
    # empty values into nil values. It uses other APIs such as `resource_class`
    # and `dashboard`:
    #
    # def resource_params
    #   params.require(resource_class.model_name.param_key).
    #     permit(dashboard.permitted_attributes).
    #     transform_values { |value| value == "" ? nil : value }
    # end

    # See https://administrate-prototype.herokuapp.com/customizing_controller_actions
    # for more information
  end
end
Enter fullscreen mode Exit fullscreen mode

Pretty neat.

The dashboard allows us to see what kind of data is displayed on which screen. Code is pretty self-explanatory :

# inside app/dashboards/author_dashboard.rb
require "administrate/base_dashboard"

class AuthorDashboard < Administrate::BaseDashboard
  # ATTRIBUTE_TYPES
  # a hash that describes the type of each of the model's fields.
  #
  # Each different type represents an Administrate::Field object,
  # which determines how the attribute is displayed
  # on pages throughout the dashboard.
  ATTRIBUTE_TYPES = {
    microposts: Field::HasMany,
    id: Field::Number,
    name: Field::String,
    email: Field::String,
    bio: Field::Text,
    favorite_number: Field::Number,
    awake: Field::Time,
    birthday: Field::Date,
    created_at: Field::DateTime,
    updated_at: Field::DateTime,
  }.freeze

  # COLLECTION_ATTRIBUTES
  # an array of attributes that will be displayed on the model's index page.
  #
  # By default, it's limited to four items to reduce clutter on index pages.
  # Feel free to add, remove, or rearrange items.
  COLLECTION_ATTRIBUTES = %i[
    microposts
    id
    name
    email
  ].freeze

  # SHOW_PAGE_ATTRIBUTES
  # an array of attributes that will be displayed on the model's show page.
  SHOW_PAGE_ATTRIBUTES = %i[
    microposts
    id
    name
    email
    bio
    favorite_number
    awake
    birthday
    created_at
    updated_at
  ].freeze

  # FORM_ATTRIBUTES
  # an array of attributes that will be displayed
  # on the model's form (`new` and `edit`) pages.
  FORM_ATTRIBUTES = %i[
    microposts
    name
    email
    bio
    favorite_number
    awake
    birthday
  ].freeze

  # COLLECTION_FILTERS
  # a hash that defines filters that can be used while searching via the search
  # field of the dashboard.
  #
  # For example to add an option to search for open resources by typing "open:"
  # in the search field:
  #
  #   COLLECTION_FILTERS = {
  #     open: ->(resources) { resources.where(open: true) }
  #   }.freeze
  COLLECTION_FILTERS = {}.freeze

  # Overwrite this method to customize how authors are displayed
  # across all pages of the admin dashboard.
  #
  # def display_resource(author)
  #   "Author ##{author.id}"
  # end
end
Enter fullscreen mode Exit fullscreen mode

One of the great strengthes of administrate is the ability to handle a wide variety of fields (so not only classic input like "text" or "number")

7. Available fields

As the time of writing, here are the available types (the list is also here in the GitHub repo) :

  • associative
  • base
  • belongs_to
  • boolean
  • date
  • date_time
  • deferred
  • email
  • has_many
  • has_one
  • number
  • password
  • polymorphic
  • select
  • string
  • text
  • time
  • url

What if

8. More and more fields

The community has built numerous useful fields, that you can find here : https://rubygems.org/gems/administrate/reverse_dependencies

You can also write your own fields, as stated in the official docs.

9. Customize the views

Let's say you don't like the side navigation. Or maybe you want to display the currently connected User in this sidebar.

bin/rails generate administrate:views:layout 
      create  app/views/layouts/admin/application.html.erb
      create  app/views/admin/application/_navigation.html.erb
      create  app/views/admin/application/_stylesheet.html.erb
      create  app/views/admin/application/_javascript.html.erb
      create  app/views/admin/application/_flashes.html.erb
      create  app/views/admin/application/_icons.html.erb
Enter fullscreen mode Exit fullscreen mode

Good ! You can change anything in the sidebar, or even in the global layout application. But if you open _stylesheet.html.erb, you'll notice that it doesn't allow you to change the actual css.

10. Customize assets

Now to actually customize CSS and and change the bare design, just type :

bin/rails g administrate:assets:stylesheets
Enter fullscreen mode Exit fullscreen mode

And with no surprise for JS :

bin/rails g administrate:assets:javascripts
Enter fullscreen mode Exit fullscreen mode

11. Further customisation

We have already covered many use cases for customisation, everything else can be found in the official documentation.

If anything is missing, you can still fork the repo, reference the fork in your Gemfile, and change the internal of administrate. From our experience this is unlikely to occur. Even the base controller of administrate can be overridden.

12. Should you use administrate ?

Pros :

  • Plain old Rails : no Hotwire, no js-bundling,
  • It's easy to start with,
  • It seems easy to customise at first glance, tons of options available,
  • Somehow good-looking : bare design, but accessible and understandable from day 1,
  • Exists for a long time,
  • Backed by Thoughtbot,
  • Regular updates.

Cons :

  • Uses abstraction ("resource") for every model,
  • Nested resources are barely supported,
  • Corner cases are not easy to reach.

Before any criticism, we'd like to remember that all this incredible work around this gem is given for free. That being said, from our own experience, administrate is really nice to use if you plan to quickly start an admin dashboard, but is not so nice to scale. The UI design is sufficiently clean, but the UX is clearly not good enough by default. If you plan to use an admin dashboard only for your teammates (and not anyone else), and you have to deliver a dashboard quickly, administrate is a reasonable choice.

But

Every single time I've used one of these, I always end up getting tired of fighting against the gem in some way due to some custom process or workflow, and end up having to go back to classic Rails views.
-- a redditor

If you want anything that is easy to extend over the long term, do not use administrate. Use plain Rails scaffolding, and customize/override it, according to the context of your app.

Top comments (1)

Collapse
 
eth3rnit3 profile image
Eth3rnit3 •

I'm glad you found the tutorial on Rails Administrate helpful! For those looking to enhance their admin panels further, I'm excited to announce the release of a new Tailwind theme for Rails Administrate. This theme leverages Tailwind CSS to bring a fresh, modern look and improved responsiveness to your admin interface. It's designed for ease of integration and customization, allowing you to tailor the admin UI to your preferences. Check it out and give your Rails applications a visual upgrade!

github.com/Eth3rnit3/administrate-...

Read next

sarahthomasdev profile image

Which iOS Performance Testing Tools should be used in 2025?

Sarah Thomas -

farhan_ahmedfarhan41230 profile image

how can I add search functionality in this code?

Farhan Ahmed (Farhan41230301394) -

vania_gomes profile image

Entendendo props e useState no React: Como Passar e Gerenciar Dados Entre Componentes

Vânia Gomes -

rohitg00 profile image

Getting Started with DevOps: A Comprehensive Guide

Rohit Ghumare -