convert visualforce to lightning component -- w3web.net

How to communicate between lightning component and Visualforce page Using aura:dependency and ltng:outApp in Salesforce | how to call lightning component from visualforce page

1,007 views

Hey guys, today in this post we are going to learn about How to communicate between lightning component and Visualforce page Using aura:dependency and ltng:outApp in Salesforce.

Real time scenarios:- Convert Visualforce to lightning component using aura:dependency and ltng:outApp and display User information in html table formats.

 

Files we used in this post example

visualforceToLightningCmp.vfp Visualforce Page It use to access, display and update the data on webserver page.

visualforceToLightningCmpApp.app

Apex Class Controller It is used to call the component into visualforce page
currentUserDetailCmp.cmp Lightning Component It is used for create a table for display the User Information Detail.
currentUserDetailCmpController.js Component Controller Javascript It is used for communicate to server side apex method and fetch the User Info details from doInit fuction.
currentUserDetailCtrl.apxc Apex Class Controller It is used for create apex class method to retrieve the user detail information.

Live Demo

convert visualforce to lightning component -- w3web.net

 

Other related post that would you like to learn in Salesforce

 

Create Visualforce Page

Step 1:- Create Visualforce Page : visualforceToLightningCmp.vfp

From Developer Console >> File >> New >> Visualforce Page

visualforceToLightningCmp.vfp [Component Visualforce Page]

 

Create Lightning Application

Step 2:- Create Lightning Application : visualforceToLightningCmpApp.app

From Developer Console >> File >> New >> Lightning Application

visualforceToLightningCmpApp.app [Component Application File]

Create Lightning Component

Step 3:- Create Lightning Component : currentUserDetailCmp.cmp

From Developer Console >> File >> New >> Lightning Component

currentUserDetailCmp.cmp [Lightning Component File]

 

Step 4:- Create Lightning Component : currentUserDetailCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

currentUserDetailCmpController.js [JavaScript Controller]

Step 5:- Create Apex Class : currentUserDetailCtrl.apxc

From Developer Console >> File >> New >> Apex Class

currentUserDetailCtrl.apxc [Apex Class Controller]

 

convert visualforce to lightning component -- w3web.net

 

Further post that would you like to learn in Salesforce

 
 

 


 

FAQ (Frequently Asked Questions)

How do I transfer data from VF page to lightning component?

If multiple visualforce pages are included in a lightning component, then you need to get the window object of every visualforce page and send the message to each window object by calling window. postMessage().

How do lightning components communicate?

Communication between the two Salesforce Lightning Components simply means the transfer of data from the child component to parent component or from parent component to child component. Any lightning component cannot communicate directly with its parent component and vice-versa.

How does a component communicate down the component hierarchy?

Tip To communicate down the component containment hierarchy, pass properties to the child via HTML attributes, or call its public methods. To communicate between components, use Lightning message service or a publish-subcribe utility. Create and dispatch events in a component's JavaScript class.

Related Topics | You May Also Like

  • Your reaction of the article ▾
 

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

9 thoughts on “How to communicate between lightning component and Visualforce page Using aura:dependency and ltng:outApp in Salesforce | how to call lightning component from visualforce page”

Leave a Comment