Tune in to Trailblazers Innovate for Salesforce product news,
demos, and latest roadmaps. Register here.
close
進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

レコード、項目、テーブルの表示

学習の目的

この単元を完了すると、次のことができるようになります。
  • 大まかなコンポーネントときめの細かいコンポーネントの違いと、そのどちらを使用する必要があるかの理由を説明する。
  • 反復コンポーネントとは何か、何に使用されるかを説明する。
  • 関連する大まかなコンポーネントを使用して、レコードの詳細と関連リストを表示する。
  • 関連するきめの細かいコンポーネントを使用して、大まかなコンポーネントを置換およびカスタマイズする。

出力コンポーネントの概要

Visualforce には、ページに使用できる約 150 個の組み込みコンポーネントが含まれています。コンポーネントは、ページが要求されたときに HTML、CSS、および JavaScript に変換されます。大まかなコンポーネントでは、1 つのコンポーネントで非常に多くの機能が提供され、ページに多数の情報とユーザインターフェースを追加できます。きめの細かいコンポーネントでは、より焦点を絞った機能が提供され、自分の好みに合わせてページの外観や動作を設計できます。

ここでは、レコードからデータを出力し、参照のみのユーザインターフェースを設計できる出力コンポーネントに焦点を絞ります。

標準コントローラを使用した Visualforce ページの作成

標準コントローラを含む出力コンポーネントを使用して、レコードの詳細に簡単にアクセスして表示できるようにします。

このページでは、多数の異なる出力コンポーネントを試します。まず、ほぼ空白のページを作成しましょう。

  1. 新しい Visualforce ページを作成するには、開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「AccountDetail」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <apex:page standardController="Account">
        {! Account.Name }
    </apex:page>
  3. [Preview (プレビュー)] をクリックして、変更処理中に確認できるページのプレビューを開きます。標準の Salesforce ページヘッダーとサイドバー要素が表示され、ボディには何もない新規ウィンドウが開きます。
  4. プレビューウィンドウで、取引先の ID を URL に追加して Enter キーを押します。URL は、https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes のようになります。これで、取引先名がボディに表示されます。これで、標準コントローラが動作し、レコード ID が有効であることが確認されます。

レコード詳細を表示する

<apex:detail> を使用して、標準コントローラを使用するページにレコード詳細をすばやく追加します。

一部の出力コンポーネントは多くの役割を果たします。これらの「大まかな」コンポーネントはさまざまな機能を提供し、多くの項目、表示ラベル、その他のユーザインターフェース要素を表示します。組み込みの Salesforce ユーザインターフェースでさまざまなページをすばやく作成できます。

  1. {! Account.Name } の行を次のマークアップで置き換えて、その変更を保存します。
    <apex:detail />
    ページが大きく変わりました。1 行のマークアップで、取引先オブジェクトの完全な標準ビューページが再現されています。<apex:detail></apex:detail> コンポーネント

<apex:detail> は、たった 1 行のマークアップで多数の項目、セクション、ボタン、その他のユーザインターフェース要素をページに追加する、大まかな出力コンポーネントです。また、ページに追加されるすべての要素には、Salesforce Classic のスタイル設定が使用されます。<apex:detail> の外観をカスタマイズする属性はたくさんあります。いくつかの属性を変更し、どのように変化するかを確認してみましょう。Lightning Experience のスタイル設定とより連携したページを作成するには、「Visualforce と Lightning Experience」モジュールの「重要なビジュアルデザインの考慮事項について」を参照してください。

個別の項目を表示する

<apex:outputField> を使用して、レコードから個別の項目を表示します。

ページレイアウトをさらに細かく制御する必要がある場合、項目を個別に追加できます。<apex:outputField> コンポーネントは、これを実行するために設計されています。

  1. <apex:detail/> 行を次のマークアップで置き換えます。
    <apex:outputField value="{! Account.Name }"/>
    <apex:outputField value="{! Account.Phone }"/>
    <apex:outputField value="{! Account.Industry }"/>
    <apex:outputField value="{! Account.AnnualRevenue }"/>
    ページに 4 つの項目が追加されます。ただし、この書式設定は多くの場合望ましくありません。すべての項目値は、表示ラベルや他の書式設定なしで 1 行に表示されます。これは理想的ではなく、自動的にプラットフォームのスタイル設定を使用する <apex:detail> および <apex:relatedList> コンポーネントとは対照的です。<apex:outputField> 単独では、項目の値のみが出力されます。ただし、<apex:pageBlock> および <apex:pageBlockSection> コンポーネントでラップすると、この動作は大幅に変更されます。
  2. <apex:outputField> 行を <apex:pageBlock> および <apex:pageBlockSection> コンポーネントでラップし、マークアップを次のようにします。
    <apex:pageBlock title="Account Details">
        <apex:pageBlockSection>
            <apex:outputField value="{! Account.Name }"/>
            <apex:outputField value="{! Account.Phone }"/>
            <apex:outputField value="{! Account.Industry }"/>
            <apex:outputField value="{! Account.AnnualRevenue }"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
    これで改善されました。ページブロック内の出力項目<apex:pageBlock> および <apex:pageBlockSection> コンポーネントは、プラットフォームのデザインを適用するために必要です。<apex:pageBlockSection> 内で <apex:outputField> を使用すると、2 列のレイアウトが適用され、項目の表示ラベルが追加されて、項目と表示ラベルが適切に整列およびスタイル設定されます。

