How to insert sobjects records using Visualforce remote objects?

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:

Custom Object Employee Salesforce Developer Edition (1)

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:

vf1

Below Screenshot shows Successful creation of records :

vf2

Related Articles

Responses