How to insert sObjects records using Visualforce Remote Objects ?
Visualforce Remote Objects:
Visualforce Remote Objects are proxy objects that enable basic DML operations on sObjects directly from JavaScript. Remote objects don't require @RemoteAction methods in an Apex controller or extension and helps in removing complexity from javascript remoting. The remote objects controller handles sharing rules, field-level security, and other data accessibility concerns itself.
Let's understand the functionality of remote objects with an example:
Here in the Visualforce page, we are inserting records for sObject Employee. Below screenshot has the definition of sObject employee:
Code:
<apex:page id=”pageId”>
<html>
<body>
<!– Form to Show on Page Load –>
<form name=”myForm”>
Name <input type=”text” name=”Name” class=”enter” value=”” id=”Name” onkeyup=”nameFunction()”/>
<input type=”checkbox” id=”nameCheckbox” name=”nameCheckbox”>
</input>
<output id=”ErrorName” name=”ErrorName”>
</output>
<br/>
Email <input type=”email” name=”Email” class=”enter” value=”” id=”Email” onkeyup=”emailFunction()”/>
<input type=”checkbox” id=”emailCheckbox” name=”emailCheckbox”>
</input>
<output id=”ErrorEmail” name=”ErrorEmail”>
</output>
<br/>
Salary <input name=”Salary” class=”enter” value=”” id=”Salary” onkeyup=”salaryFunction()”/>
<input type=”checkbox” id=”salaryCheckbox” name=”salaryCheckbox”></input>
<output id=”ErrorSalary” name=”ErrorSalary”></output><br/>
Age <input name=”Age” class=”enter” value=”” id=”Age” onKeyup=”AgeFunction()”/>
<input type=”checkbox” id=”AgeCheckbox” name=”AgeCheckbox”></input>
<output id=”ErrorAge” name=”ErrorAge”></output>
<br/>
</form>
<!– Form to Show on Page Load –>
</body>
<!– Remote Object –>
<apex:remoteObjects>
<apex:remoteObjectModel name=”Employee__c” jsShorthand=”Employee” fields=”Name,Id”>
<apex:remoteObjectField name=”Email__c” jsShorthand=”Email”/>
<apex:remoteObjectField name=”Age__c” jsShorthand=”Age”/>
<apex:remoteObjectField name=”Salary__c” jsShorthand=”Salary”/>
</apex:remoteObjectModel>
</apex:remoteObjects>
<!– Remote Object –>
<!– Script –>
<script>
var nameObj;
var errorName;
var emailObj;
var errorEmail;
var salaryObj;
var errorSalary;
var ageObj;
var errorAge;
<!– Function to check Name Field –>
function nameFunction() {
nameObj = document.getElementById(‘Name’).value;
if (nameObj.Type ==”text”) {
errorName = “Must be Text Type”;
document.getElementById(“ErrorName”).innerHTML=errorName;
document.getElementById(“nameCheckbox”).checked= false;
}
else {
document.getElementById(“ErrorName”).innerHTML=”;
if(nameObj.toString().length > 0) {
document.getElementById(“nameCheckbox”).checked= true;
}
else {
document.getElementById(“nameCheckbox”).checked= false;
}
}
}
<!– Function to check Name Field –>
<!– Function to check Email Field –>
function emailFunction() {
emailObj = document.getElementById(‘Email’).value;
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(emailObj) == false) {
errorEmail = “Must be Email Type”;
document.getElementById(“ErrorEmail”).innerHTML=errorEmail;
document.getElementById(“emailCheckbox”).checked= false;
}
else {
document.getElementById(“ErrorEmail”).innerHTML=”;
if(emailObj.toString().length > 0) {
document.getElementById(“emailCheckbox”).checked= true;
}
else {
document.getElementById(“emailCheckbox”).checked= false
}
}
}
<!– Function to check Email Field –>
<!– Function to check Salary Field –>
function salaryFunction() {
salaryObj = document.getElementById(‘Salary’).value;
var reg = /^(\d*\.\d{1,2}|\d+)$/;
if (reg.test(salaryObj) == false) {
errorSalary = “Must be Currency Type”;
if(salaryObj.toString().length > 0) {
document.getElementById(“ErrorSalary”).innerHTML=errorSalary;
}
else {
document.getElementById(“ErrorSalary”).innerHTML=”;
}
document.getElementById(“salaryCheckbox”).checked= false;
}
else {
document.getElementById(“ErrorSalary”).innerHTML=”;
if(salaryObj.toString().length > 0){
document.getElementById(“salaryCheckbox”).checked= true;
}
else {
document.getElementById(“salaryCheckbox”).checked= false;
}
}
}
<!– Function to check Salary Field –>
<!– Function to check Age Field –>
function AgeFunction() {
ageObj = document.getElementById(‘Age’).value;
if (isNaN(ageObj)) {
errorAge = “Must be Number Type”;
document.getElementById(“ErrorAge”).innerHTML=errorAge;
document.getElementById(“AgeCheckbox”).checked= false;
}
else {
document.getElementById(“ErrorAge”).innerHTML=”;
if(ageObj.toString().length > 0) {
document.getElementById(“AgeCheckbox”).checked= true;
}
else {
document.getElementById(“AgeCheckbox”).checked= false;
}
}
}
<!– Function to check Age Field –>
var employeeObjName;
var employeeObjEmail;
var employeeObjAge;
var employeeObjSalary;
<!– Function to Insert data –>
var InsertEmployee = function() {
employeeObjName = document.getElementById(‘Name’).value;
employeeObjEmail = document.getElementById(‘Email’).value;
employeeObjAge = document.getElementById(‘Age’).value;
employeeObjSalary = document.getElementById(‘Salary’).value;
var ctDetails = { Name: employeeObjName, Email: employeeObjEmail,Age: employeeObjAge,Salary: employeeObjSalary };
var ct = new SObjectModel.Employee();
ct.create(ctDetails, function(err) {
if(err) {
console.log(err); alert(err.message);
}
else {
console.log(ct.log());
console.log(ct.get(‘Id’)); window.location.href=window.location.href.substr(0,window.location.href.indexOf(‘.com/’)+5)+ct.get(‘Id’);
}
});
};
<!– Function to Insert data –> </script> <!– Script –>
<button onclick=”InsertEmployee()”>Insert Employee</button>
</html>
</apex:page>
Below screenshot is the preview of the Visualforce Page:
Below Screenshot shows Successful creation of records :
