apex:remoteObjectsの使い方

apex:remoteObjectsはSpring'14のバージョンでパイロットリリースされたapex:タグです。これを使うとAPI制限を気にせずにJavaScript内からSalesforceのオブジェクトにアクセスすることができます。

![スクリーンショット 2014-05-05 20.19.06.png](https://qiita-image-store.s3.amazonaws.com/0/8407/480d5810-cf5d-3552-b35d-c8536a2cb2a6.png)

#remoteObjectsの宣言方法
取引先オブジェクトにアクセスしたい場合は次のように宣言します。これで取引先のName,Id,Phoneの項目に対してアクセスできます。

```html
<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Name,Id">
    <apex:remoteObjectField name="Phone" jsShorthand="Phone"/>
  </apex:remoteObjectModel>
</apex:remoteObjects>
```

上のようにremoteObjectsを使う場合は次の3つのタグを宣言します。

* apex:remoteObjects
* apex:remoteObjectModel
* apex:remoteObjectField

## jsShorthandについて
jsShorthandとは本来の名称の代わりに使用できる別名を指定するためのものです。『apex:remoteObjectModel』と『apex:remoteObjectField』に対して用意されています。

★使用例

```html
apex:remoteObjectModel name="Account" jsShorthand="Warehouse"
```

次のような感じでAccountのremoteObjectModelにアクセスできるようになります。

```html
var wh = new SObjectModel.Warehouse();
```

##『remoteObjectModelのfields』と『remoteObjectField』
この２つは両方ともremoteObjectでアクセスできる項目を指定するためのものです。
例えば次の書き方でどちらもPhoneの項目にアクセスすることができました。

```html:apex:remoteObjectFieldあり
<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Name,Id">
    <apex:remoteObjectField name="Phone" jsShorthand="Phone"/>
  </apex:remoteObjectModel>
</apex:remoteObjects>
```

```html:apex:remoteObjectFieldなし
<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Name,Id,Phone" />
</apex:remoteObjects>
```

remoteObjectFieldを使うとjsShorthandで別名をつけたり、renderedで有効/無効を切り替えたりできるので基本はremoteObjectFieldでコンポーネント化してあげるのがいいと思います。apex:remoteObjectタグの使い方はだいたいこんな感じです。


#JavaScript側の処理の例
JavaScript側の処理の例です。

```js
<script>
fetchWarehouses = function(){
  // Create a new Remote Object
  var wh = new SObjectModel.Warehouse();
            
  // Use the Remote Object to query for 10 warehouse records
  wh.retrieve({
    where: { Id: { eq: id } } }, function(err, records){
      if(err) alert(err.message);
      else {
        var ul = document.getElementById("warehousesList");
      
      records.forEach(function(record) {
        // Build the text for a warehouse line item
        var whText = record.get("Name");
        whText += " -- ";
        whText += record.get("Phone");
                        
        // Add the line item to the warehouses list
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(whText));
        ul.appendChild(li);
      });
    }
  });
};
</script>
```

###Remote Objectのモデル情報を取得
```js
// Create a new Remote Object
var wh = new SObjectModel.Warehouse();
```

###クエリの実行

```js
wh.retrieve({}, function(err, records){
   // クエリ実行後の処理
}
```

###LIMITの指定
```js
wh.retrieve({ limit: 10 }, function(err, records){
   // クエリ実行後の処理
}
```

###WHEREの指定
```js
wh.retrieve({
  limit : 10,
  where : {
    Name :{
      eq : 'GenePoint'
    }
  }
}, function(err, records){
    // クエリ実行後の処理
}
```

eqでイコールという意味です。


###ループ処理

```js
records.forEach(function(record) {
  // ループ内の処理
}
```

JavaScript側の処理例はこんな感じです。コードの全体はGistにアップしてあります。今回のコードはRelease Notesのサンプルを元につくってあります。

**Gist**
https://gist.github.com/tyoshikawa1106/bb05a7c9da5cff5dd5fd

#参考
**Visualforce Remote Objects—Developer Preview**
http://docs.releasenotes.salesforce.com/en-us/api/release-notes/rn_vf_remote_objects.htm

**Visualforce Remote Objects**
http://www.shivasoft.in/blog/salesforce/visualforce/introduction-to-visualforce-remote-objects/

**apex:remoteObjects**
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_remoteObjects.htm

**apex:remoteObjectModel**
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_remoteObjectModel.htm

**apex:remoteObjectField**
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_remoteObjectField.htm