進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

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

学習の目的

この単元を完了すると、次のことができるようになります。
  • Visualforce フォームの必須要件を説明する。
  • プラットフォームのビジュアルスタイルを使用する Visualforce フォーム要素と使用しないフォーム要素を区別する。
  • 標準入力フォームタグを 4 つ以上列挙する。
  • レコードを編集および保存する Visualforce フォームを作成する。

Visualforce フォームの概要

データの作成と編集は、あらゆるアプリケーションの基本的な側面です。Visualforce には、新規レコードの作成、レコードの取得、その値の編集、データベースへの変更の保存を実行するページを簡単に作成するために必要なものすべてが用意されています。

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

基本となるフォームを作成する

データを編集するページを作成するには、<apex:form><apex:inputField> を使用します。新しいレコードを作成するか、既存のレコードに加えた変更を保存するには、<apex:commandButton> と標準コントローラに組み込まれた save アクションを組み合わせます。
レコードを編集および更新するページでは、次のすべての操作を実行できる必要があります。
  • 編集するレコードを検索し、データベースから取得する。
  • ページの編集フォームに関連するレコードデータを入力する。
  • 変更後のデータでフォーム登録を受信する。
  • 新しい値を検証する。
  • 有効な変更をデータベースに保存し直す。
  • 新しいデータが正常に保存されたか、エラーが発生したかに関係なく、変更を登録したユーザに適切なメッセージを送信する。

標準コントローラと <apex:form> コンポーネントを使用している場合は、これらのほとんどの処理が Visualforce で自動的に行われます。

まず、基本から始めましょう。

  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://SalesforceInstance/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes のようになります。これで、取引先名がフォーム項目に表示されます。取引先名を編集する基本のフォーム これで、標準コントローラが動作し、レコード ID が有効であることが確認されます。

それほど多くの処理は行いませんが、6 行のマークアップで、取引先名を更新するフル機能のフォームを作成できました。ぜひ試してみてください。

このフォームを理解するうえで重要な点を次に示します。
  • ページでは、<apex:page> コンポーネントで定義された、取引先の標準コントローラが使用されます。
  • <apex:form> は、その中に含まれるすべてをページアクションの一部としてサーバに戻すことができるものにパッケージ化する Visualforce コンポーネントです。データを Salesforce に送信して戻す必要がある場合、その操作はほとんど常に <apex:form> 内で行います。
  • <apex:inputField> は、関連付けられているレコードデータ項目用に画面のフォーム項目を作成します。これを行うには、関連項目を参照する式を value 属性で指定します。ここでは式が {! Account.Name } であり、取引先の [名前] 項目であることが簡単にわかります。
  • 最後に、<apex:commandButton> は、ページのユーザインターフェースにボタンを追加します。このボタンをクリックすると、アクションが起動されます。この場合、起動されるアクションは標準コントローラの save() アクションメソッドです。<apex:inputField> の場合と同様に、<apex:commandButton> をそのアクションに接続するには、<apex:commandButton> の action 属性に提供される式でコールされるアクションメソッドを参照します。

項目の表示ラベルとプラットフォームのスタイル設定を追加する

<apex:pageBlock> および <apex:pageBlockSection> タグ内にフォーム要素を配置して、要素を整理およびグループ化し、フォームにプラットフォームのビジュアルスタイルを採用します。

フォームをよりなじみのあるデザインに変更しましょう。

  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>
    これで、より完全で現実的なフォームになりました。プラットフォームのスタイルが設定された取引先のフォームの編集

<apex:inputField> コンポーネントは、標準またはカスタムオブジェクト項目の種別に基づいて適切な入力ウィジェットを表示します。たとえば、データ項目を表示するために <apex:inputField> タグを使用すると、カレンダーウィジェットがフォーム上に表示されます。ここで業種項目に対して行ったように、選択リスト項目の表示に <apex:inputField> タグを使用すると、代わりにドロップダウンリストが表示されます。

<apex:inputField> は、任意の標準またはカスタムオブジェクト項目のユーザ入力を取得するために使用できます。このタグは、項目が必須または一意であるか、あるいは現在のユーザに表示または編集する権限があるかなど、項目の定義に設定されているすべてのメタデータを順守します。

フォームエラーおよびメッセージを表示する

<apex:pageMessages> を使用して、フォーム処理エラーまたはメッセージを表示します。

必須項目に入力されていない場合や項目値が入力規則に従っていない場合など、問題がある場合は有益なフィードバックをページに表示する必要があります。標準コントローラによって、これらすべての処理が自動的に行われます。ページにメッセージを表示する場所の指定のみが必要になります。

  1. <apex:pageBlock> タグの下に、次の行を追加します。
    <apex:pageMessages/>
  2. 取引先の名前を削除し、空白の名前でレコードを保存します。ページに入力規則エラーが表示されます。ページエラーメッセージが含まれる取引先の編集

このように、<apex:inputField> によって独自の項目のエラーが表示されますが、長いフォームではページ上部の 1 か所にそのページのエラーをすべて表示すると便利です。

フォームが処理されるときに、標準コントローラはすでにページのすべてのメッセージを収集しています。<apex:pageMessages> コンポーネントでは、これらのメッセージを任意の適切な場所に表示できます。

もうひとこと...

便利で有益な Web アプリケーションフォームの作成について学ぶべきことは、他にもたくさんあります。

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

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

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

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