2

I have a custom lwc component embedded inside another custom aura component.

This lwc dispatches custom event with data for aura to retrieve and process but I can't get any info although it's capturing the event.

customlwc.js

handledataChange(event){ this.dispatchEvent('handleResponse', { message : event.detail.value }); }

customaura.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"> <c:customlwc onhandleResponse="{!c.handleResponse}"/> </aura:component>

customaura.js

({ handleResponse: function(component, event, helper) { console.log(event.getParam('message')) //this displays undefined }, })

Is there something I'm missing or isn't this the proper way to retrieve event info?

EDIT (added lwc code for event launch)

 @wire (getInitialInfo, {recordId : '$recordId'}) wiredGetInitialInfo ({error, data}){ //Data if(data){ //Success if(data.success){ this.dispatchEvent(new CustomEvent('handleSCResponse', { message : 'Operation completed successfully' })); } //Error else{ //for enclosing aura this.dispatchEvent(new CustomEvent('handleSCResponse'), { message : 'Error found '}); } } //Error else if(error){ this.dispatchEvent(new CustomEvent('handleSCResponse'), { message : 'Unexpected error' }); } }
Improve this question
2
  • Csn you add the code where you have fired the event from lwc? Commented Feb 5, 2020 at 7:45
  • 1
    @rahulgawale I've added the code now. Thanks! Commented Feb 5, 2020 at 7:50

4 Answers 4

Reset to default
4

Your event name does not match here.

<c:customlwc onhandleResponse="{!c.handleResponse}"/>

You are firing event with name = handleSCResponse, so you need to prefix on to your event name, ex onhandlescresponse. The corrected code of handling it from the parent component is below.

<c:customlwc onhandlescresponse="{!c.handleResponse}"/>

So in detail, this is how you fire an event.

const eventName = 'onhandlescresponse'; const event = new CustomEvent(eventName, { detail: { message: 'Operation completed successfully' } }); this.dispatchEvent(event);

This is how you handle it.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"> <c:customlwc onhandlescresponse="{!c.handleResponse}"/> </aura:component>

Although it is supported in the aura parent, its recommended to give the lowercase name for an event.

Improve this answer
2

There are some changes you need to do:

1) The name of the event should always be in small letters.[ handleResponse -> handleresponse]

2) For firing the event write -

this.dispatchEvent(new CustomEvent('handlescresponse'), { detail: { message: 'Unexpected error.' } });

For more information see section "Sending Events to an Enclosing Aura Component" in - https://trailhead.salesforce.com/en/content/learn/modules/lightning-web-components-for-aura-developers/communicate-with-events

Improve this answer
3
  • The event name need not be lowercase. Commented Feb 5, 2020 at 9:00
  • The DOM event standard for event names - No uppercase letters, No spaces, Use underscores to separate words. Reference - developer.salesforce.com/docs/component-library/documentation/… Also, correct me If I am wrong here. Thanks Commented Feb 5, 2020 at 9:31
  • Yeah, you are right, that is not recommended, when you are handling event from another lwc, and does not even let you save the component. but for aura components, it accepts the capital letters as well, and even its case insensitive in aura parent. We should always go with a lowercase name for even name. thanks for correcting me. Commented Feb 5, 2020 at 9:42
0

Use this code in place of your aura component

While creating custom event use following: Because we can't use capital letters in the name of the event, so use this code to dispatch events.

this.dispatchEvent(new CustomEvent('handlescresponse', { message : 'Operation completed successfully' }));

then for handling event use following code

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"> <c:customlwc onhandlescresponse="{!c.handleResponse}"/> </aura:component>

Hope this works fine

Improve this answer
2
  • 1
    Can you describe what is different about your code vs. molinet's and why this approach would work? Commented Jun 26, 2020 at 12:41
  • I used this approach and this worked fine for me Commented Jun 30, 2020 at 6:52
0

Link to Documentation

If you need to send a primitive type and not a complex object in the event detail, another approach is something like this-

handledataChange(event){ let message = event.detail.value; this.dispatchEvent('handleResponse', { detail : message }); }

The rest of the Aura code will work as is.

Doing something like this also works-

this.dispatchEvent('handleResponse', { detail : {message : event.detail.value } );

In both the cases, event.getParam('message') should give you the value in Aura.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.