Send data from Lightning Web Component (LWC) to a Visualforce page

Question

I am adding an LWC component in visualforce and need to add a handler for an event fired in the LWC component on the visualforce page. When googling all I can find is examples of how to do this with aura component using application events.

LWC controller:

handleSearchClick() {
        
    const searchinfo = { 
        shipper: this.shipper,
        system: this.system,
        product: this.product,
        status: this.template.querySelector('c-lwc-multi-select').value(),
        period: this.period  
    };
    this.dispatchEvent(new CustomEvent(
        'dosearch', 
        {
            detail: { data:  searchinfo},
            bubbles: true,
            composed: true,
        }
    ));
    console.log({ 'lwcNominationSearch searchinfo': searchinfo });
}

AURA app:

<aura:application extends="ltng:outApp" access="GLOBAL">
<aura:dependency resource="c:lwcNominationSearch" />
<aura:dependency resource="markup://force:*" type="EVENT"/>
</aura:application>

Visualforce:

<div id="rcontainer">
</div>

<script>
    $Lightning.use("c:NotificationSearch_ltngoutApp", function()
    {
        $Lightning.createComponent(
        "c:lwcNominationSearch",
        {},
        "rcontainer",
        function(cmp)
        {
            console.log('component created');
             //$A.eventService.addHandler({ "event": "c:myEvent", "handler" : visualForceFunction})
              $A.eventService.addHandler({
                event: 'dosearch',
                handler: function (event) {

                        console.log("vf event success");
                }
            });

        });
    });
</script>

Answer 1

You implemented correctly in LWC of dispatching event. However callback function is not meant for adding some event handlers. You should add event listener directly. Below is the code with changes needed in vf page:

<script>
document.addEventListener("dosearch", function(event){
    console.log('vf event data window listener => ', event.detail);
});

$Lightning.use("c:NotificationSearch_ltngoutApp", function() {
    $Lightning.createComponent("c:lwcNominationSearch",
                               {},
                               "rcontainer",
                               function(cmp) {}
                              );
});
</script>

Answer 2

For a full compilation of what is needed. My use case uses openCTI that uses a Lightning out adapter.

VF Page

<apex:page>
    <apex:includeLightning />
    <script type="text/javascript" src="/support/api/51.0/lightning/opencti.js"></script>
   
    <div id="lightning"></div>

    <script type="text/javascript">
        $Lightning.use("c:sampleOut", function () {
            $Lightning.createComponent("c:sampleLWC",
                {},
                "lightning",
                function (cmp) {

                    document.querySelector('c-sample-lwc').addEventListener('samplemessage', (e) => {
                        client.call(e.detail);
                    });

                    console.log(document.querySelector('c-sample-lwc').dispatchEvent(new CustomEvent('sampleresponse', {detail: 'Message Received'})));
                });
        });

    </script>
</apex:page>

AuraAdapter : sampleOut.app

<aura:application extends="ltng:outApp"  access="GLOBAL" description="The Lightning Out app which hosts the cti adapter." >
    <aura:dependency resource="c:sampleLWC"/>
</aura:application>

Lightning Component: sampleLWC.js

import { LightningElement } from "lwc";

export default class sampleLWC extends LightningElement {
  
  constructor() {
    super();
    this.addEventListener("sampleresponse", (e) => {
      console.log(e.detail);
    });
  }

  handleClick() {
    this.dispatchEvent(
      new CustomEvent("samplemessage", {
        detail: "Hurry! the British are coming."
      })
    );
  }
}

Answer 3

From the Winter ’20 release, you can use Lightning message service. This is an example: http://www.webuildsf.cloud/salesforce-crm/an-example-to-communicate-between-lightning-web-components-and-visualforce-pages/