[Force.comでWeb制作]ウィザード入力画面の開発

By |11月 4, 2009|Force.comでWeb制作, |


よくフォーム入力画面を作るときに、Aページ、Bページ、Cページとページを分けて表示して最後に全部まとめて送信、なんてことがしたい場合があります。たとえば楽天とかアマゾンなんかそうですが、商品購入するときに最初に住所入れて、次ページで支払い方法入れて、最後に購入ボタン押す、みたいなあれです。こういうウィザード形式の入力フォームを作ることで、入力項目が大量にある場合にページを分けてユーザのストレスを解消したりページごとに情報を保存してミスを無くしたり、ということができます。
もっと単純な例だと、メールフォームとかで入力→確認→完了、みたいなステップを踏むものも同じような構造です。
この種のステップを踏ませるウィザード入力画面をVisualforceで簡単に作れます。

参考:Creating a Wizard

[サンプル]

リファレンスで紹介しているサンプルコードを実装したサンプルページをちょっといじってForce.com Sitesで公開しておきましたので動作の参考にどうぞ。
http://abeuhuru-developer-edition.na2.force.com/newopptystep1
コードの内容はリファレンスを参照してください。新規取引先と取引先責任者、それに紐づく商談レコードを作成するウィザードになっています。

[ポイント]

  • 全ステップで共通して入力値を保持するクラスを作成する。
  • 各ページの「NEXT」ボタンで、次の入力ページに遷移させる。
  • 最後の確認画面表示後の「SAVE」ボタンで、STEP1~3の間に入力値を保持していたクラスの情報をレコードに保存する。