3

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(),system: this.system,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>
  • 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
4

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>
| improve this answer | |
  • salesforce-sas Thank you this was exacly what I needed. – Bruce B Sep 16 '19 at 19:56
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/

| improve this answer | |

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.