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

執筆者:

関連記事

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

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

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-5bcbc …

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …

Rails3.2でユーザー管理機能を追加~Devise

By: Mark Strobl – CC BY 2.0 目次1 前回2 generate3 routes.rb4 index.html.erb5 new6 create7 edit8 up …