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 !

Thursday 11 May 2017

Expanding the feature of Lightning Component Using Visualforce page #Salesforce - Part 1

This blog post is all about using the lightning component with some extra feature that stand alone lightning feature doesn't provide some time.
Recently I was working on few Lightning component, and ran into a issue of requirements where
lightning component doesn't supports due to security issues or whatever.

For example
If you want to perform AJAX call using lighting component, you cannot bummer! here is link for reference Link

Another problem is that when you are using the Session Id on visualforce page, that session Id is different then what lightning component has. Bummer again ! So sometimes what happens if the third party is configured with your visualforce page sesion Id using "{!API.SessionId}" then your session Id generated in lightning component will no more support it.

Session contexts are based on the domain of the request. That is, the session context changes whenever you cross a hostname boundary, such as from .salesforce.com to .visual.force.com or .lightning.force.com.

So to resolve all this or another way to achieve these functionalities, you can you use Lightning component inside your visualforce page.

I am going to refer my component that I've posted earlier click here and use that same component inside visualforce pages, I am using sessionId and other thing in viualforce page and right away we can use those in attributes in lightning component as well.

<apex:page standardController="Account">
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:TestApp", function() {
          $Lightning.createComponent("c:RecordTypeSelector",
          { 
              sessionId : "{!$API.Session_ID}",
              partnerURL : "{!$Api.Partner_Server_URL__xxx}",
              recordId : "{!Account}" 
              
          },
                                     
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>


Now you can use these below attribute inside the component


<aura:attribute name="recordId" type="String" access="public"/>
 <aura:attribute name="sessionId" type="String" access="public"/>
    <aura:attribute name="partnerId" type="String" access="public"/>
   


NOTE : If you are using you lightning component on some object detail page, then force:hasRecordId will stop working after using lightning component inside visaulforce page, so you need to remove it from "implements" tag, that is why I've passed the object Id as well.

Here are some links for referece

Visualforce Developer Guide
Lightning Components in Visualforce with Lightning Out
Use Lightning Component in Visualforcery Jitendra Zaa
Use Lightning Components in Visualforce Pages


Hope this helps !!