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

#Salesforce

植木和樹

2017.04.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

仕組みの解説

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

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

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

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

Visualforce + APEXコード

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

	<apex:page controller="DynamicActionController">
	<apex:form >
	<apex:actionFunction name="refreshResults" reRender="searchResults" status="searchStatus"/>

	<apex:dataTable value="{!records}" var="rec" >
	<apex:column >
	<apex:inputCheckbox value="{!rec.checked}" onchange="return refreshResults()"/>
	</apex:column>
	<apex:column style="text-align:right;">
	<apex:inputText value="{!rec.value}" onchange="return refreshResults()"/>
	</apex:column>
	</apex:dataTable>

	<apex:outputPanel id="searchResults">
	<apex:actionStatus id="searchStatus" startText="合計値を再計算しています..."/>
	<apex:outputText value="{0, number, ###,###}">
	<apex:param value="{!total}"/>
	</apex:outputText> 円
	</apex:outputPanel>

	</apex:form>
	</apex:page>

view raw dynamicAction.page hosted with ❤ by GitHub

	public with sharing class DynamicActionController {
	public class MyClass {
	public Decimal value {get; set;}
	public Boolean checked {get;set;}

	public MyClass(Decimal value) {
	this.checked = false;
	this.value = value;
	}
	}
	public List<MyClass> records {get;set;}

	public DynamicActionController() {
	this.records = new List<MyClass>();
	this.records.add(new MyClass(10000));
	this.records.add(new MyClass(2345));
	}

	public Decimal getTotal() {
	Decimal total = 0;
	for(MyClass o : this.records) {
	if (o.checked) { total += o.value; }
	}
	return total;
	}

	}

view raw DynamicActionController.cls hosted with ❤ by GitHub

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

まとめ

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

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