Railsで使えるGem

Rails5.1でフォームをウィザード化〜wicked

投稿日:2018年2月21日 更新日:

gem wicked

wickedは、フォームを小分けにして、ウィザード形式にすることができる.
その仕組としては、まず、普通のフォームでデータを作って、その後、wickedでいくつかのステップで遷移するフォームを作ることができるので、そのフォームでデータを更新していく形になる.

情報
schneems/wicked
Wizard-ify Your Rails Controllers with Wicked

RailsCastsが全無料化してた!
#346 Wizard Forms with Wicked

まず、Gemfileにgemを追記して、bundle

ウィザード用のコントローラーを作成する

名前はなんでもいいんだけど、○○_steps_controllerとすることが多いみたい.

ルーティングの設定

たぶん、使うのはindex,show,updateで足りると思う.

既存のコントローラーのcreateメソッドからウィザードに飛ばす

○○_steps_pathでウィザードの最初のフォームに飛ぶ.

このときに、できたデータをウィザードに引き継ぐ必要がある.

deviseとかのユーザー情報なら、次にcurrent_userとかで更新の対象となるデータを引き継ぐことができる.
けど、普通の場合はsessionなどで引き継ぐしかない.
*セキュリティー的には後で調べる.

stepsコントローラーを書く

ライブラリをincludeして
stepsメソッドで、フォームを出す順番をきめる.
フォームの名前は自分の好きな名前をつける.

次に、showメソッドを仮に書く.
これはフォームを描画する共通のメソッド.
render_wizardメソッドで順番にフォームを描画する.

showも後から書くupdateも、stepsで共通して使うメソッドなので、ステップごとに場合分けする場合はcaseを使う.

フォームのビューを作る

app/views/○○_steps以下に、stepsで名付けたとおりにhtml.erbファイルを作成する.
ここでは、second.html.erbとthird.html.erb
formのurlはwizard_pathにしておくことで、自動的に次のステップのフォームに飛ぶ.
previous_wizard_pathとnext_wizard_pathにリンクを貼ることで、データの更新を伴わずにフォームを移動できる.

updateメソッドを作る

次のフォームをrender_wizardで作る.
render_wizardに@インスタンスを渡すと、@インスタンス.saveを実行する.

特定のステップに飛ぶにはjump_toで指定した後、render_wizard

最後のフォームの次の行き先は

ウィザード用のコントローラーでオーバーライドすることで、最後の行き先を決めることができる.

RailsCastsでは、redirect_to_finish_wizardメソッドをオーバーライドしてるけど、これは作者は想定してなかったみたい.
オーバーライドすることができるけど、RailsCastsの頃から引数の数が変わってるので、次のように書くことになる.

-Railsで使えるGem
-, , ,

執筆者:

関連記事

RailsでHTML5対応のvideoプレイヤーを利用してみる~flowplayer5.0.0

  参考 flowplayer.org/ Flowplayerのサイトからバージョン5.0.0がダウンロードできる flowplayer-gemのバージョンは3.2.4 バージョン5では基本 …

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …

Deviseのユーザーと既存のMongoidモデルを関連づける

前提 Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails Rails3.2+Mongoidでログイン機能~dev …