Expanding the features of Lightning Component Using Visualforce page #Salesforce - Part 2

Previously we have used the Lightning component inside visualforce page, now this we are going to use the visualforce inside lightning page, and set some attributes default value on load of the lightning component using visualforce page, here what we are going to achieve is that we will load the visualforce page, and then remaining process of Lightning component order or execution will be same.



So here we are going to have a visualforce page, that will save/update the data in the custom setting, and the out lightning component will use the same data in custom setting.

So here is the visualforce page, that we are going to use in lightning component, and this page is updating the your custom setting.

Page Name : UpdateCustomSetting

<!-- defining custom setting here -->
<apex:remoteObjects jsNamespace="RemoteObjectModel">  
    <apex:remoteObjectModel name="MyCustomSetting__c" fields="Id,Field1__c,Field2__c">  
    </apex:remoteObjectModel>  
</apex:remoteObjects> 

<script>
//to save data in custom setting 
function updateCustomSetting() { 
    
    (new RemoteObjectModel.MyCustomSetting__c()).retrieve( 
        function(error, records, event) {
            if(records[0]) {
                (new RemoteObjectModel.MyCustomSetting__c({
                    Field1__c: '{!$Api.Partner_Server_URL_XXX}', 
                    Field2__c: '{!$Api.Session_Id}',
                    Id: records[0].get("Id")
                })).update();
            } else {
                (new RemoteObjectModel.MyCustomSetting__c({
                    Field1__c: '{!$Api.Partner_Server_URL_XXX}', 
                    Field2__c: '{!$Api.Session_Id}'
                })).create();
            }
        });
}

updateCustomSetting();
}
</script>

The way of using the visualforce page in the lightning component, is by calling the visualforce page using iframe.

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
     
    <div style="display:none;">
        <iframe aura:id="vfFrame" src="{!'https:// + YOUR_ORG_URL + dev-ed.my.salesforce.com/apex/UpdateCustomSetting'}"/>
    </div>

    //YOUR COMPONENT CODE HERE


    //assign the value to these in the helper by calling apex 
    <aura:attribute name="FIELD1" type="String" access="public"/>
    <aura:attribute name="FIELD2" type="String" access="public"/>

    Custom Setting value :: "{!v.FIELD1}"
    

</aura:component>
    

Using above code you will be able to use the custom setting field values in your Lightning component.

Hope it helps !

Visualforce Remote Objects -- Query Records & Insert Record

Using Visualforce Remote Objects consists of implementing two separate pieces of functionality on the same page.
Access definitions, written in Visualforce with the Remote Objects components. These components generate a set of JavaScript proxy objects that you can use in step 2.
Data access functions, written in JavaScript. These functions use the proxy objects that are made available by the access definitions to perform create, retrieve, update, and delete operations on your data.
Your page then uses the data access functions to respond to user interaction, such as form submissions or controls changes, or to perform periodic actions in response to timers, or most anything that you can write in JavaScript.

Behind the scenes, the Remote Objects controller handles sharing rules, field level security, and other data accessibility concerns. Pages that use Remote Objects are subject to all the standard Visualforce limits, but like JavaScript remoting, Remote Objects calls don’t count toward API request limits.

Inserting Record in Contact using Visualforce Remote Object

Here how it looks provide the values of Contact then click on the button to save the data

Here is the code of the above page...

1:  <apex:page standardStylesheets="false" DocType="html-5.0">  
2:    <!-- Bootstrap -->  
3:    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" media="screen"/>  
4:    <link href="//getbootstrap.com/examples/signin/signin.css" rel="stylesheet" media="screen"/>  
5:      <apex:remoteObjects jsNamespace="RemoteObjectModel">  
6:        <apex:remoteObjectModel name="Contact" fields="Id,FirstName,LastName">  
7:        </apex:remoteObjectModel>  
8:      </apex:remoteObjects>  
9:    <script>  
10:      function remot() {  
11:                alert(document.getElementById("name").value);  
12:        var ct = new RemoteObjectModel.Contact({   
13:          FirstName: document.getElementById("name").value,  
14:          LastName: document.getElementById("lName").value,   
15:          Phone: document.getElementById("phon").value,  
16:        });  
17:        ct.create();  
18:      }  
19:    </script>  
20:    <div class="col-xs-12">  
21:    <div class="panel-body">  
22:      <label for="name">First Name</label>  
23:      <br></br>  
24:      <input type="text" class="form-control col-lg-10" id="name" name="fname" placeholder="First Name"></input><br></br>  
25:      <label for="name">Last Name</label>  
26:      <input type="text" class="form-control col-lg-10" id="lName" name="Last Name" placeholder="Last Name"></input><br></br>  
27:      <label for="name">Phone</label>  
28:      <input type="text" class="form-control col-lg-10" id="phon" name="phone" placeholder="Phone"></input><br></br>  
29:      <br></br>  
30:      &nbsp;  
31:      <p> <button onclick="remot()">Insert Contact</button>  
32:      </p>  
33:      </div>  
34:     </div>  
35:  </apex:page>  

Showing record on page using Visualforce Remote Object

Now querying the records of Account and showing on the page, its having the limit of 10, just take a look at the awesome functionality of remote object of Salesforce.

Here how it looks

Here is the code of querying the records and showing it on the page

1:  <apex:page >  
2:    <apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"/>  
3:    <apex:remoteObjects >  
4:     <!--query records-->  
5:     <apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Id,Name,Phone"/>  
6:    </apex:remoteObjects>  
7:    <script>   
8:     function clearList() {  
9:       if(!$('#accList').empty()) {  
10:         $('#accList').empty();  
11:       }  
12:     }  
13:     var DML = function(){  
14:     clearList();  
15:       var data = new SObjectModel.acc();  
16:       data.retrieve({ limit: 10 } ,function(err, records){  
17:         if(err) alert(err.message);  
18:         else {  
19:           populate(records);      
20:         }  
21:       });  
22:       function populate(records)  
23:       {  
24:         var ul = document.getElementById("accList");  
25:         records.forEach(function(record) {  
26:           var nam = record.get("Name");  
27:           nam += " -- ";  
28:           nam += record.get("Phone");   
29:           var brs= document.createElement("br");  
30:           var li = document.createElement("li");  
31:           li.appendChild(document.createTextNode(nam));  
32:           ul.appendChild(li);  
33:           ul.appendChild(brs);  
34:         });  
35:       }  
36:     }  
37:    </script>  
38:    <div>  
39:     <div>  
40:       <p> <button onclick="DML()">Show Accounts</button>  
41:       </p>  
42:     </div>  
43:    </div>  
44:    <div class="wrapper">  
45:     <ul class="list-inline" id="accList"></ul>  
46:    </div>  
47:  </apex:page>  

Hope this helps someone
Happy Coding cheers..!!