Introduction :
– Lighting out is used to run salesforce lighting components outside of salesforce servers.
– Lighting out used to display lighting components in external sites using lighting application.
– For your information – Lightning Out is not a IFRAME.
Lightning out Implementation Process :
1) First, we have to create lightning Application with ‘ltng:outApp’ Interface and GLOBAL accessible to display lightning component in visualforce page.
<aura:application access=”GLOBAL” extends=”ltng:outApp”>
</aura:application>
2) If your lighting out component needs to display for users without authentication with salesforce so we have to include implements=”ltng:allowGuestAccess” in aura:application .
<aura:application access=”GLOBAL” extends=”ltng:outApp” implements=”ltng:allowGuestAccess”>
</aura:application>
3) <aura:dependency> is used to indicate that it uses the Custom Lightning component.
<aura:dependency resource=”c:learowncomponent”/>
4) using ltng:outApp to salesforce add SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System. If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.
5) Add <apex:includeLightning> tag in Vf page which is basically JavaScript library for add the Lightning Components for Visualforce.
6) Next we need to create a html <div> tag with specific Id, In this div we will display our lightning component using JavaScript.
<div id=”Learnownid”>
7) Below is the Syntax for reference your Lightning Application in VF page using JavaScript.
$Lightning.use(“orgNamespace:ApplicationName”, function() {});
we can call $Lightning.use() multiple times on a VF page, but all calls must reference the same Lightning dependency application.
8) we can add more than 1 Lightning component by calling $Lightning.createComponent() multiple times, with multiple DOM locators.
Limitations :
1) Lightning Out requires customers to allow third-party cookies in their browser settings.
2) Not all standard Events / components(Lighting Data Service) are supported in Lightning Out. (lightning:recordForm,lightning:recordViewForm,lightning:recordEditForm,force:recordData,force:navigateToSObject,<lightning:notificationsLibrary> and force:showToast)
3) Lightning Out doesn’t handle authentication.so we have to provide Salesforce session ID or authentication token when you initialize a Lightning Out app. (VF – {!$Api.Session_ID} , OAuth – Site)
4) Using Internet Explorer 11 makes performance worse due to slower JavaScript and rendering performance
5) Lightning Out doesn’t support the File Upload component.
6) Lightning Out does NOT support custom language on Component/App level.
7) We can use more than one component in page.
Syntax :
<div id=”Learnownid”> // Display Lighting out component here.
<script>
$Lightning.use(“c:learnownApplication”, function () {
$Lightning.createComponent(“c:learnowncomponent”,{
parameter1:true,
parameter2 : ‘Learnown’
},Learnownid,function (component) {console.log(‘component loaded’)});
},
);
}
</script>