Visualforce, Use Repeat Tag

Visualforce では、Controller とバインドして Salesforce から取得したデータなどを動的にページへ反映させることもできます。{!xxx} という差し込み項目と同じフォーマットで値を反映させることができますが、タグを利用し、繰り返しの処理を行うことで表の中に Salesforce から取得してきたデータを反映させることできます。たとえば、下記のように < apex:repeat >タグを使って商談名を縦に表示できます。


< !-- visualforce -- >
< apex:repeat value="{!deals}" var="opp" >
< p >"{!opp.name}"< /p >
< /apex:repeat >

< !-- controller -- >
public class MatrixCreator{
/** queries Opportunity data and return them */
public Opportunity[] getDeals() {
Opportunity[] opps = [ SELECT Id, Name FROM Opportunity ];
return opps;
}
}


Visualforce タグが誕生する前は、ajax にて select の返り値の result.size() 文だけ for 文などのループを回す必要がありました。Visualforce タグにより、コードが簡潔になるだけでなく、クライアントサイドの ajax の処理がなくなるため、パフォーマンスが一定に近づきます。


さらに、html のテーブル(table, tr, td)も書けるのですが、ここでは google chart api を呼び出すサンプルとします。

< !-- Visualforce Page -- >
< apex:page showheader="false" controller="MatrixCreator">
< script type="text/javascript" src="http://www.google.com/jsapi">< /script>

< script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);

function drawTable() {
var gdata = new google.visualization.DataTable();
gdata.addColumn('string', 'Name');
gdata.addColumn('number', 'Amount');
gdata.addColumn('string', 'Phase');
gdata.addColumn('string', 'Account');
gdata.addRows({!size});

var i = 0;


gdata.setCell(i, 0, "{!opp.name}");
gdata.setCell(i, 1, {!opp.amount}, '￥' + new Number("{!opp.amount}"));
gdata.setCell(i, 2, "{!opp.stagename}");
gdata.setCell(i++, 3, "{!opp.account.name}");


var table = new google.visualization.Table(document.getElementById('opp_amount_ranking'));
table.draw(gdata, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert(gdata.getValue(row, 0));
});
}
< /script>
< /apex:page>

< !-- controller -- >
public class MatrixCreator{
/** queries Opportunity data and return them */
public Opportunity[] getDeals() {
Opportunity[] opps = [ SELECT Id, Name, Amount, StageName, CloseDate, Probability, OwnerId, AccountId, Account.Name FROM Opportunity ORDER BY amount DESC NULLS LAST Limit 10 ];
return opps;
}
}