【Salesforce】Visualforceのapex:actionFunctionでページの部分書き換えを試してみた

はじめに

こんにちは植木和樹＠上越妙高オフィスです。本日はSalesforceでのカスタムページ作成機能であるVisualforceを使って、ページの一部分だけを書き換える処理について調べてみました。

仕組みの解説

ページの部分書き換えでポイントとなるのは<apex:actionFunction>というタグになります。

• apex:actionFunction | Visualforce 開発者ガイド | Salesforce Developers

<apex:actionFunction>の属性である、name, reRender, status を用いることで、フォームへの値の入力などのイベントを受け取って、ページの一部を書き換えるという動きを作ることができます。

1. （青）チェックボックスを変更した際に <apex:actionFunction>のnameで指定した関数を呼び出す
2. （緑）<apex:actionFunction>が処理開始前にstatusで指定されたのコンポーネントを表示する
3. （赤）reRenderで指定されたコンポーネントを書き換える
4. （橙）出力する値はコントローラーより取得される（ページ再読込なし）

Visualforce + APEXコード

サンプルコードはgistにアップしました。コントローラーとなるAPEXコードとVisualforceページをSalesforceに作成してください。

dynamicActionページを表示すると、下記画像のような動きが確認できます。チェックボックスをオンオフしたり、フィールドの値を変更すると合計金額が動的に書き換わります。

まとめ

当初Visualforceで生成されるHTMLをみながらjQueryを使って「チェックされたチェックボックスと同じ行にある価格列をセレクタで探して、値部分の文字列を取り出して、合計して、合計金額を表示しているコンポーネントの文字列を書き換える・・・」ということを試してみたのですが、コードがグチャグチャになり早々に諦めました。

試しにapex:actionFunctionを使ってみたところ1時間ほどでページの一部分だけを書き換える動作を作ることができました。Visualforceの各種タグはとても良くできているので、変にJavaScriptでがんばらず標準機能に任せた方が簡単で保守しやすいコードになりますね。