【自分メモ】Salesforce Apex でデータを取得して、Visualforce に一覧表として表示する (1)

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

こんな画面を作って行こうと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/af2c2265-555b-fd3e-c5e4-ec99344f0eea.png)

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

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

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

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

``` apex: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}`

``` html: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>
```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/af2c2265-555b-fd3e-c5e4-ec99344f0eea.png)


# 参考資料

* apex:dataTable
    * https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_dataTable.htm

* apex:column
    * https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_column.htm

* apex:facet
    * https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_facet.htm