Apex+VisualforceでAccountオブジェクトのCRUDとページングクエリーUーAccountを更新（005）

Accountの更新機能でございますね。

またはAccountレコードIDを取得できる場合は、大丈夫だと思います。

「Edit」をクリックすると、別のページに移動しますね、新しく編集画面を開いて、別のAPEXでコントロールします。

最終的な画面イメージ

一番上の取引先：Test前の「Edit」をクリックする、

編集画面へ、以下の通りです。

「Save」ボタンを押下する、Account一覧画面に戻ります。

Visualforce1.vfp



<apex:page controller="Apex1" showHeader="false" sidebar="false">
       <script>
        function doDeleteJs(accid) {
            if (window.confirm("削除してよろしいでしょうか。")) {
                doDeleteFn(accid);
            }
        }
        function doEditJs(accid) {
           var url="./EditAccountList_PAGE?core.apexpages.request.devconsole=1&Id="+accid;
               window.location.href =url;
        }

    </script>
 <style type="text/css">
   /* footer右へ表示*/
   .footer{
     text-align: right;
   }
 </style>

   <apex:sectionHeader subtitle="Account表示一覧" title="Account"/>
       <apex:form id="formId2">
       <apex:pageMessages id="message2"/>
         <apex:pageBlock title="Add Account">
            <apex:pageBlockButtons location="both">
                <apex:commandButton value="Save" action="{!save}" reRender="pageBlockTable,formId2" />
                <apex:commandButton value="Cancel" action="{!cancel}" reRender="pageBlockTable,formId2,pb2" />
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="Account Details" columns="1" id="pb2">
                <apex:inputField value="{!act.name}" />
                <apex:inputField value="{!act.Type}"/>
                <apex:inputField value="{!act.Industry}"/>
                <apex:inputField value="{!act.Phone}"/>
            </apex:pageBlockSection>
          </apex:pageBlock>
     </apex:form>

     <apex:form id="formId">
       <apex:pageMessages id="message"/>
         <apex:actionFunction name="doDeleteFn" action="{!doDelete}" reRender="formId" >
            <apex:param name="id" value="" />
        </apex:actionFunction>
     <apex:pageBlock >
       <apex:outputPanel id="showpanel">
         <apex:pageBlockTable value="{!accounts}" var="acc" footerClass="footer" id="pageBlockTable">
           <apex:column headerValue="Action"  width="70px">
                 <apex:commandLink value="" onclick="doEditJs('{!acc.Id}');" style="color:#015ba7;" id="edit" reRender="formId,message,showpanel,buttons,pageBlockTable,foo">
                      Edit
                 </apex:commandLink>
                 &nbsp;|&nbsp;
                 <apex:commandLink value="" onclick="doDeleteJs('{!acc.Id}');" style="color:#015ba7;"  id="del" reRender="formId,message,showpanel,buttons,pageBlockTable,foo">
                     Del
                 </apex:commandLink>
           </apex:column>
           <apex:column headerValue="取引先名"  >
                <apex:outputlink value="https://ap2.salesforce.com/{!acc.id}" target="_blank" >{!acc.Name}</apex:outputlink>
           </apex:column>
           <apex:column value="{!acc.Type}" />
           <apex:column value="{!acc.Industry}" />
           <apex:column value="{!acc.Phone}" />
         </apex:pageBlockTable>
       </apex:outputPanel>
     </apex:pageBlock>
   </apex:form>
 </apex:page>

説明：

①onclick=”doEditJs(‘{!acc.Id}’);”

!acc.Id：レコードIDを取得できる、doEditJs：JSのメソッド名を呼び出し。

②function doEditJs(accid)

「Edit」をクリックする時、doEditJs(accid)を呼び出し、レコードIDを渡して。

③var url=”./EditAccountList_PAGE?core.apexpages.request.devconsole=1&Id=”+accid;

Account編集画面へのURLですね、最後のレコードIDも持っている。

④window.location.href =url;

https://www.w3schools.com/js/js_window_location.asp

具体的なURLを設定して、画面に移動します。

EditAccountList＿PAGE.vfp



<apex:page controller="EditAccountList_CTRL">
    <apex:form >
        <apex:pageBlock title="Edit Account" id="accounts_Edit">
            <apex:pageBlockSection columns="1">
            <!--getContactDetailメソッドによって返されるパラメーターと、表示するフィールドを直接呼び出します-->
                <apex:inputField value="{!accountDetail.Name }"/>
                <apex:inputField value="{!accountDetail.Type }"/>
                <apex:inputField value="{!accountDetail.Industry }"/>
                <apex:inputField value="{!accountDetail.Phone }"/>
            </apex:pageBlockSection>

            <apex:pageBlockButtons >
            <!--2つのボタンを定義し、2つのメソッドをバインドする-->
                <apex:commandButton action="{!save }" value="Save" />
                <apex:commandButton action="{!cancel}" value="Cancel" />
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

EditAccountList＿CTRL.apxc



public class EditAccountList_CTRL {
    //Account一覧画面からのaccountIdを格納
    private String Id = null;
    //Idを通して、Accountの情報を取得
    private Account accountDetail {get;set;}

    //コンストラクター
    public  EditAccountList_CTRL (){
        //Account一覧画面からのaccountIdを取得
        Id = ApexPages.currentPage().getParameters().get('Id');
        //SOQL
        if(Id!=null){
           accountDetail = [SELECT Id,Name,Type,Industry,Phone FROM Account WHERE Id=:Id ];
        }
    }

    //変数Account accountDetail のgetメソッド
    public Account getAccountDetail(){
        return accountDetail;
    }

     //ページに戻るために使用
    public PageReference save(){
        //ページのフィールドはこのクラスで見つかったAccountにバインドされているため
        update accountDetail;

        //元のページに戻ります
        String url = '/apex/Visualforce1?&Id='+accountDetail.Id;
        PageReference pageRef  = new PageReference(url);
        return pageRef;
    }
    //保存とキャンセルの唯一の違いは、データを更新することと更新しないことです。
    public PageReference cancel(){
        String url = '/apex/Visualforce1?&Id='+accountDetail.Id;
        PageReference pageRef  = new PageReference(url);
        return pageRef;
    }

}

説明：

特には写真通りです。

Account編集の流れ：

Account一覧画面から、レコード前のEditをクリックする（レコードIDを持って）、編集画面に移動し（URL、デフォルトでそのレコードIDと同じのデータを取得し）、値を修正して、SaveとかCancelボタンを押下すると（updateとか、キャンセルとか、Account一覧画面のURL）、また更新したAccount一覧画面に戻ります。

以上となります。

何か問題がございましたら、コメントを頂れば幸せです。