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

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.

Don’t forget to check out:- visualforce page to retrieve data from multiple custom objects using custom controller wrapper class Click Here For More Information

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.

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

Live Demo

👉 Download Free Ebook →

👉 Get Free Course →

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

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]

```
  <apex:page >
```
```
     <apex:includeLightning />
```
```
    <div id="vfpLightningCmpId"></div> 
```
```
 
```
```
    <script>      
```

    $Lightning.use("c:visualforceToLightningCmpApp", function() {

    $Lightning.createComponent("c:currentUserDetailCmp",

```
    {       
```
```
         hdTextColor : "#ff00c8",
```
```
 
```
```
 	},
```
```
   "vfpLightningCmpId",
```
```
    function(component) {        
```

        // here we can use more lightning Component attributes and component Callback,

```
    });
```
```
 });
```
```
 </script>
```
```
</apex:page>
```

Create Lightning Application

Step 2:- Create Lightning Application : visualforceToLightningCmpApp.app

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

visualforceToLightningCmpApp.app [Component Application File]

  <aura:application access="GLOBAL" extends="ltng:outApp">

	<aura:dependency resource="c:currentUserDetailCmp"/>

```
</aura:application>
```

Create Lightning Component

Step 3:- Create Lightning Component : currentUserDetailCmp.cmp

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

currentUserDetailCmp.cmp [Lightning Component File]

  <aura:component controller="currentUserDetailCtrl">

    <aura:handler name="init" value="this" action="{!c.doInit}"/>

    <aura:attribute name="currentUserList" type="user"/>

    <aura:attribute name="hdTextColor" type="string"/>

    <div class="slds slds-p-horizontal--medium">

```
 
```

        <div class="slds-m-bottom--medium"><button class="slds-button slds-button_brand" onclick="{!c.toggleButtonAction}">Toggle Me</button> </div>

```
 
```
```
 
```

       <div class="slds-section-title--divider slds-m-bottom--medium">

        <h3 class="slds-tile__title slds-text-color--error" style="{!'color:' + v.hdTextColor}">

           Current User Information Details

```
         </h3>
```
```
        </div>
```
```
 
```
```
       <div aura:id="toggleMe">
```

        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="width:40%; border:1px #ccc solid;" >

```
          <tbody>  
```

            <tr style="background-color:#f3f3f3;">

                <td><strong>Name</strong></td>

                <td>{!v.currentUserList.Name}</td>

```
            </tr>
```
```
            <tr>
```

                <td><strong>FirstName</strong></td>

                <td>{!v.currentUserList.FirstName}</td>

```
            </tr>
```

            <tr style="background-color:#f3f3f3;">

                <td><strong>LastName</strong></td>

                <td>{!v.currentUserList.LastName}</td>

```
            </tr>
```
```
            <tr>
```

                <td><strong>Username</strong></td>

                <td>{!v.currentUserList.Username}</td>

```
            </tr>
```

            <tr style="background-color:#f3f3f3;">

                <td><strong>Country</strong></td>

                <td>{!v.currentUserList.Country}</td>

```
            </tr>
```
```
            <tr>
```

                <td><strong>Email</strong></td>

                <td>{!v.currentUserList.Email}</td>

```
            </tr>
```

            <tr style="background-color:#f3f3f3;">

                <td><strong>IsActive</strong></td>

                <td>{!v.currentUserList.IsActive}</td>

```
            </tr>
```
```
            <tr>
```

                <td><strong>Alias</strong></td>

                <td>{!v.currentUserList.Alias}</td>

```
            </tr>
```

            <tr style="background-color:#f3f3f3;">

                <td><strong>TimeZoneSidKey</strong></td>

                <td>{!v.currentUserList.TimeZoneSidKey}</td>

```
            </tr>
```
```
            <tr>
```

                <td><strong>IsPortalEnabled</strong></td>

                <td>{!v.currentUserList.IsPortalEnabled}</td>

```
            </tr>     
```

             <tr style="background-color:#f3f3f3;">

                <td><strong>Profile Name</strong></td>

                <td>{!v.currentUserList.Profile.Name}</td>

```
            </tr> 
```
```
             <tr>
```

                <td><strong>UserRole Name</strong></td>

                <td>{!v.currentUserList.UserRole.Name}</td>

```
            </tr>   
```
```
          </tbody>  
```
```
        </table>       
```
```
       </div>  
```
```
 
```
```
    </div>
```
```
 
```
```
</aura:component>
```

Step 4:- Create Lightning Component : currentUserDetailCmpController.js

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

currentUserDetailCmpController.js [JavaScript Controller]

```
  ({
```

	doInit : function(component, event, helper) {

	var action = component.get("c.currentUserDetailMethod");

        action.setCallback(this, function(response) {

            var state = response.getState();

```
            if (state === "SUCCESS") {
```

                var results = response.getReturnValue();

                component.set("v.currentUserList", results);

```
            }
```
```
        });
```
```
        $A.enqueueAction(action);
```
```
    },
```
```
 
```
```
 
```

    toggleButtonAction:function(component, event, helper){

       var toggleMe = component.find('toggleMe');

        $A.util.toggleClass(toggleMe, 'slds-hide');

```
    },
```
```
 
```
```
})
```

Step 5:- Create Apex Class : currentUserDetailCtrl.apxc

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

currentUserDetailCtrl.apxc [Apex Class Controller]

```
  public class currentUserDetailCtrl {
```
```
  @AuraEnabled 
```

    public static USER currentUserDetailMethod(){

      USER currentUserObj = [SELECT id,Name,FirstName,LastName,Username,Country,Email, IsActive, Alias,TimeZoneSidKey, IsPortalEnabled, Profile.Name,UserRole.Name FROM USER WHERE Id=:userInfo.getUserId()];

```
        RETURN currentUserObj;
```
```
    }
```
```
}
```

Further post that would you like to learn in Salesforce

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

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.

Vijay Kumar

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