Visualforce 開発者ガイド
jリモートオブジェクトの単純な例
次の簡潔な例は、リモートオブジェクトを使用するために実装が必要な 2 つの機能を示しています。
この Visualforce ページは、ユーザーが [倉庫を取得] ボタンをクリックすると、10 件の Warehouse レコードのリストを取得してページに表示します。
1<apex:page>
2
3 <!-- Remote Objects definition to set accessible sObjects and fields -->
4 <apex:remoteObjects >
5 <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse"
6 fields="Name,Id">
7 <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
8 </apex:remoteObjectModel>
9 </apex:remoteObjects>
10
11 <!-- JavaScript to make Remote Objects calls -->
12 <script>
13 var fetchWarehouses = function(){
14 // Create a new Remote Object
15 var wh = new SObjectModel.Warehouse();
16
17 // Use the Remote Object to query for 10 warehouse records
18 wh.retrieve({ limit: 10 }, function(err, records, event){
19 if(err) {
20 alert(err.message);
21 }
22 else {
23 var ul = document.getElementById("warehousesList");
24 records.forEach(function(record) {
25 // Build the text for a warehouse line item
26 var whText = record.get("Name");
27 whText += " -- ";
28 whText += record.get("Phone");
29
30 // Add the line item to the warehouses list
31 var li = document.createElement("li");
32 li.appendChild(document.createTextNode(whText));
33 ul.appendChild(li);
34 });
35 }
36 });
37 };
38 </script>
39
40 <h1>Retrieve Warehouses via Remote Objects</h1>
41
42 <p>Warehouses:</p>
43
44 <ul id="warehousesList">
45 </ul>
46 <button onclick="fetchWarehouses()">Retrieve Warehouses</button>
47
48</apex:page>この例の最初の部分が、ページでのアクセスを可能にするオブジェクトおよび項目を指定するリモートオブジェクトコンポーネントです。
1<apex:remoteObjects >
2 <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" fields="Name,Id">
3 <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
4 </apex:remoteObjectModel>
5</apex:remoteObjects>この例の 2 番目の部分は、アクセス定義コンポーネントによって生成されるモデルを使用してページに表示するレコードセットを取得する JavaScript 関数です。
1<!-- JavaScript to make Remote Objects calls -->
2<script>
3 var fetchWarehouses = function(){
4 // Create a new Remote Object
5 var wh = new SObjectModel.Warehouse();
6
7 // Use the Remote Object to query for 10 warehouse records
8 wh.retrieve({ limit: 10 }, function(err, records, event){
9 if(err) {
10 alert(err.message);
11 }
12 else {
13 var ul = document.getElementById("warehousesList");
14 records.forEach(function(record) {
15 // Build the text for a warehouse line item
16 var whText = record.get("Name");
17 whText += " -- ";
18 whText += record.get("Phone");
19
20 // Add the line item to the warehouses list
21 var li = document.createElement("li");
22 li.appendChild(document.createTextNode(whText));
23 ul.appendChild(li);
24 });
25 }
26 });
27 };
28</script>2 番目の行は新しい倉庫オブジェクトを使用して、wh、倉庫レコードにクエリを実行します。コールは、2 つの引数を提供します。1 つは単純なクエリの指定子で、もう 1 つは結果を処理するための匿名関数です。関数は標準の JavaScript です。結果を反復処理し、リスト項目を作成して、ページの倉庫リストに追加します。
ページの本文は静的 HTML です。
1<h1>Retrieve Warehouses via Remote Objects</h1>
2
3<p>Warehouses:</p>
4
5<ul id="warehousesList">
6</ul>
7<button onclick="fetchWarehouses()">Retrieve Warehouses</button>