Display lightning component on visualforce page

Hey cafeForce users,

Displaying lightning component on the visualforce page is very easy & a trick of 3 minutes.

  1. Add the ‘Lightning Components for Visualforce’ JS (JavaScript) library to your VF page using the <apex:includeLightning/> component.
  2. Create a lightning outApp Lightning app that declares your component dependencies.
  3. Write a JavaScript function on the visualforce page that creates the component on the page dynamically using Lightning App using $Lightning.createComponent().

What is lightning outApp?
Use Lightning Out to run Lightning components apps outside of Salesforce servers. Lightning outApp lets you embed Lightning components on almost any type of web page or web app. Whether it’s a Node.js app running on Heroku or any other platform.

Let’s create a simple lightning component and use it on a visualforce page.

Requirement:

 

Step-1: Open the LightningOnVF.cmp and paste the below code.

 

Step-2: Open the CustomApp.app and paste the below code.

 

What is Lightning Out Dependency?
It is used to describe the component dependencies of a Lightning components app to be deployed using Lightning Out. When a Lightning components app is initialized using Lightning Out, it loads the definitions for the components in the app. Specifying component dependencies loads components fast and efficiently.

So our component is now ready to use, let’s stick it to VF page now.

Step-3: Open the LightningVFpage.page and paste the below code.

 

How to pass parameters/ set attributes of a lightning component?
Here we have passed 2 parameters to the lightning component. While calling a component here pass the parameters value the same way as we pass in dynamic component creation. The attributes should e public or global.

lightning component on vf page

Our code is ready now, run it and check if your component open here. Cheers…..:)

Leave a Reply

Your email address will not be published. Required fields are marked *