Friday 27 February 2015

Visualforce Remote Objects -- Query Records & Insert Record


Using Visualforce Remote Objects consists of implementing two separate pieces of functionality on the same page.
Access definitions, written in Visualforce with the Remote Objects components. These components generate a set of JavaScript proxy objects that you can use in step 2.
Data access functions, written in JavaScript. These functions use the proxy objects that are made available by the access definitions to perform create, retrieve, update, and delete operations on your data.
Your page then uses the data access functions to respond to user interaction, such as form submissions or controls changes, or to perform periodic actions in response to timers, or most anything that you can write in JavaScript.

Behind the scenes, the Remote Objects controller handles sharing rules, field level security, and other data accessibility concerns. Pages that use Remote Objects are subject to all the standard Visualforce limits, but like JavaScript remoting, Remote Objects calls don’t count toward API request limits.

Inserting Record in Contact using Visualforce Remote Object

Here how it looks provide the values of Contact then click on the button to save the data


Here is the code of the above page...

1:  <apex:page standardStylesheets="false" DocType="html-5.0">  
2:    <!-- Bootstrap -->  
3:    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" media="screen"/>  
4:    <link href="//getbootstrap.com/examples/signin/signin.css" rel="stylesheet" media="screen"/>  
5:      <apex:remoteObjects jsNamespace="RemoteObjectModel">  
6:        <apex:remoteObjectModel name="Contact" fields="Id,FirstName,LastName">  
7:        </apex:remoteObjectModel>  
8:      </apex:remoteObjects>  
9:    <script>  
10:      function remot() {  
11:                alert(document.getElementById("name").value);  
12:        var ct = new RemoteObjectModel.Contact({   
13:          FirstName: document.getElementById("name").value,  
14:          LastName: document.getElementById("lName").value,   
15:          Phone: document.getElementById("phon").value,  
16:        });  
17:        ct.create();  
18:      }  
19:    </script>  
20:    <div class="col-xs-12">  
21:    <div class="panel-body">  
22:      <label for="name">First Name</label>  
23:      <br></br>  
24:      <input type="text" class="form-control col-lg-10" id="name" name="fname" placeholder="First Name"></input><br></br>  
25:      <label for="name">Last Name</label>  
26:      <input type="text" class="form-control col-lg-10" id="lName" name="Last Name" placeholder="Last Name"></input><br></br>  
27:      <label for="name">Phone</label>  
28:      <input type="text" class="form-control col-lg-10" id="phon" name="phone" placeholder="Phone"></input><br></br>  
29:      <br></br>  
30:      &nbsp;  
31:      <p> <button onclick="remot()">Insert Contact</button>  
32:      </p>  
33:      </div>  
34:     </div>  
35:  </apex:page>  

Showing record on page using Visualforce Remote Object

Now querying the records of Account and showing on the page, its having the limit of 10, just take a look at the awesome functionality of remote object of Salesforce.

Here how it looks


Here is the code of querying the records and showing it on the page

1:  <apex:page >  
2:    <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"/>  
3:    <apex:remoteObjects >  
4:     <!--query records-->  
5:     <apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Id,Name,Phone"/>  
6:    </apex:remoteObjects>  
7:    <script>   
8:     function clearList() {  
9:       if(!$('#accList').empty()) {  
10:         $('#accList').empty();  
11:       }  
12:     }  
13:     var DML = function(){  
14:     clearList();  
15:       var data = new SObjectModel.acc();  
16:       data.retrieve({ limit: 10 } ,function(err, records){  
17:         if(err) alert(err.message);  
18:         else {  
19:           populate(records);      
20:         }  
21:       });  
22:       function populate(records)  
23:       {  
24:         var ul = document.getElementById("accList");  
25:         records.forEach(function(record) {  
26:           var nam = record.get("Name");  
27:           nam += " -- ";  
28:           nam += record.get("Phone");   
29:           var brs= document.createElement("br");  
30:           var li = document.createElement("li");  
31:           li.appendChild(document.createTextNode(nam));  
32:           ul.appendChild(li);  
33:           ul.appendChild(brs);  
34:         });  
35:       }  
36:     }  
37:    </script>  
38:    <div>  
39:     <div>  
40:       <p> <button onclick="DML()">Show Accounts</button>  
41:       </p>  
42:     </div>  
43:    </div>  
44:    <div class="wrapper">  
45:     <ul class="list-inline" id="accList"></ul>  
46:    </div>  
47:  </apex:page>  

Hope this helps someone
Happy Coding cheers..!!