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 !!

No comments:

Post a Comment