A Visualforce page to demonstrate the functionality of Visualforce Remote Objects

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">&times;</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">&times;</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>