Lightning Out
Here i am going to share little information that you need to take care off while using lightning out.
Lightning out allow you to embed your Lightning components app in the remote web container, or origin server. This means you can use your Lightning Components inside of an external site (i.e. Sharepoint or SAP), in a hybrid app built with the Mobile SDK, or even elsewhere in the App Cloud like on Heroku or in a Visualforce Page.
Using the Lightning Out JavaScript libraries you can embed Lightning Components in an app across domains and manage interactions between the component and the app directly in the DOM.
For using lightning out there are some points you need to keep in mind:-
1) You must have an app that is extending "ltng:outApp" :-*myLightningApp.app*
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:myLightningComponent"/>
</aura:application>
where c:myLightningComponent is your lightning component that you wanna show on your visual force page.
For more details:-
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_out.htm
NOTE:-
A Lightning dependency app must do the following:-
*Set access control to GLOBAL.
*Extend from either ltng:outApp or ltng:outAppUnstyled.
*List as a dependency every component that is referenced in a call to $Lightning.createComponent().
In this example, <c:myLightningComponent> is the top-level component for the Lightning components app you are planning to create on the origin server using $Lightning.createComponent(). Create a dependency for each different component you add to the page with $Lightning.createComponent().
2) Sample code for accessing the above lightning out app in VF page given below:-
<body>
<div id="myDivId">
</div>
<script>
var myUserContext = "{!$User.UITheme}";
$Lightning.use("c:myLightningApp", function() {
$Lightning.createComponent(
"c:myLightningComponent",
{ UserContext: myUserContext },
"myDivId",
function(cmp) {
console.log('component created');
console.log(cmp);
});
});
</script>
</body>
NOTE :-
You can’t use more than one Lightning dependency app on a page. You can call $Lightning.use() more than once, but you must reference the same dependency app in every call.
Make Sure you enter each component carefully because javascript is casesensitive.
3) Javascript is case-sensitive:-
For accessing each component on the page be careful while giving the name to each component because javascript is case-sensitive.
This comment has been removed by a blog administrator.
ReplyDelete