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

はじめに

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

前回は一覧を作りました。

データを画面から登録できるようにしましょう。

画面上部にテキストボックスを３つ用意。
id, name, value の各値を設定できるようにします

Visualforce ページ

①にて、データを登録する欄を用意します。

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:form > <!-- ① -->
    <apex:inputText value="{!addId}"/>
    <apex:inputText value="{!addName}"/>
    <apex:inputText value="{!addValue}"/>
    <apex:commandButton action="{!addList}"  value="Add"/>
  </apex:form>
  
  <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>

apex クラス

②で、画面とのやり取りをする変数を用意。
③にて、add ボタンをクリックしたときの処理を記載。

YMYN_ListViewTest.cls

public with sharing class YMYN_ListViewTest {

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

    // リスト追加用変数　②
    public String addId {get; set;}
    public String addName {get; set;}
    public Integer addValue {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;
    }

    /**
     * addボタンを押したときの処理　③
     * 画面から渡された、this.addId, this.addName, this.addValue から YMYN_ListViewTestBean を生成し、List (this.listBean) に追加。
     */
    public void addList() {
        this.listBean.add(getInstance(this.addId, this.addName, this.addValue));
    }


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

追加ボタンから、データの追加する方法を記載することができました。
SOQLでINSERTやUPDATE、UPSERTすることで、オブジェクトに書き込むこともできるようになります。