1

For example:

In case record page -

I have Aura Component and LWC Component independently, user is updating case from LWC Component. We need to capture that event show the latest update in Lightning Component.

IN LWC -

const selectedEvent = new CustomEvent('caserecordchange', { 
                detail: {caserecord: caserecord}
            });
            this.dispatchEvent(selectedEvent);

In Aura Component - How to capture this ?

2 Answers 2

2

It's the event name with "on" prefixed.

<c:my-lwc-component oncaserecordchange="{!c.handleCaseRecordChange}" />

You can read more about it in the documentation.

For the moment, the Aura compiler doesn't know what events can be fired from LWC, so be sure not to have any typos, or your event will be missed.

The documentation doesn't mention a way to broadcast to Aura components, but once you fire up from LWC to Aura, you can fire an Application Event. This is mentioned in this Trailhead module:

You can optionally fire a new Aura event to communicate with other Aura components.

This appears to be the only path forward for now. If we get pubsub for Aura, then we'd be able to use that instead.

7
  • I saw this documentation. they embedded LWC component inside Lightning Aura Component. In my scenario - Its both independent component on detail page. Mar 5, 2020 at 20:41
  • @NirmallyaGhosh Thanks for pointing that out. Added more (relevant) details.
    – sfdcfox
    Mar 5, 2020 at 20:47
  • I know how event communication works between two independent lightning component. Just asking how its work between independent LWC and Aura Component. Mar 5, 2020 at 20:58
  • @NirmallyaGhosh It doesn't. You need to send the event up to an Aura component, and then that one can fire off an Aura Application Event. There's no pubsub feature for Aura, and LWC doesn't have an Application Event model. You need a "bridge" to cross that divide.
    – sfdcfox
    Mar 5, 2020 at 21:00
  • 1
    @NirmallyaGhosh No idea. For now, this is the solution, an Aura wrapper, or at least a common parent component that can do the translation.
    – sfdcfox
    Mar 5, 2020 at 21:05
0

Disclaimer: I haven't used this feature yet.

Salesforce now has the Lightning Messaging Service as a beta feature for this use-case. Please go thru the following articles for details about how to use it:

https://developer.salesforce.com/blogs/2019/10/lightning-message-service-developer-preview.html

https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/lwc.use_message_channel

https://developer.salesforce.com/docs/component-library/bundle/lightning:messageChannel/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation

1
  • How did you enable this in Developer org or Dev Sandbox ? Its not allowing me to save the component. Below Code is not allowing me to save - <aura:component> <lightning:button onclick="{!c.publishMC}"> <lightning:messageChannel type="SampleMessageChannel__c" aura:id="sampleMessageChannel"/> </aura:component> Mar 6, 2020 at 5:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .