How to Refer a Lightning Component in a Visualforce Page

This article will explain how to refer a Lightning Component in a Visualforce Page. Please follow the below steps:

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

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.