この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ウィザードの作成

ここまで Visualforce マークアップとコントローラの重要な機能について説明してきましたが、この最後の例では、こうした機能を一緒に使用して 3 ステップから成るカスタムウィザードを作成する方法を説明します。このウィザードでは、次のようにユーザが商談と同時に、関連する取引先責任者、取引先、および取引先責任者のロールを作成できます。

ステップ 1: 取引先と取引先責任者に関連する情報を収集する
ステップ 2: 商談に関連する情報を収集する
ステップ 3: 作成されるレコードを表示し、ユーザが保存またはキャンセルできるようにする

このウィザードを実装するには、ウィザードの 3 つのステップのそれぞれに対応する 3 ページと、各ページ間のナビゲーションの設定とユーザが入力したデータの追跡を行う 1 つのカスタムコントローラを定義します。

複数の Visualforce ページにまたがって使用されるデータは、最初のページでデータを使用しない場合でも、最初のページ内で定義する必要があります。たとえば、項目が 3 ステッププロセスの 2 ページ目と 3 ページ目で必要な場合、1 ページ目にもその項目が含まれている必要があります。項目の rendered 属性を false に設定することで、この項目をユーザに非表示にすることもできます。

重要

これらの各コンポーネントのコードは、下記のセクションに含まれていますが、3 つのページはそれぞれコントローラを参照し、コントローラは 3 つのページをそれぞれ参照するため、まずその最適な作成手順を理解する必要があります。やっかいなことは、ページがないとコントローラを作成できませんが、コントローラでページを参照するにはページが存在している必要があるということです。

この問題を解決するには、最初に完全に空のページを定義し、次にコントローラを作成してから、マークアップをページに追加します。したがって、ウィザードページとコントローラを作成する最適な手順は次のようになります。

1 ページ目の URL https://Salesforce_instance/apex/opptyStep1 に移動し、[Create Page opptyStep1 (ページ opptyStep1 を作成)] をクリックします。
ウィザードの他のページである opptyStep2 と opptyStep3 についても、上記のステップを繰り返します。
newOpportunityController コントローラを属性としていずれかのページ上の <apex:page> タグに追加し (<apex:page controller="newOpportunityController"> など)、次に [Apex controller newOpportunityController (Apex コントローラ newOpportunityController を作成)] をクリックして、コントローラを作成します。すべてのコントローラコードを貼り付けて、[Save (保存)] をクリックします。
ここで、作成した 3 つのページのエディタに戻り、それらのコードをコピーします。これでウィザードは期待どおりに機能します。

空のページを作成することはできますが、その逆のことはできません。ページがコントローラを参照するためには、そのコントローラのすべてのメソッドとプロパティが設定されている必要があります。

メモ

商談ウィザードコントローラ

次の Apex クラスは、新規顧客商談ウィザードの 3 つのページすべてのコントローラです。

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public class newOpportunityController {
18
19   // These four member variables maintain the state of the wizard.
20   // When users enter data into the wizard, their input is stored
21   // in these variables. 
22   Account account;
23   Contact contact;
24   Opportunity opportunity;
25   OpportunityContactRole role;
26
27
28   // The next four methods return one of each of the four member
29   // variables. If this is the first time the method is called,
30   // it creates an empty record for the variable.
31   public Account getAccount() {
32      if(account == null) account = new Account();
33      return account;
34   }
35
36   public Contact getContact() {
37      if(contact == null) contact = new Contact();
38      return contact;
39   }
40
41   public Opportunity getOpportunity() {
42      if(opportunity == null) opportunity = new Opportunity();
43      return opportunity;
44   }
45
46   public OpportunityContactRole getRole() {
47      if(role == null) role = new OpportunityContactRole();
48      return role;
49   }
50
51
52   // The next three methods control navigation through
53   // the wizard. Each returns a PageReference for one of the three pages
54   // in the wizard. Note that the redirect attribute does not need to
55   // be set on the PageReference because the URL does not need to change
56   // when users move from page to page.
57   public PageReference step1() {
58      return Page.opptyStep1;
59   }
60
61   public PageReference step2() {
62      return Page.opptyStep2;
63   }
64
65   public PageReference step3() {
66      return Page.opptyStep3;
67   }
68
69
70   // This method cancels the wizard, and returns the user to the 
71   // Opportunities tab
72    public PageReference cancel() {
73			PageReference opportunityPage = new ApexPages.StandardController(opportunity).view();
74			opportunityPage.setRedirect(true);
75			return opportunityPage; 
76    }
77
78   // This method performs the final save for all four objects, and
79   // then navigates the user to the detail page for the new
80   // opportunity.
81   public PageReference save() {
82
83      // Create the account. Before inserting, copy the contact's
84      // phone number into the account phone number field.
85      account.phone = contact.phone;
86      insert account;
87
88      // Create the contact. Before inserting, use the id field
89      // that's created once the account is inserted to create
90      // the relationship between the contact and the account.
91      contact.accountId = account.id;
92      insert contact;
93
94      // Create the opportunity. Before inserting, create 
95      // another relationship with the account.
96      opportunity.accountId = account.id;
97      insert opportunity;
98
99      // Create the junction contact role between the opportunity
100      // and the contact.
101      role.opportunityId = opportunity.id;
102      role.contactId = contact.id;
103      insert role;
104
105      // Finally, send the user to the detail page for 
106      // the new opportunity.
107
108
109      PageReference opptyPage = new ApexPages.StandardController(opportunity).view();
110      opptyPage.setRedirect(true);
111
112      return opptyPage;
113   }
114
115}

