Passing parameter from button url to lightning component through visualforce page | How to add lightning component in visualforce page

 

Passing parameter from button URL to lightning component through visualforce page | How to add a lightning component in visualforce page.

In this post, we are going to see how to pass a parameter from button URL to lightning component. We cannot call lightning component directly from button URL so for that we need to use visualforce page and inside that, we need to create a container type lightning component. We will also learn how to add lightning component inside the visualforce page.
We are taking Opportunity Product object, in this object we cannot create quick action so we are creating Custom Button "Add Product C". (link - /apex/AddProductLightning?oppid={!Opportunity.Id}) You can see the image below.
After creating a button you can see the code below

AddProductComponent.cmp 

<aura:component controller="AddProductClass" implements="force:appHostable,flexipage:availableForAllPageTypes,
                            flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.myAction}" />
    <aura:attribute name="opptyIdComp" type="String" />
    This is Add Product Component
</aura:component>

AddProductComponentApp.app

<aura:application extends="ltng:outApp" access="global">
    <aura:dependency resource="c:*" type="COMPONENT"/>
</aura:application>

AddProductComponentController.js

({
	myAction : function(component, event, helper) {
        var opptyIdCon = component.get("v.opptyIdComp");
		alert("This is Add Product Controller for Opportunity "+opptyIdCon);
	}
})

AddProductLightning.vfp 

<apex:page>
    <apex:includeLightning />
    <div id="lightning" />
    <script>
    //get opportunity Id from URL
    var opptyIdVF = "{!$CurrentPage.parameters.oppid}";
    $Lightning.use("c:AddProductComponentApp", function() {
        $Lightning.createComponent("c:AddProductComponent",
                                   { "opptyIdComp" : opptyIdVF },
                                   "lightning",
                                   function(component) {
                                       console.log("This function is inside VF page");
                                       // do some stuff
                                   }
                                  );
    });
    </script>
</apex:page>