[Rails] ActiveAdminで新規作成(編集)フォームをカスタマイズする

概要

Ruby on rails(5.0.3)用のgemライブラリであるActiveAdminを用いて管理画面を実装する際の、新規登録フォーム、あるいは編集フォームをカスタマイズする方法を確認する。本記事は公式ドキュメントの内容をベースに、カスタマイズ結果の画像を載せつつ確認する。

※ Ruby on rails及びActive Admin全般の説明は行っていませんのでご注意ください

前提

以下の環境で動作確認済み

debian 8.6
ruby 2.3.1
ruby on rails 5.0.3
active admin 1.0.0

使用するモデル

本記事では、以下のシンプルなモデルをベースにする。以下のItemモデルは、商品データベースを想定したもので、商品名、カテゴリ、品数、販売フラグ、商品説明を持つ。なお、本来であればカテゴリはCategoryモデルを参照するなどの設計になるが、ここでは簡略化のために直接文字列を入れるようにする。

$ rails generate model Item name:string category:string num:integer is_sale:boolean description:text
class CreateItems < ActiveRecord::Migration[5.0]
  def change
    create_table :items do |t|
      t.string :name
      t.string :category
      t.integer :num
      t.boolean :is_sale
      t.text :description

      t.timestamps
    end
  end
end

デフォルトフォーム

formメソッドを記述しなくともモデルの内容に応じてフォームは自動生成されるが、あえてコードを書くなら以下のようになる。

ActiveAdmin.register Item do

  # 編集を許可するフィールドを定義
  permit_params :name, :category, :num, :is_sale, :description

  form do |f|
    f.semantic_errors # エラーメッセージ表示
    f.inputs          # 入力フィールドを表示
    f.actions         # submit/cancelボタンを表示
  end

end

編集できる列を制限

例えば商品数や販売フラグを編集できないようにする場合は以下のように、inputsメソッドにブロックを渡して、ブロック内で編集可能なフィールドを定義する。

ActiveAdmin.register Item do

  # 編集を許可するフィールドを定義
  permit_params :name, :category, :description

  form do |f|
    f.inputs do
      f.input :name
      f.input :category
      f.input :description
    end
    f.actions
  end
end

フォームコントロールを変更する

商品カテゴリーは自由入力でなく、「カテゴリA」「カテゴリB」「カテゴリC」から選択するようにしたい。その場合は以下のようにinputメソッドにasオプションを指定する。

form do |f|
  f.inputs do
    f.input :name
    f.input :category, as: :select, collection: ['カテゴリA', 'カテゴリB', 'カテゴリC']
    f.input :description
  end
  f.actions
end

ちなみにOptionタグのvalueとラベルを変えたい場合は以下のようにする。

collection: {カテゴリA: :a, カテゴリB: :b, カテゴリC: :c}

補助テキストを追加する

以下のように、フォーム以外の情報を表示することも出来る。

form do |f|
  panel '注意' do
    '商品を追加する場合、同一商品が既に存在しないか確認してください'
  end
  f.inputs '商品新規登録' do
    f.input :name
    f.input :category, as: :select, collection: ['カテゴリA', 'カテゴリB']
    f.input :description
    para "入力内容を確認の上、作成ボタンをクリックしてください"
  end
  f.actions
end

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です