Call Visualforce Method From LWC

Hello friends, today we will discuss Call Visualforce Method From LWC. In Salesforce development, Visualforce pages and Lightning Web Components (LWC) are both used for building user interfaces. However, sometimes you may need to call a Visualforce method from an LWC, either to reuse an existing functionality or to integrate with a legacy system.

Also, check this: Call LWC Method From Visualforce Page

Key Highlights :

1. We can call the Visualforce method from LWC on the dispatch event.
2. Can pass parameters.
3. Simple and unique.

Code :

Step 1: First of all, we will create an LWC component from where we will call and send the data to the VF page.

lWCforVfPage.html :

<template>
	<lightning-card variant="Narrow" title="Parent Component" icon-name="standard:account">
		<div class="slds-p-horizontal_small">
			<div class="slds-p-around_medium lgc-bg">
				<lightning-input type="text" label="Name" onchange={handleName} value={Name}></lightning-input>
			</div>
			<div class="slds-p-around_medium lgc-bg">
				<lightning-input type="text" label="City" onchange={handleCity} value={City}></lightning-input>
			</div>
			<!-- call child method -->
			<div class="slds-p-around_medium lgc-bg" style="text-align: end;">
				<lightning-button variant="brand" label="Call VF Page Method" title="Call Child" onclick={callVFPageMethod}
					class="slds-m-left_x-small"></lightning-button>
			</div>
		</div>
	</lightning-card>
</template>

lWCforVfPage.JS:

import { LightningElement, api } from 'lwc';
export default class LWCforVfPage extends LightningElement {
    @api recordInfo
    Name;
    City;

    handleName(event) {
        this.Name = event.detail.value;
    }

    handleCity(event) {
        this.City = event.detail.value;
    }

    callVFPageMethod(event) {
        let paramData = { Name: this.Name, City: this.City };
        this.dispatchEvent(new CustomEvent(
            'callvf',
            {
                detail: paramData,
                bubbles: true,
                composed: true,
            }
        ));
    }
}

Step 2: Create a Lightning App so we can embed this component in this. We use this App so we can set global and also we can’t directly show Lightning Component to Visalforce Page, we need this app with extends=”ltng:outApp”. Just Wrap the LWC component in Lightning App.

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

Step 3: In this step, we create Visualforce Page where we show the lightning component. We include <apex:includeLightning /> in VF page. To load your LWC or Aura Component inside the VF page we will use $Lightning.use() method. Here we add event listener so this can be call from LWC.

lwcwithVFpage.vfp :

<apex:page sidebar="true" showHeader="true">
    <apex:includeLightning />
    <apex:slds />
    <!--Lightning Container-->
    <div style="width:100%;height:300px;" id="LightningContainer"/>
    
    <script type="text/javascript">
        document.addEventListener("callvf", function(event){
            console.log('vf event data window listener => ', event.detail);
            var name = event.detail.Name;
            var city = event.detail.City;
            // passing data to outputtext lables
            document.getElementsByClassName("name")[0].innerHTML = name;
            document.getElementsByClassName("city")[0].innerHTML = city;
        });
        
        $Lightning.use("c:LightningAppForVfPage", function() {
            $Lightning.createComponent("c:lWCforVfPage",
                                       {"recordInfo" : ""},
                                       "LightningContainer",
                                       function(cmp) {}
                                      );
        });
    </script>
    
    <apex:pageBlock title="Showing data from LWC component">
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                <apex:outputLabel value="Name" />
                <apex:outputText styleClass="name" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>
                <apex:outputLabel value="City" />
                <apex:outputText styleClass="city" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock> <br/><br/>
</apex:page>

Output :

Reference :

1. Lightning Out
2. LWC