Call LWC Method From Visualforce Page

Hello friends, today we are going to discuss Call LWC Method From Visualforce Page. We can call very easily LWC public method from the Visualforce page.

Also, check this: Add Buttons In LWC Datatable Salesforce

Key Highlights :

1. Create an LWC component with the method you want to call.
2. In the LWC component, annotate the method with @api, which makes it accessible to the VF page.

Code :

Step 1: Create a Lightning Web Component which will be shown on Visalforce Page. Defined API decorator variable public method.

lWCforVfPage.html :

<template>
    <!-- LWC card -->
    <lightning-card  variant="Narrow"  title="Message" icon-name="standard:contact">
        <div class="slds-p-horizontal_small">
            <p> Message FROM VF : {message}</p>
        </div>
    </lightning-card> 
    <!-- End LWC Card -->
</template>

lWCforVfPage.JS:

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

    @api handleVFCall(message){
        this.message = message;
    }
}

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.

<apex:page sidebar="true" showHeader="true">
    <apex:includeLightning />
    <apex:slds />
    <!--Lightning Container-->
    <div style="width:100%;height:200px;" id="LightningContainer"/>
     
    <script type="text/javascript">
    //get contact Id from URL
    var contactId = "{!$CurrentPage.parameters.id}";
     
    //Create Lightning Component
    $Lightning.use("c:LightningAppForVfPage", function() {
        $Lightning.createComponent("c:lWCforVfPage", 
                                   { "recordInfo" : contactId }, //Pass Parameter
                                   "LightningContainer", function(component) {
                                       console.log('Component created Successfully');
                                   });
    });
    
    function callLWCMethod() {
        let message = document.getElementById('messageId').value;
        var lwcComponent = document.querySelector("c-l-w-cfor-vf-page");
        lwcComponent.handleVFCall(message);
    }
    </script>
    
    <apex:form id="form1">
        <div class="slds-p-around_medium">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-01">Message</label>
                <div class="slds-form-element__control">
                    <textarea id="messageId" placeholder="type message" class="slds-textarea"></textarea>
                </div>
            </div>
            <!--Button to call Javascript method-->
            <div class="slds-m-top_small slds-text-align_center">
                <button class="slds-button slds-button_brand" onclick="callLWCMethod();return false;">Send Message To Aura</button>
            </div>
        </div>
    </apex:form>
</apex:page>

Output :

Reference :

1. LWC