商談ウィザードのステップ 1

次のコードは、ウィザードの 1 ページ目 (opptyStep1) を定義します。このページでは、関連付けられた取引先責任者と取引先に関するデータをユーザから収集します。

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page controller="newOpportunityController" tabStyle="Opportunity">
18  <script>
19  function confirmCancel() {
20      var isCancel = confirm("Are you sure you wish to cancel?");
21      if (isCancel) return true;
22  
23     return false;
24  }  
25  </script>
26  <apex:sectionHeader title="New Customer Opportunity" subtitle="Step 1 of 3"/>
27    <apex:form>
28      <apex:pageBlock title="Customer Information" mode="edit">
29
30        <!-- The pageBlockButtons tag defines the buttons that appear at the top
31             and bottom of the pageBlock. Like a facet, it can appear anywhere in
32             a pageBlock, but always defines the button areas.-->
33        <!-- The Next button contained in this pageBlockButtons area
34             calls the step2 controller method, which returns a pageReference to
35             the next step of the wizard. -->
36        <apex:pageBlockButtons>
37          <apex:commandButton action="{!step2}" value="Next"/>
38          <apex:commandButton action="{!cancel}" value="Cancel" 
39                              onclick="return confirmCancel()" immediate="true"/>
40        </apex:pageBlockButtons>
41      <apex:pageBlockSection title="Account Information">
42
43        <!-- Within a pageBlockSection, inputFields always display with their
44             corresponding output label. -->
45        <apex:inputField id="accountName" value="{!account.name}"/>
46        <apex:inputField id="accountSite" value="{!account.site}"/>
47      </apex:pageBlockSection>
48      <apex:pageBlockSection title="Contact Information">
49        <apex:inputField id="contactFirstName" value="{!contact.firstName}"/>
50        <apex:inputField id="contactLastName" value="{!contact.lastName}"/>
51        <apex:inputField id="contactPhone" value="{!contact.phone}"/>
52      </apex:pageBlockSection>
53    </apex:pageBlock>
54  </apex:form>
55</apex:page>

ウィザードの 1 ページ目のマークアップについては、次の点に留意してください。

<apex:pageBlock> タグは、オプションで <apex:pageBlockButtons> 子要素を取り込み、コンポーネントのヘッダーとフッターに表示されるボタンを制御できます。<apex:pageBlock> の本文に表示される <apex:pageBlockButtons> タグの順序は重要ではありません。ウィザードのこのページでは、<apex:pageBlockButtons> タグに、ページブロック領域のフッターに表示される [次へ] ボタンが含まれます。
ウィザードは、[キャンセル] ボタンがクリックされると JavaScript コードを利用してダイアログボックスを表示し、終了するかどうかをユーザに確認します。この例では、簡略化のためにマークアップに直接 JavaScript を含めていますが、実際には JavaScript コードを静的リソースに配置してそのリソースを代わりに参照することをお勧めします。
ウィザードのこのページでは、[次へ] ボタンがコントローラの step2 メソッドをコールし、そのメソッドが PageReference をウィザードの次のステップに返します。
1<apex:pageBlockButtons> 2 <apex:commandButton action="{!step2}" value="Next"/> 3</apex:pageBlockButtons>
コマンドボタンはフォームに表示する必要があります。これは、フォームコンポーネント自体が、新しい PageReference に基づいてページ表示を更新するためです。
<apex:pageBlockSection> タグは、データ��セットを表示用に整理します。テーブルと同様に、<apex:pageBlockSection> は 1 つ以上の列で構成され、各列は 2 つのセル (1 つは項目の表示ラベル、1 つは値) に展開されます。<apex:pageBlockSection> タグの本文に含まれる各コンポーネントは、列数に達するまで、行内の次のセルに配置されます。列数に達したら、その次のコンポーネントは次の行の最初のセルに配置されます。
<apex:inputField> などの一部のコンポーネントは、自動的にページブロックセクション列の両方のセルに一度に展開され、項目の表示ラベルと値の両方に入力されます。たとえば、このページの [取引先責任者情報] 領域では、[名] 項目が最初の列、[姓] 項目が 2 番目の列に入り、[電話] 項目が次の行の最初の列に折り返します。
1<apex:pageBlockSection title="Contact Information"> 2 <apex:inputField id="contactFirstName" value="{!contact.firstName}"/> 3 <apex:inputField id="contactLastName" value="{!contact.lastName}"/> 4 <apex:inputField id="contactPhone" value="{!contact.phone}"/> 5</apex:pageBlockSection>
前のコードの抜粋に含まれる最初の <apex:inputField> タグの value 属性は、コントローラの getContact メソッドから返された取引先責任者レコードの firstName 項目にユーザの入力を割り当てます。

