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,233 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

 

You can download file directly from github by Click Here.

 

 

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]

  1.   <apex:page >
  2.      <apex:includeLightning />
  3.     <div id="vfpLightningCmpId"></div> 
  4.  
  5.     <script>      
  6.     $Lightning.use("c:visualforceToLightningCmpApp", function() {     
  7.     $Lightning.createComponent("c:currentUserDetailCmp",
  8.     {       
  9.          hdTextColor : "#ff00c8",
  10.  
  11.  	},
  12.    "vfpLightningCmpId",
  13.     function(component) {        
  14.         // here we can use more lightning Component attributes and component Callback,
  15.     });
  16.  });
  17.  </script>
  18. </apex:page>

 

Create Lightning Application

Step 2:- Create Lightning Application : visualforceToLightningCmpApp.app

 
βœͺ The Big Announcement: -
As per student's demands, I re-opened my eBook of "Salesforce Tutorial" Limited-time huge discount offer Absolutely 50% Off.
I am thinking to give you discount offer occasion of Gandhi Jayanti for a powerful "Salesforce admin course" where you can Understand from Basic Concepts to advanced label in Salesforce.
πŸ‘‰ So Don't MISS it... (Access Right Now)
πŸ‘‰ Get Huge Discount Offer 50%: - Get eBook
 

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

visualforceToLightningCmpApp.app [Component Application File]

  1.   <aura:application access="GLOBAL" extends="ltng:outApp">
  2. 	<aura:dependency resource="c:currentUserDetailCmp"/>
  3. </aura:application>

Create Lightning Component

Step 3:- Create Lightning Component : currentUserDetailCmp.cmp

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

currentUserDetailCmp.cmp [Lightning Component File]

  1.   <aura:component controller="currentUserDetailCtrl">
  2.     <aura:handler name="init" value="this" action="{!c.doInit}"/>
  3.     <aura:attribute name="currentUserList" type="user"/>     
  4.     <aura:attribute name="hdTextColor" type="string"/>
  5.     <div class="slds slds-p-horizontal--medium">
  6.  
  7.         <div class="slds-m-bottom--medium"><button class="slds-button slds-button_brand" onclick="{!c.toggleButtonAction}">Toggle Me</button> </div>
  8.  
  9.  
  10.        <div class="slds-section-title--divider slds-m-bottom--medium"> 
  11.         <h3 class="slds-tile__title slds-text-color--error" style="{!'color:' + v.hdTextColor}">
  12.            Current User Information Details 
  13.          </h3>
  14.         </div>
  15.  
  16.        <div aura:id="toggleMe">
  17.         <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="width:40%; border:1px #ccc solid;" >            
  18.           <tbody>  
  19.             <tr style="background-color:#f3f3f3;">
  20.                 <td><strong>Name</strong></td>
  21.                 <td>{!v.currentUserList.Name}</td>                                    
  22.             </tr>
  23.             <tr>
  24.                 <td><strong>FirstName</strong></td>
  25.                 <td>{!v.currentUserList.FirstName}</td>                                    
  26.             </tr>
  27.             <tr style="background-color:#f3f3f3;">
  28.                 <td><strong>LastName</strong></td>
  29.                 <td>{!v.currentUserList.LastName}</td>                                    
  30.             </tr>
  31.             <tr>
  32.                 <td><strong>Username</strong></td>
  33.                 <td>{!v.currentUserList.Username}</td>                                    
  34.             </tr>
  35.             <tr style="background-color:#f3f3f3;">
  36.                 <td><strong>Country</strong></td>
  37.                 <td>{!v.currentUserList.Country}</td>                                    
  38.             </tr>
  39.             <tr>
  40.                 <td><strong>Email</strong></td>
  41.                 <td>{!v.currentUserList.Email}</td>                                    
  42.             </tr>
  43.             <tr style="background-color:#f3f3f3;">
  44.                 <td><strong>IsActive</strong></td>
  45.                 <td>{!v.currentUserList.IsActive}</td>                                    
  46.             </tr>
  47.             <tr>
  48.                 <td><strong>Alias</strong></td>
  49.                 <td>{!v.currentUserList.Alias}</td>                                    
  50.             </tr>
  51.             <tr style="background-color:#f3f3f3;">
  52.                 <td><strong>TimeZoneSidKey</strong></td>
  53.                 <td>{!v.currentUserList.TimeZoneSidKey}</td>                                    
  54.             </tr>
  55.             <tr>
  56.                 <td><strong>IsPortalEnabled</strong></td>
  57.                 <td>{!v.currentUserList.IsPortalEnabled}</td>                                    
  58.             </tr>     
  59.              <tr style="background-color:#f3f3f3;">
  60.                 <td><strong>Profile Name</strong></td>
  61.                 <td>{!v.currentUserList.Profile.Name}</td>                                    
  62.             </tr> 
  63.              <tr>
  64.                 <td><strong>UserRole Name</strong></td>
  65.                 <td>{!v.currentUserList.UserRole.Name}</td>                                    
  66.             </tr>   
  67.           </tbody>  
  68.         </table>       
  69.        </div>  
  70.  
  71.     </div>
  72.  
  73. </aura:component>

 

Step 4:- Create Lightning Component : currentUserDetailCmpController.js

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

currentUserDetailCmpController.js [JavaScript Controller]

  1.   ({
  2. 	doInit : function(component, event, helper) {
  3. 	var action = component.get("c.currentUserDetailMethod");
  4.         action.setCallback(this, function(response) {
  5.             var state = response.getState();
  6.             if (state === "SUCCESS") {
  7.                 var results = response.getReturnValue();              
  8.                 component.set("v.currentUserList", results);
  9.             }
  10.         });
  11.         $A.enqueueAction(action);
  12.     },
  13.  
  14.  
  15.     toggleButtonAction:function(component, event, helper){
  16.        var toggleMe = component.find('toggleMe');
  17.         $A.util.toggleClass(toggleMe, 'slds-hide');
  18.     },
  19.  
  20. })

Step 5:- Create Apex Class : currentUserDetailCtrl.apxc

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

currentUserDetailCtrl.apxc [Apex Class Controller]

  1.   public class currentUserDetailCtrl {
  2.   @AuraEnabled 
  3.     public static USER currentUserDetailMethod(){    
  4.       USER currentUserObj = [SELECT id,Name,FirstName,LastName,Username,Country,Email, IsActive, Alias,TimeZoneSidKey, IsPortalEnabled, Profile.Name,UserRole.Name FROM USER WHERE Id=:userInfo.getUserId()];
  5.         RETURN currentUserObj;
  6.     }
  7. }

 

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

 
   
 
 

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

Leave a Comment