フォームを使用したデータの入力

ここでは、標準コントローラーを <apex:form> コンポーネントと、わかりやすいフォーム要素とを組み合わせて、かなり洗練されたレコード編集ページを作成します。

1. 新しい Visualforce ページを作成するには、開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「AccountEdit」と入力します。
2. エディターで、任意のマークアップを次のように置き換えます。

   <apex:page standardController="Account">
       <h1>Edit Account</h1>
       <apex:form>
           <apex:inputField value="{! Account.Name }"/>
           <apex:commandButton action="{! save }" value="Save" />
       </apex:form>
   </apex:page>

3. [Preview (プレビュー)] をクリックして、変更処理中に確認できるページのプレビューを開きます。新しいウィンドウが開き、ボディに 1 つの空の項目を含むフォームが表示されます。
4. プレビューウィンドウで、取引先の ID を URL に追加し、Enter キーを押します。URL は、https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes のようになります。これで、取引先名がフォーム項目に表示されます。 これで、標準コントローラーが動作し、レコード ID が有効であることが確認されます。

1. <apex:form> コンポーネント内の <apex:pageBlock> タグと <apex:pageBlockSection> タグで 2 つのフォーム要素をラップし、マークアップを次のようにします。

   <apex:page standardController="Account">
       <apex:form>
       <apex:pageBlock title="Edit Account">
           <apex:pageBlockSection>
               <apex:inputField value="{! Account.Name }"/>
           </apex:pageBlockSection>
           <apex:pageBlockButtons>
               <apex:commandButton action="{! save }" value="Save" />
           </apex:pageBlockButtons>
       </apex:pageBlock>
       </apex:form>
   </apex:page>

   このバージョンのフォームのスタイル設定は非常に変わっています。出力コンポーネントと同様に、<apex:pageBlock> タグと <apex:pageBlockSection> タグ内で入力コンポーネントを使用すると、プラットフォームのビジュアルスタイル設定が採用されます。
2. 取引先名項目の下にさらに 3 つの項目を追加し、マークアップを次のようにします。

   <apex:pageBlockSection columns="1">
       <apex:inputField value="{! Account.Name }"/>
       <apex:inputField value="{! Account.Phone }"/>
       <apex:inputField value="{! Account.Industry }"/>
       <apex:inputField value="{! Account.AnnualRevenue }"/>
   </apex:pageBlockSection>

   これで、より完全で現実的なフォームになりました。

1. <apex:pageBlock> タグの下に、次の行を追加します。

   <apex:pageMessages/>

2. 取引先の名前を削除し、空白の名前でレコードを保存します。ページに入力規則エラーが表示されます。

1. 既存の </apex:pageBlock> 終了タグの下に、次のマークアップを追加します。

   <apex:pageBlock title="Contacts">
       <apex:pageBlockTable value="{!Account.contacts}" var="contact">
           <apex:column>
               <apex:outputLink
                   value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                   Edit
               </apex:outputLink>
               &nbsp;
               <apex:outputLink
                   value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                   Del
               </apex:outputLink>
           </apex:column>
           <apex:column value="{!contact.Name}"/>
           <apex:column value="{!contact.Title}"/>
           <apex:column value="{!contact.Phone}"/>
       </apex:pageBlockTable>
   </apex:pageBlock>

   取引先編集フォームの下に、取引先の取引先責任者のリストが表示されます。
2. 取引先責任者の [編集] リンクをクリックします。リンク先を確認します。変更を保存した場合や、そのページで [キャンセル] をクリックした場合の動作を確認します。

まず始めに、Visualforce では、<apex:inputField> だけでなく数十個の入力コンポーネントが提供されます。<apex:inputField> は標準コントローラーと適切に連動し、レコードデータを直接編集するために使用します。独自のカスタムコントローラーコードを使用しているページの場合、またはフォーム入力がレコードの項目に直接対応付けられていない場合、その他いくつかのコンポーネントについて知っておくと役立ちます。これらのコンポーネントのほとんどは名前が apex:input で始まり、コンポーネントの参照でまとめて検索できます。選択リストやラジオボタンコントロールの場合、代わりに名前が apex:select で始まるコンポーネントを検索します。

モバイルデバイス用のユーザーインターフェースの場合は、<apex:input> を確認します。このコンポーネントは HTML5 ページで使用するために設計されており、入力ユーザー要素をモバイルで使いやすくするさまざまな機能を使用できます。

ここで記述したコードは、ページの標準コントローラーで提供される多数のアクションを利用しています。これらは標準アクションと呼ばれ、標準アクションは多数あります。標準コントローラーのすべてのオブジェクトで使用可能な主要セットがありますが、組み込み標準オブジェクトの多くでは追加アクションを使用できます。

アクションについては、ここですでに既存の関連取引先責任者を編集・削除するアクションを追加しました。新しい関連取引先責任者の作成機能を追加するにはどうすればよいでしょうか。edit と delete で行ったように、create アクションを使用して簡単にリンクを作成できるわけではありません。これは、これまでのアクションがすでに関連取引先へのリレーションのある既存のレコードを操作していたことが理由です。一方、新規レコードを作成する場合は、そのリレーションを独自に作成する必要があります。そのためには、独自のカスタムコントローラーコードを記述することが必要です。

• ページでの入力コンポーネントの使用
• 標準コントローラーアクションの使用
• $Action グローバル変数の有効な値
• 標準コントローラー