<apex:outputField> は 1 つの項目のみを出力するため、きめの細かいコンポーネントのように見えますが、実際には非常に多機能です。他の特定のコンポーネント内で使用されているかどうかが認識され、出力とスタイル設定が適切に変更されます。また、書式設定と表示も調整されます。ここでは、年間売上項目の書式が通貨に設定されています。<apex:outputField> は、表示される項目のデータ型に自動的に適合します。ページに日付、チェックリスト、または選択リスト項目を追加し、結果を確認してみてください。

テーブルを表示する

<apex:pageBlockTable> を使用して、ページにデータのテーブルを追加します。
関連リストとは何か、<apex:relatedList> をページに追加すると何ができるかついて次に示します。
  • 類似したデータ要素のリストを取得します。たとえば、取引先の取引先責任者のリストなどがあります。
  • 各項目の列、各列の上のヘッダーなどを含むテーブルを設定します。
  • リスト内の各項目 (各関連取引先責任者) に対して、行をテーブルに追加し、そのレコードから各列に適切な項目を入力します。

同様の処理を、独自の Visualforce マークアップで反復コンポーネントを使用して実行できます。反復コンポーネントは、1 つの値ではなく類似した項目のコレクションと連動します。たとえば、{!Account.contacts} は、取引先の取引先責任者リストを評価する式です。この式を反復コンポーネントと併用して、これらの関連取引先責任者の詳細を含むリストまたはテーブルを作成できます。

  1. 2 つの <apex:relatedList/> 行を次のマークアップで置き換えます。
    <apex:pageBlock title="Contacts">
       <apex:pageBlockTable value="{!Account.contacts}" var="contact">
          <apex:column value="{!contact.Name}"/>
          <apex:column value="{!contact.Title}"/>
          <apex:column value="{!contact.Phone}"/>
       </apex:pageBlockTable>
    </apex:pageBlock>
    取引先の取引先責任者がリストされたテーブルがページに追加されます。選択した列のみが含まれています。pageBlockTable を使用した取引先責任者リスト
<apex:pageBlockTable> は、プラットフォームのスタイル設定が適用されたデータテーブルを生成する反復コンポーネントです。マークアップでの処理を次に示します。
  • <apex:pageBlockTable> の value 属性は、前述の式 {!Account.contacts} に設定されています。これは <apex:pageBlockTable> で操作するレコードのリストです。
  • そのリストの各レコードに対して 1 レコードずつ、<apex:pageBlockTable> はレコードを <apex:pageBlockTable> の var 属性で指定された変数に割り当てます。この場合、変数には contact が指定されます。
  • 各レコードに対して、<apex:pageBlockTable><apex:pageBlockTable> ボディ内の一連の <apex:column> コンポーネントで定義された行を使用して、テーブルに新しい行を作成します。<apex:column> コンポーネントは、現在のレコードを表す contact 変数を使用して、そのレコードの項目値を順に取得します。
  • ループの外側で、<apex:pageBlockTable><apex:column> コンポーネントの項目を使用して、各項目の表示ラベルを調べることで列ヘッダーを作成します。

これは非常に複雑で、最初は反復コンポーネントを理解することは難しいかもしれません。この時点でできることは、自分自身で作成してみることです。まず、<apex:pageBlockTable> を使用して、商談関連レコードのリストをページに追加し、テーブルに表示する項目を選択します。<apex:pageBlockTable> および <apex:column> の別の属性を調べて、慣れるまで試してみてください。

もうひとこと...

大まかなコンポーネントでは、多数の機能をページにすばやく追加できますが、きめの細かいコンポーネントでは、ページ内の特定の詳細を制御できます。

<apex:enhancedList> および <apex:listViews> は、<apex:relatedList> と併用するかこの代わりに使用すると役立つ、別の大まかなコンポーネントです。1 つのタグで多数の機能を使用できる、その他の多くのコンポーネントがあります。まだ未確認の場合は、「標準コンポーネントの参照」で幅広い可能性を確認してください。

<apex:pageBlockTable> は、Salesforce Classic のスタイル設定を適用する反復コンポーネントです。<apex:dataTable> および <apex:dataList> は、スタイル設定なしのテーブルとリストを作成する反復コンポーネントです。<apex:repeat> は、レコードのコレクション用の任意のマークアップを生成するために使用できる反復コンポーネントです。

手動で作成した関連リストでは、<apex:relatedList> で作成されたテーブルに追加された内容の一部が不足しています。たとえば、個別のレコードを編集および削除する [編集] および [削除] リンクや、[新規取引先責任者] ボタンがありません。これらのユーザインターフェース要素を作成するには、特にフォームやアクションに関するある程度の Visualforce の知識が必要です。これについては、別の場所で説明します。