Friday 19 May 2017

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 !

1 comment: