Following are two main parts of VF Remote object
Access definitions - Written in visualforce using new Remote objects components. This will create the javascript proxy object.
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" jsShorthand="cont" fields="Name,Id,FirstName,LastName,Phone,Email,Title,AccountId">
</apex:remoteObjectModel>
</apex:remoteObjects>Data access function – Written in javascript. In this section we will perform the create, select, edit and delete operation for the proxy object record. It’s interesting right, lets have a look into each operations.
Here is the single visualforce page(
VFRemoteObject.html
<!---
@author : Karanraj
@Description : A Visualforce page to demonstrate the functionality of Remote Objects
-->
<apex:page showHeader="false" standardStylesheets="false">
<!-- Boostrap and jQuery file -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
fetchContact();
//search button click
$('#searchCon').click(function(){
$('#thumRow').empty();
fetchContact();
});
//Save button click
$('#saveContact').click(function(){
Createcontact();
});
//Delete button click
$('#delete').click(function(){
var delCon = new SObjectModel.cont({
Id : $('#inputId').val()
});
$('.bs-example-modal-sm').modal('hide');
delCon.del(updateCallback);
});
//New Contact button click
$('#new').click(function(){
clearfieldValues();
});
});
//Function to clear filed values in the form
function clearfieldValues(){
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputTitle').val('');
$('#inputPhone').val('');
$('#inputEmail').val('');
$('#inputId').val('');
}
//Function to Create/Update contact
function Createcontact(){
var updateCon = new SObjectModel.cont({
FirstName : $('#inputFirstName').val(),
LastName : $('#inputLastName').val(),
Title : $('#inputTitle').val(),
Phone : $('#inputPhone').val(),
Email : $('#inputEmail').val()
});
var cId = $('#inputId').val();
//If cId is null then Create new Contact
if(!cId){
updateCon.create(updateCallback);
}else{
//Id cId has value then update the Contact record
updateCon .set('Id',cId);
updateCon.update(updateCallback);
}
}
// Callback to handle DML Remote Objects calls
function updateCallback(err, ids){
if (err) {
alert(err);
} else {
$('#thumRow').empty();
fetchContact();
$('#myModal').modal('hide')
}
}
//Function to fetch contact
function fetchContact(){
var wh = new SObjectModel.cont();
wh.retrieve({
where:{
Name: { like:$('#search').val()+'%'}
},
limit: 100
},function(err, records){
if(err) alert(err.message);
else {
records.forEach(function(record) {
var divCol = $('<div class="col-sm-5 col-md-6">');
var divThub = $('<div class="thumbnail"><img align="left" src="https://cdn2.iconfinder.com/data/icons/website-icons/512/User_Avatar-128.png">');
var h3 = $('<h3>'+record.get("Name")+'</h3>');
var detail = $('<p>'+record.get("Title")+'<br/>'+record.get("Phone")+'<br/>'+record.get("Email")+'</p>');
var link1 = $('<p><br/><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="edit">Edit</button> <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Delete</button></p> ');
link1.click(function(){
$('#inputFirstName').val(record.get("FirstName"));
$('#inputLastName').val(record.get("LastName"));
$('#inputTitle').val(record.get("Title"));
$('#inputPhone').val(record.get("Phone"));
$('#inputEmail').val(record.get("Email"));
$('#inputId').val(record.get("Id"));
});
detail.append(link1);
h3.append(detail);
divThub.append(h3);
divCol.append(divThub);
divCol.appendTo('#thumRow');
});
}
});
}
</script>
<!-- Visualforce Remote object coponent -->
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" jsShorthand="cont" fields="Name,Id,FirstName,LastName,Phone,Email,Title,AccountId">
</apex:remoteObjectModel>
</apex:remoteObjects>
<!-- Static Nav bar at the top of the page -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<a class="navbar-brand" href="#" data-toggle="modal" data-target="#myModal">My Contacts</a>
<button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#myModal" id="new">New Contact</button>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" id="search" />
</div>
<button type="button" class="btn btn-default" id="searchCon">Search</button>
</form>
</nav>
<!-- Div tag to display the Contact records -->
<div class="container-fluid">
<div class="row" id="thumRow" >
</div>
</div>
<!-- Pop-up window will display when we click Edit/New Contact button -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create Contact</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputFirstName" class="control-label col-xs-2">FirstName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputFirstName"/>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputLastName"/>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="control-label col-xs-2">Title</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputTitle"/>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="Email" class="form-control" id="inputEmail"/>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="control-label col-xs-2">Phone</label>
<div class="col-xs-10">
<input type="tel" class="form-control" id="inputPhone" />
</div>
</div>
<input type="hidden" class="form-control" id="inputId" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveContact">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Pop-up window to confirm the delete operation -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Delete Contact?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="delete">Delete</button>
</div>
</div>
</div>
</div>
</apex:page>
Retrieve Record
Below is the code which will retrieve the records on the remote object, let look into that in detail. First we have to instantiate the remote object. This is common for all our DML operation method. ‘cont’ is jsShorthand for our remote object Contact.
var ct= new SObjectModel.cont();
retrieve() method on the remote object instance will fetch the records. This method accepts two arguments Criteria(where conditions) and Callback function(we need to process the retrieved records either to store or display in the page)
ct.retrieve({
where:{
Name: { like:$('#search').val()+'%'}
},
limit: 100
},function(err, records){
//logic to display/store records
}
Create record
The Create() method on remote object instances will allow us to insert new records.Field values are set by passing in a JSON string with values for the fields to set on the new model
//Function to Create
function Createcontact(){
var createCon = new SObjectModel.cont({
FirstName : $('#inputFirstName').val(),
LastName : $('#inputLastName').val(),
Title : $('#inputTitle').val(),
Phone : $('#inputPhone').val(),
Email : $('#inputEmail').val()
});
createCon.create();
}
For updating the record call update() method and for deleting record call del() method, the logic remains same for passing the values where we need to pass ID of the record on which we need to perform update operation.
You can find the complete source code of the page in this
VFRemoteObject.html
<!---
@author : Karanraj
@Description : A Visualforce page to demonstrate the functionality of Remote Objects
-->
<apex:page showHeader="false" standardStylesheets="false">
<!-- Boostrap and jQuery file -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
fetchContact();
//search button click
$('#searchCon').click(function(){
$('#thumRow').empty();
fetchContact();
});
//Save button click
$('#saveContact').click(function(){
Createcontact();
});
//Delete button click
$('#delete').click(function(){
var delCon = new SObjectModel.cont({
Id : $('#inputId').val()
});
$('.bs-example-modal-sm').modal('hide');
delCon.del(updateCallback);
});
//New Contact button click
$('#new').click(function(){
clearfieldValues();
});
});
//Function to clear filed values in the form
function clearfieldValues(){
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputTitle').val('');
$('#inputPhone').val('');
$('#inputEmail').val('');
$('#inputId').val('');
}
//Function to Create/Update contact
function Createcontact(){
var updateCon = new SObjectModel.cont({
FirstName : $('#inputFirstName').val(),
LastName : $('#inputLastName').val(),
Title : $('#inputTitle').val(),
Phone : $('#inputPhone').val(),
Email : $('#inputEmail').val()
});
var cId = $('#inputId').val();
//If cId is null then Create new Contact
if(!cId){
updateCon.create(updateCallback);
}else{
//Id cId has value then update the Contact record
updateCon .set('Id',cId);
updateCon.update(updateCallback);
}
}
// Callback to handle DML Remote Objects calls
function updateCallback(err, ids){
if (err) {
alert(err);
} else {
$('#thumRow').empty();
fetchContact();
$('#myModal').modal('hide')
}
}
//Function to fetch contact
function fetchContact(){
var wh = new SObjectModel.cont();
wh.retrieve({
where:{
Name: { like:$('#search').val()+'%'}
},
limit: 100
},function(err, records){
if(err) alert(err.message);
else {
records.forEach(function(record) {
var divCol = $('<div class="col-sm-5 col-md-6">');
var divThub = $('<div class="thumbnail"><img align="left" src="https://cdn2.iconfinder.com/data/icons/website-icons/512/User_Avatar-128.png">');
var h3 = $('<h3>'+record.get("Name")+'</h3>');
var detail = $('<p>'+record.get("Title")+'<br/>'+record.get("Phone")+'<br/>'+record.get("Email")+'</p>');
var link1 = $('<p><br/><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="edit">Edit</button> <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Delete</button></p> ');
link1.click(function(){
$('#inputFirstName').val(record.get("FirstName"));
$('#inputLastName').val(record.get("LastName"));
$('#inputTitle').val(record.get("Title"));
$('#inputPhone').val(record.get("Phone"));
$('#inputEmail').val(record.get("Email"));
$('#inputId').val(record.get("Id"));
});
detail.append(link1);
h3.append(detail);
divThub.append(h3);
divCol.append(divThub);
divCol.appendTo('#thumRow');
});
}
});
}
</script>
<!-- Visualforce Remote object coponent -->
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" jsShorthand="cont" fields="Name,Id,FirstName,LastName,Phone,Email,Title,AccountId">
</apex:remoteObjectModel>
</apex:remoteObjects>
<!-- Static Nav bar at the top of the page -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<a class="navbar-brand" href="#" data-toggle="modal" data-target="#myModal">My Contacts</a>
<button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#myModal" id="new">New Contact</button>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" id="search" />
</div>
<button type="button" class="btn btn-default" id="searchCon">Search</button>
</form>
</nav>
<!-- Div tag to display the Contact records -->
<div class="container-fluid">
<div class="row" id="thumRow" >
</div>
</div>
<!-- Pop-up window will display when we click Edit/New Contact button -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create Contact</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputFirstName" class="control-label col-xs-2">FirstName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputFirstName"/>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputLastName"/>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="control-label col-xs-2">Title</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputTitle"/>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="Email" class="form-control" id="inputEmail"/>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="control-label col-xs-2">Phone</label>
<div class="col-xs-10">
<input type="tel" class="form-control" id="inputPhone" />
</div>
</div>
<input type="hidden" class="form-control" id="inputId" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveContact">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Pop-up window to confirm the delete operation -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Delete Contact?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="delete">Delete</button>
</div>
</div>
</div>
</div>
</apex:page>