ページは次のようになります。

新規顧客商談ウィザードのステップ 1 新規顧客商談ウィザードのステップ 1 2 つのセクション [取引先情報] と [取引先責任者情報] を表示

商談ウィザードのステップ 2

次のコードは、ウィザードの 2 ページ目 (opptyStep2) を定義します。このページでは、商談に関するデータをユーザから収集します。

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page controller="newOpportunityController" tabStyle="Opportunity">
18  <script>
19  function confirmCancel() {
20      var isCancel = confirm("Are you sure you wish to cancel?");
21      if (isCancel) return true;
22  
23     return false;
24  }  
25  </script>
26  <apex:sectionHeader title="New Customer Opportunity" subtitle="Step 2 of 3"/>
27  <apex:form>
28    <apex:pageBlock title="Opportunity Information" mode="edit">
29      <apex:pageBlockButtons>
30        <apex:commandButton action="{!step1}" value="Previous"/>
31        <apex:commandButton action="{!step3}" value="Next"/>
32        <apex:commandButton action="{!cancel}" value="Cancel" 
33                            onclick="return confirmCancel()" immediate="true"/>
34      </apex:pageBlockButtons>
35      <apex:pageBlockSection title="Opportunity Information">
36        <apex:inputField id="opportunityName" value="{!opportunity.name}"/>
37        <apex:inputField id="opportunityAmount" value="{!opportunity.amount}"/>
38        <apex:inputField id="opportunityCloseDate" value="{!opportunity.closeDate}"/>
39        <apex:inputField id="opportunityStageName" value="{!opportunity.stageName}"/>
40        <apex:inputField id="contactRole" value="{!role.role}"/>
41      </apex:pageBlockSection>
42    </apex:pageBlock>
43  </apex:form>
44</apex:page>

フォームに [完了予定日]、[フェーズ]、および [取引先責任者の役割] 項目を配置するマークアップは、他の項目と同じですが、<apex:inputField> タグが各項目のデータ型を調べて表示方法を決定します。たとえば、[完了予定日] テキストボックスをクリックするとカレンダーが表示され、そこからユーザが日付を選択できます。

ページは次のようになります。

新規顧客商談ウィザードのステップ 2 新規顧客商談ウィザードのステップ 2 [商談情報] というセクションが表示されます。

商談ウィザードのステップ 3

最後のコードブロックは、ウィザードの 3 ページ目 (opptyStep3) を定義します。このページでは、すべての入力データが表示されます。ユーザは、操作を保存するか、前のステップに戻るかを決定できます。

1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page controller="newOpportunityController" tabStyle="Opportunity">
18  <script>
19  function confirmCancel() {
20      var isCancel = confirm("Are you sure you wish to cancel?");
21      if (isCancel) return true;
22  
23     return false;
24  }  
25  </script>
26  <apex:sectionHeader title="New Customer Opportunity" subtitle="Step 3 of 3"/>
27  <apex:form>
28    <apex:pageBlock title="Confirmation">
29      <apex:pageBlockButtons>
30          <apex:commandButton action="{!step2}" value="Previous"/>
31          <apex:commandButton action="{!save}" value="Save"/>
32          <apex:commandButton action="{!cancel}" value="Cancel" 
33                              onclick="return confirmCancel()" immediate="true"/>
34      </apex:pageBlockButtons>
35      <apex:pageBlockSection title="Account Information">
36        <apex:outputField value="{!account.name}"/>
37        <apex:outputField value="{!account.site}"/>
38      </apex:pageBlockSection>
39      <apex:pageBlockSection title="Contact Information">
40        <apex:outputField value="{!contact.firstName}"/>
41        <apex:outputField value="{!contact.lastName}"/>
42        <apex:outputField value="{!contact.phone}"/>
43        <apex:outputField value="{!role.role}"/>
44      </apex:pageBlockSection>
45      <apex:pageBlockSection title="Opportunity Information">
46        <apex:outputField value="{!opportunity.name}"/>
47        <apex:outputField value="{!opportunity.amount}"/>
48        <apex:outputField value="{!opportunity.closeDate}"/>
49      </apex:pageBlockSection>
50    </apex:pageBlock>
51  </apex:form>
52</apex:page>

ウィザードの 3 ページ目では、テキストを <apex:outputField> タグでページに書き込むだけです。

最後のページは次のようになります。

新規顧客商談ウィザードのステップ 3 新規顧客商談ウィザードのステップ 3 入力されたセクション [取引先情報]、[取引先責任者情報]、および [商談情報] が確認のために表示されます。

Visualforce 開発者ガイド

ウィザードの作成

商談ウィザードコントローラ

商談ウィザードのステップ 1

商談ウィザードのステップ 2

商談ウィザードのステップ 3