はじめに

Salesforce Apex + Visualforce ページでよく画面を作るのですが
どのように書くか（特にVisualforceページの書き方が) わからなくなるので
いつでもコピペできるように、コードなどを残しておこうと思います。

こんな画面を作って行こうと思います。

取引先オブジェクトなどからレコードを取得するにはSOQLを利用しますが
レコード取得部分まで書くと内容が広がるので、そこは含めません。

Visualforce の <apex:dataTable>、<apex:column>、<apex:facet>を利用します。
このあたりのサンプルコードを記載しておきます。

クラス名などは、ご利用に応じて適宜変更してください。

Apexクラス

このサンプルは、極力簡単に判りやすい内容にしています。
画面への返却する値として、オリジナルのデータ(YMYN_ListViewTestBean) を返すようにしています。
これを「取引先オブジェクト」や「カスタムオブジェクト」の型に変更しても良いです。

YMYN_ListViewTest.cls

public with sharing class YMYN_ListViewTest {

    // Visualforce ページとのやり取りする変数
    public List<YMYN_ListViewTestBean> listBean {get; set;}

    /**
     * コンストラクタ
     * Visualforce ページに返すListを生成する。
     */
    public YMYN_ListViewTest() {
        this.listBean = new List<YMYN_ListViewTestBean>();

        this.listBean.add(YMYN_ListViewTest.getInstance('id001', 'name001', 100));
        this.listBean.add(YMYN_ListViewTest.getInstance('id002', 'name002', 200));
        this.listBean.add(YMYN_ListViewTest.getInstance('id003', 'name003', 300));
        this.listBean.add(YMYN_ListViewTest.getInstance('id004', 'name004', 400));
        this.listBean.add(YMYN_ListViewTest.getInstance('id005', 'name005', 500));
    }

    /**
     * YMYN_ListViewTestBean インスタンスを生成するSingletonメソッド
     */
    public static YMYN_ListViewTestBean getInstance(String id, String name, Integer value) {
        YMYN_ListViewTestBean bean = new YMYN_ListViewTestBean();
        
        bean.id = id;
        bean.name = name;
        bean.value = value;

        return bean;
    }

    /**
     * 画面に返却する値
     */ 
    class YMYN_ListViewTestBean {
        public String id {get; set;}
        public String name {get; set;}
        public Integer value {get; set;}
    }
}

Visualforce ページ

① controller として、呼び出す Apexクラスを指定します。
② <apex:dataTable> を呼び出します。value として apex で public で指定した List の変数を指定します。
- また、一行の情報として row と言う変数名を定義します。
③ 1列分の情報を用意します。
④ ②で定義した一行の情報 row から表示したい値を取り出します。{!row.id}

YMYN_ListViewTest.vfp

<apex:page controller="YMYN_ListViewTest">     <!-- ① -->
  <style>
    .def   {font-family:'メイリオ', 'Meiryo'; font-size:12px;}
    .odd   {background-color: #FFFFFF;}
    .even  {background-color: #DDFFFF;}

    table {
      border-spacing: 1;
      border: 1px solid;
    }
    th {
      border-spacing: 2;
      border: 1px solid;
    }
    td {
      border-spacing: 2;
      border: 1px solid;
    }
  </style>

  <apex:dataTable value="{!listBean}" var="row" id="theTable" rowClasses="odd,even">     <!-- ② -->

    <apex:column styleClass="def">     <!-- ③ -->
      <apex:facet name="header">
        <apex:outputText value="id" styleClass="def"/>
      </apex:facet>
      <apex:outputText value="{!row.id}" styleClass="def"/>     <!-- ④ -->
    </apex:column>

    <apex:column styleClass="def">
      <apex:facet name="header">
        <apex:outputText value="name" styleClass="def"/>
      </apex:facet>
      <apex:outputText value="{!row.name}" styleClass="def"/>
    </apex:column>

    <apex:column styleClass="def">
      <apex:facet name="header">
        <apex:outputText value="value" styleClass="def"/>
      </apex:facet>
      <apex:outputText value="{!row.value}" styleClass="def"/>
    </apex:column>

  </apex:dataTable>
</apex:page>

実行結果

参考資料