0

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 ?

1

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.

| improve this answer | |
  • I saw this documentation. they embedded LWC component inside Lightning Aura Component. In my scenario - Its both independent component on detail page. – Nirmallya Ghosh Mar 5 at 20:41
  • @NirmallyaGhosh Thanks for pointing that out. Added more (relevant) details. – sfdcfox Mar 5 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. – Nirmallya Ghosh Mar 5 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 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 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

| improve this answer | |
  • 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> – Nirmallya Ghosh Mar 6 at 5:27

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.