jenishshingala · October 22, 2016 12:47
diff --git a/RemoteObjectTable b/RemoteObjectTable
 <apex:page standardStylesheets="false" sidebar="false"  applyBodyTag="false" docType="html-5.0">
   <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <head>
         <apex:stylesheet value="{!URLFOR($Resource.SLDS090, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
          <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      </head>
      <body>
          
         <!-- Remote Objects definition to set accessible sObjects and fields(take all fields which you want to query) -->
         <apex:remoteObjects >
            <apex:remoteObjectModel name="Account" jsShorthand="Accounts" 
               fields="Name,Id,Phone,LastModifiedDate">
              
            </apex:remoteObjectModel>
         </apex:remoteObjects>
         <!-- REQUIRED SLDS WRAPPER -->
         <div class="slds">
             <center>
              <div class="slds-spinner_container" id="spinnerdiv" style="display:none;">
          <div class="slds-spinner slds-spinner--medium" role="alert">
            <span class="slds-assistive-text">Loading</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
          </div>
        </div>
          </center>
            <!-- MASTHEAD -->
            <!-- / MASTHEAD -->    
            <!-- PAGE HEADER -->
            <div class="slds-page-header" role="banner">
               <!-- LAYOUT GRID -->
               <div class="slds-grid">
                  <!-- GRID COL -->
                  <div class="slds-col">
                     <!-- HEADING AREA -->
                     <p class="slds-text-heading--label">Accounts</p>
                     <h1 class="slds-text-heading--medium">My Accounts</h1>
                     <!-- /HEADING AREA -->
                  </div>
                  <!-- GRID COL -->
                  <div class="slds-col slds-no-flex slds-align-middle">
                     <div class="slds-button-group" role="group">
                        <button class="slds-button slds-button--neutral" onclick="fetchWarehouses()">
                        Fetch Account
                        </button>
                        
                     </div>
                  </div>
                  <!-- / GRID COL -->
               </div>
               <!-- / LAYOUT GRID -->
             
            </div>
            <!-- / PAGE HEADER -->    
            <!-- PRIMARY CONTENT WRAPPER -->
            <div class="myapp">
                 <!-- CREATE NEW ACCOUNT -->
 

    <!-- BOXED AREA -->
   <br/>

      <!-- CREATE NEW ACCOUNT FORM -->
      <form class="slds-form--inline">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="name">Account Name</label>
    <div class="slds-form-element__control">
      <input id="accountName" class="slds-input" type="text" placeholder="John Smith" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="email">Phone</label>
    <div class="slds-form-element__control">
      <input id="Phone" class="slds-input" type="text" placeholder="(014) 427-4427" />
    </div>
  </div>
    <button id="createbtn" class="slds-button slds-button--brand" type="button" onClick="createAccount()">Create Account</button>
 </form>
      
     
      <!-- CREATE NEW ACCOUNT FORM -->

  
    <!-- / BOXED AREA -->

  
  <!-- / CREATE NEW ACCOUNT -->
               <!-- ACCOUNT LIST TABLE -->
              <div id="accountList" class="slds-p-vertical--medium"></div>
              <!-- / ACCOUNT LIST TABLE --> 
            </div>
            <!-- / PRIMARY CONTENT WRAPPER -->    
            <!-- FOOTER -->
            <footer role="contentinfo" class="slds-p-around--large">
               <!-- LAYOUT GRID -->
               <div class="slds-grid slds-grid--align-spread">
                  <p class="slds-col">Salesforce Lightning Design System Example</p>
                  <p class="slds-col">&copy; Jenish Shingala</p>
               </div>
               <!-- / LAYOUT GRID -->
            </footer>
            <!-- / FOOTER -->    
         </div>
         <!-- / REQUIRED SLDS WRAPPER -->   
         
         
      </body>
      <!-- JAVASCRIPT -->
      <!-- JavaScript to make Remote Objects calls -->
      <script>
         var fetchWarehouses = function(){
                $('#spinnerdiv').show();
             // Create a new Remote Object
             var wh = new SObjectModel.Accounts();
             var outputDiv = document.getElementById("accountList");
             // Use the Remote Object to query for 10 warehouse records
             wh.retrieve({orderby: [{LastModifiedDate: 'DESC'}], limit: 100 }, function(err, records, event){
                 if(err) {
                     alert(err.message);
                 }
                 else {
                     var html = '<div class="slds-scrollable--5"><table class="slds-table slds-table--bordered">';    

          html += '<thead><tr><th scope="col">Account name</th>';
          html += '<th scope="col">Phone</th>';
          html+='<th scope="col">Id</th></tr></thead><tbody>';    

          records.forEach(function(record) {
              html += '<tr><td>' + record.get("Name") + '</td>';
              html += '<td>' + record.get("Phone") + '</td>';
              html+='<td>'+record.get("Id")+'</td></tr>';
          });
          html = html + '</tbody></table></div>';
          outputDiv.innerHTML = html;
                 }
             });
             
            $('#spinnerdiv').hide();
         }; 
         
         function createAccount() {
          var accountName = document.getElementById("accountName").value;
          var phone = document.getElementById("Phone").value;
          console.log('Enterd phone-->'+phone);
          var account = new SObjectModel.Account();
          account.create({Name: accountName,Phone:phone},function(error, records) {
            if (error) {
              alert(error.message);
            } else {
              fetchWarehouses();
            }
            
          });
          document.getElementById("accountName").value='';
            document.getElementById("Phone").value='';
          return false;
        }
      </script>
      <!-- / JAVASCRIPT -->    
   </html>
 </apex:page>
	<apex:page standardStylesheets="false" sidebar="false" applyBodyTag="false" docType="html-5.0">
	<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
	<apex:stylesheet value="{!URLFOR($Resource.SLDS090, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>

	<!-- Remote Objects definition to set accessible sObjects and fields(take all fields which you want to query) -->
	<apex:remoteObjects >
	<apex:remoteObjectModel name="Account" jsShorthand="Accounts"
	fields="Name,Id,Phone,LastModifiedDate">

	</apex:remoteObjectModel>
	</apex:remoteObjects>
	<!-- REQUIRED SLDS WRAPPER -->
	<div class="slds">
	<center>
	<div class="slds-spinner_container" id="spinnerdiv" style="display:none;">
	<div class="slds-spinner slds-spinner--medium" role="alert">
	<span class="slds-assistive-text">Loading</span>
	<div class="slds-spinner__dot-a"></div>
	<div class="slds-spinner__dot-b"></div>
	</div>
	</div>
	</center>
	<!-- MASTHEAD -->
	<!-- / MASTHEAD -->
	<!-- PAGE HEADER -->
	<div class="slds-page-header" role="banner">
	<!-- LAYOUT GRID -->
	<div class="slds-grid">
	<!-- GRID COL -->
	<div class="slds-col">
	<!-- HEADING AREA -->
	<p class="slds-text-heading--label">Accounts</p>
	<h1 class="slds-text-heading--medium">My Accounts</h1>
	<!-- /HEADING AREA -->
	</div>
	<!-- GRID COL -->
	<div class="slds-col slds-no-flex slds-align-middle">
	<div class="slds-button-group" role="group">
	<button class="slds-button slds-button--neutral" onclick="fetchWarehouses()">
	Fetch Account
	</button>

	</div>
	</div>
	<!-- / GRID COL -->
	</div>
	<!-- / LAYOUT GRID -->

	</div>
	<!-- / PAGE HEADER -->
	<!-- PRIMARY CONTENT WRAPPER -->
	<div class="myapp">
	<!-- CREATE NEW ACCOUNT -->


	<!-- BOXED AREA -->
	<br/>

	<!-- CREATE NEW ACCOUNT FORM -->
	<form class="slds-form--inline">
	<div class="slds-form-element">
	<label class="slds-form-element__label" for="name">Account Name</label>
	<div class="slds-form-element__control">
	<input id="accountName" class="slds-input" type="text" placeholder="John Smith" />
	</div>
	</div>
	<div class="slds-form-element">
	<label class="slds-form-element__label" for="email">Phone</label>
	<div class="slds-form-element__control">
	<input id="Phone" class="slds-input" type="text" placeholder="(014) 427-4427" />
	</div>
	</div>
	<button id="createbtn" class="slds-button slds-button--brand" type="button" onClick="createAccount()">Create Account</button>
	</form>


	<!-- CREATE NEW ACCOUNT FORM -->


	<!-- / BOXED AREA -->


	<!-- / CREATE NEW ACCOUNT -->
	<!-- ACCOUNT LIST TABLE -->
	<div id="accountList" class="slds-p-vertical--medium"></div>
	<!-- / ACCOUNT LIST TABLE -->
	</div>
	<!-- / PRIMARY CONTENT WRAPPER -->
	<!-- FOOTER -->
	<footer role="contentinfo" class="slds-p-around--large">
	<!-- LAYOUT GRID -->
	<div class="slds-grid slds-grid--align-spread">
	<p class="slds-col">Salesforce Lightning Design System Example</p>
	<p class="slds-col">© Jenish Shingala</p>
	</div>
	<!-- / LAYOUT GRID -->
	</footer>
	<!-- / FOOTER -->
	</div>
	<!-- / REQUIRED SLDS WRAPPER -->


	</body>
	<!-- JAVASCRIPT -->
	<!-- JavaScript to make Remote Objects calls -->
	<script>
	var fetchWarehouses = function(){
	$('#spinnerdiv').show();
	// Create a new Remote Object
	var wh = new SObjectModel.Accounts();
	var outputDiv = document.getElementById("accountList");
	// Use the Remote Object to query for 10 warehouse records
	wh.retrieve({orderby: [{LastModifiedDate: 'DESC'}], limit: 100 }, function(err, records, event){
	if(err) {
	alert(err.message);
	}
	else {
	var html = '<div class="slds-scrollable--5"><table class="slds-table slds-table--bordered">';

	html += '<thead><tr><th scope="col">Account name</th>';
	html += '<th scope="col">Phone</th>';
	html+='<th scope="col">Id</th></tr></thead><tbody>';

	records.forEach(function(record) {
	html += '<tr><td>' + record.get("Name") + '</td>';
	html += '<td>' + record.get("Phone") + '</td>';
	html+='<td>'+record.get("Id")+'</td></tr>';
	});
	html = html + '</tbody></table></div>';
	outputDiv.innerHTML = html;
	}
	});

	$('#spinnerdiv').hide();
	};

	function createAccount() {
	var accountName = document.getElementById("accountName").value;
	var phone = document.getElementById("Phone").value;
	console.log('Enterd phone-->'+phone);
	var account = new SObjectModel.Account();
	account.create({Name: accountName,Phone:phone},function(error, records) {
	if (error) {
	alert(error.message);
	} else {
	fetchWarehouses();
	}

	});
	document.getElementById("accountName").value='';
	document.getElementById("Phone").value='';
	return false;
	}
	</script>
	<!-- / JAVASCRIPT -->
	</html>
	</apex:page>