Visualforce上でAjax動作の備忘録

プログラム説明

VisualfroceからAjaxの呼び出しを確認するために簡単な画面を作成
左側側に取引先のNameの一覧を表示
左側に、Nameにマウスオーバさせた取引先の詳細情報を表示する
リファレンスのサンプルソースをちょっといじっただけ。

ロジック

左側ロジック

標準リストコントローラを利用。
recordSetVarで取引先の標準リストコントローラを指定し、DataTableで取引先の一覧を表示。
outputPanelでAjaxの動作する領域を確保。
actionSupportを利用して、オンマウスしたタイミングで、
paramに、Onmouseoverで選択された取引先のid情報を格納する。
reRenderでAjax要求の結果の更新先のIdを指定

右側ロジック

actionStatusでAjaxの状況を表示。
outputPanelでAjaxの結果を表示する領域を確保。idはactionSupportで指定したreRenderと同じ値とする。
detailで取引先の詳細画面を表示。Subjectで表示対象のidを指定。

ソース

<apex:page standardController="Account" recordSetVar="accounts" tabstyle="account" sidebar="false">
    <table width="100%">
        <tr>
            <!--左側　取引先の一覧-->
            <th width="30%">
                <apex:pageBlock >
                    <apex:form >
                        <apex:pageBlockTable value="{!accounts}" var="a">
                            <apex:column >
                                <apex:outputPanel >
                                    <apex:actionSupport event="onmouseover" reRender="detail">
                                        <apex:param name="ac" value="{!a.id}"/>
                                    </apex:actionSupport>
                                    {!a.name}
                                </apex:outputPanel>
                            </apex:column>
                        </apex:pageBlockTable>
                    </apex:form>
                </apex:pageBlock>
            </th>
            <!--右側　詳細画面-->
            <th width="70%">
                <apex:outputPanel id="detail">
                    <apex:actionStatus startText="リクセスト中">
                        <apex:facet name="stop">
                            <apex:detail subject="{!$CurrentPage.parameters.ac}" relatedList="false" title="false"/>
                        </apex:facet>
                    </apex:actionStatus>
                </apex:outputPanel>
            </th>                
        </tr>
    </table>
</apex:page>

結果

マウスオーバで詳細画面がでている。
ロード時間が短いせいか、actionStatusで指定したメッセージは確認できず。
ブラウザのデベロッパーツールで通信を見ると、取引先の名前にマウスオーバしたタイミングでPOSTでリクエストがちゃんと飛んでる見たい。
Classic、LEX動作　共に正常に動作

参考　Visualforce 開発者ガイド
https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_quick_start_ajax.htm