You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

How to Refer a Lightning Component in a Visualforce Page


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:

salesforce visualforce page

Reference:

Add Lightning Components to Visualforce Pages

aura:dependency