5

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>
1
  • 1
    I figured out how to make it work by wrapping the LWC component in a aura component but it would be cleaner to not have to do this. – Bruce B Sep 13 '19 at 14:02
7

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>
2
  • salesforce-sas Thank you this was exacly what I needed. – Bruce B Sep 16 '19 at 19:56
  • This helped me too. But how to send it from Vf page to LWC. I cant use LMS – NBR Jan 6 at 11:57
0

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/

3
  • Sadly not available for Lightning out yet. – Kennedy Nyaga Mar 21 at 1:14
  • :( so many things not available for Lightning out . – manhnt.bkit Mar 26 at 4:21
  • @manhnk.bkit you actually don't need this. See my answer below. – Kennedy Nyaga Mar 27 at 6:03
0

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."
      })
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.