Visualforce 開発者ガイド
jウィザードの作成
ここまで Visualforce マークアップとコントローラーの重要な機能について説明してきましたが、この最後の例では、こうした機能を一緒に使用して 3 ステップから成るカスタムウィザードを作成する方法を説明します。このウィザードでは、次のようにユーザーが商談と同時に、関連する取引先責任者、取引先、および取引先責任者のロールを作成できます。
- ステップ 1: 取引先と取引先責任者に関連する情報を収集する
- ステップ 2: 商談に関連する情報を収集する
- ステップ 3: 作成されるレコードを表示し、ユーザーが保存またはキャンセルできるようにする
このウィザードを実装するには、ウィザードの 3 つのステップのそれぞれに対応する 3 ページと、各ページ間のナビゲーションの設定とユーザーが入力したデータの追跡を行う 1 つのカスタムコントローラーを定義します。
これらの各コンポーネントのコードは、下記のセクションに含まれていますが、3 つのページはそれぞれコントローラーを参照し、コントローラーは 3 つのページをそれぞれ参照するため、まずその最適な作成手順を理解する必要があります。やっかいなことは、ページがないとコントローラーを作成できませんが、コントローラーでページを参照するにはページが存在している必要があるということです。
この問題を解決するには、最初に完全に空のページを定義し、次にコントローラーを作成してから、マークアップをページに追加します。したがって、ウィザードページとコントローラーを作成する最適な手順は次のようになります。
- 1 ページ目の URL の https://Salesforce_instance/apex/opptyStep1 に移動し、[Create Page opptyStep1 (ページ opptyStep1 を作成)] をクリックします。
- ウィザードの他のページである opptyStep2 と opptyStep3 についても、上記のステップを繰り返します。
- newOpportunityController コントローラーを属性としていずれかのページ上の <apex:page> タグに追加し (<apex:page controller="newOpportunityController"> など)、次に [Create Apex controller newOpportunityController (Apex コントローラー newOpportunityController を作成)] をクリックして、コントローラーを作成します。すべてのコントローラーコードを貼り付けて、[Save (保存)] をクリックします。
- ここで、作成した 3 つのページのエディターに戻り、それらのコードをコピーします。これでウィザードは期待どおりに機能します。
商談ウィザードのステップ 1
次のコードは、ウィザードの 1 ページ目 (opptyStep1) を定義します。このページでは、関連付けられた取引先責任者と取引先に関するデータをユーザーから収集します。
ウィザードの 1 ページ目のマークアップについては、次の点に留意してください。
- <apex:pageBlock> タグは、必要に応じて <apex:pageBlockButtons> 子要素を取り込み、コンポーネントのヘッダーとフッターに表示されるボタンを制御できます。<apex:pageBlock> の本文に表示される <apex:pageBlockButtons> タグの順序は重要ではありません。ウィザードのこのページでは、<apex:pageBlockButtons> タグに、ページブロック領域のフッターに表示される [次へ] ボタンが含まれます。
- ウィザードは、[キャンセル] ボタンがクリックされると JavaScript コードを利用してダイアログボックスを表示し、終了するかどうかをユーザーに確認します。この例では、簡略化のためにマークアップに直接 JavaScript を含めていますが、実際には JavaScript コードを静的リソースに配置してそのリソースを代わりに参照することをお勧めします。
- ウィザードのこのページでは、[次へ] ボタンがコントローラーの step2 メソッドをコールし、そのメソッドが PageReference をウィザードの次のステップに返します。
コマンドボタンはフォームに表示する必要があります。これは、フォームコンポーネント自体が、新しい PageReference に基づいてページ表示を更新するためです。
-
<apex:pageBlockSection> タグは、データのセットを表示用に整理します。テーブルと同様に、<apex:pageBlockSection> は 1 つ以上の列で構成され、各列は 2 つのセル (1 つは項目の表示ラベル、1 つは値) に展開されます。<apex:pageBlockSection> タグの本文に含まれる各コンポーネントは、列数に達するまで、行内の次のセルに配置されます。列数に達したら、その次のコンポーネントは次の行の最初のセルに配置されます。
<apex:inputField> などの一部のコンポーネントは、自動的にページブロックセクション列の両方のセルに一度に展開され、項目の表示ラベルと値の両方に入力されます。たとえば、このページの [取引先責任者情報] 領域では、[名] 項目が最初の列、[姓] 項目が 2 番目の列に入り、[電話] 項目が次の行の最初の列に折り返します。
- 前のコードの抜粋に含まれる最初の <apex:inputField> タグの value 属性は、コントローラーの getContact メソッドから返された取引先責任者レコードの firstName 項目にユーザーの入力を割り当てます。
![新規顧客商談ウィザードのステップ 1。2 つのセクション [取引先情報] と [取引先責任者情報] が表示されます。](https://developer.salesforce.com/docs/resources/img/ja-jp/260.0?doc_id=images%2Fpages_quick_start_page_wizard1.jpg&folder=pages)
![新規顧客商談ウィザードのステップ 2。[商談情報] というセクションが表示されます。](https://developer.salesforce.com/docs/resources/img/ja-jp/260.0?doc_id=images%2Fpages_quick_start_page_wizard2.jpg&folder=pages)
![新規顧客商談ウィザードのステップ 3。入力されたセクション [取引先情報]、[取引先責任者情報]、および [商談情報] が確認のために表示されます。](https://developer.salesforce.com/docs/resources/img/ja-jp/260.0?doc_id=images%2Fpages_quick_start_page_wizard3.jpg&folder=pages)