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
-, , ,

執筆者:

関連記事

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

no image

Railsで動画ファイルを管理する~CarrierWave Flowplayer

  参考 Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick Rails3で動画配信を試用~flowplayer 環境 Ubuntu …

ActionCableのサンプルをみてみた

By: Samantha Brough – CC BY 2.0 目次1 ActionCableとは2 rails4での利用3 redisサーバーの準備4 cableサーバーの準備5 チャッ …

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …