This article will explain how to refer a Lightning Component in a Salesforce Visualforce Page. Please follow the below steps:
Step 1:
Go to Setup -> Developer Console -> File -> New -> Lightning Component -> Enter the lightning component name as “StyleComponentWithImage”.
Step 2:
Clear the existing code and paste the below one.
<aura:component >
<div class="textStyleMaker">Lightning World</div>
<br/>
<center>
<img src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lightning_experience_basics.png"/>
</center>
</aura:component>Step 3:
Double click on “Style” from the side bar, then clear the existing code and paste the below one.
.THIS.textStyleMaker {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 76px/2 "Aclonica", Helvetica, sans-serif;
color: #0096ff;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-repeating-radial-gradient(circle closest-side, rgba(255,255,255,1) 0, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%);
background: -moz-repeating-radial-gradient(circle closest-side, rgba(255,255,255,1) 0, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%);
background: repeating-radial-gradient(circle closest-side, rgba(255,255,255,1) 0, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}Step 4:
Go to Setup Developer Console -> File -> New -> Lightning Application -> Enter the lightning app name as “SampleLightningApp“, then clear the existing code and paste the below one.
<aura:application extends="ltng:outApp"> <aura:dependency resource="c:*" type="COMPONENT"/> </aura:application>
Note:
1. You need to extend the app with “ltng:outApp” in order to access in Visualforce page.
2. aura:dependency should be included on the app with resource attribute. This will give access to the components.
3. In the above app, aura:dependency tag declared with resource attribute and “c” is default namespace and “*” matches everything in the namespace.
4. You can also declare “TYPE” attribute with the value of (COMPONENT, APPLICATION and EVENT) in dependency tag. Default value is COMPONENT.
Step 5:
Create a Visualforce page with the below code snippet.
<apex:page showHeader="false" sidebar="false">
<!-- This loads the JavaScript file needed to use Lightning Components for Visualforce-->
<apex:includeLightning />
<!-- div tag act as locator while calling Lightning.createComponent -->
<div id="lightning" />
<script>
$Lightning.use("c:SampleLightningApp", function() {
$Lightning.createComponent
("c:StyleComponentWithImage",
"",
"lightning",
function(cmp) {
// do some stuff
});
});
</script>
</apex:page>Note:
1. Added <apex:includeLightning /> in the beginning of the page. This will load a necessary JavaScript file for referring a Lightning Component.
2. To use Lightning Components in Visualforce, you need to refer a Lightning app. It can be referenced with $Lightning.use.
3. In the above code, “c:SampleLightningApp” is the lightning app name. “C” denotes the default namespace.
4. To refer or create a new lighting component from Visualforce page, use $Lightning.createComponent. Here is the Syntax,
$Lightning.createComponent(String type, Object attributes, String locator, function callback).
5. “c:StyleComponentWithImage” refers the existing Lightning component page.
6. Lightning component contents are now embedded with a Visualforce page. Save and run the Visualforce page as usual.
Output:
Reference:
