4

I am just learning LWC and have some proplems wrapping my mind around event propagation. I have a Lightning Web Component that dispatches a "submitsuccess" event that should be handled by the LWC's container (which is an aura component). However, I am unable to properly register the event handler in the container component.

Here's my code:

<!-- child component that dispatches the event -->
<template>
    <lightning-record-edit-form object-api-name="Angebotsvariante_Position__c" onsuccess={handleRecordInsertNotify}>
   ...
   </lightning-record-edit-form>
</template>
// handler in the child component
handleRecordInsertNotify(event) {

    event.preventDefault();
    // create custom bubbling submit event that can be received from the parent component
    const successEvent = new CustomEvent('submitsuccess', {
        bubbles: true,
        composed: true
    });
    this.dispatchEvent(successEvent);
}
// the dynamic javascript in the aura container that is expected to react
$A.createComponent(
    'c:myCustomChild',
    {
        quoteVariationId: angebotsvarianteId
    },
    function(newCustomPosCreate, status, errorMessage) {
        if (status === 'SUCCESS') {

            // register an event listener at the main component, that catches the success event and closes the overlay
            component.addEventHandler(
                'submitsuccess',
                function(event) {
                    console.log('Event has been caught');
                }
            );

            // put the custom position create as custom modal in the overlay lib
            component.find('overlayLib').showCustomModal({
                body: newCustomPosCreate,
                showCloseButton: true,
                closeCallback: function() {
                    // some helper code
                }
            });

        } else {
            console.log('Status: ' + status);
            console.log('Errors: ' + errorMessage);
        }
    }
);

The function in addEventHelper never fires. However, debug logs seem to indicate, that the event has been dispatched. Im still a beginner with events and LWC (lightning components in general).

All I want to achieve is to close the modal popup after a record has been successfully submitted (hence the "onsuccess" event handler). If there is an easier way, please tell me!

  • in what context? lex, communities? – glls Jul 16 '19 at 23:34
  • are you dynamically creating lwc component from aura? – Pranay Jaiswal Jul 17 '19 at 8:35
  • Yes, I am dynamically creating LWC from Aura (this is the last snippet). And its just an user interface for internal users (LEX, I guess) – J. Lietzau Jul 17 '19 at 9:09
8

You can add event listener like below:

$A.createComponent(
        'c:myCustomChild',
        {
            onsubmitsuccess: component.getReference("c.handleSubmitSuccess"),
            quoteVariationId: angebotsvarianteId
        },
        function(newCustomPosCreate, status, errorMessage) {
            if (status === 'SUCCESS') {
                // -------- process callback-------------                    
            } else {
                console.log('Status: ' + status);
                console.log('Errors: ' + errorMessage);
            }
        }
    );

Now implement handleSubmitSuccess

handleSubmitSuccess : function(component, event, helper) {
    console.log('Event has been caught');
    //if you are passing data in detail of event
    //console.log(event.getParam("--data--"));
}

Additional info: In LWC, there is no concept of creating event component/register-event/handler-event.

You just dispatch event like this:

this.dispatchEvent(new CustomEvent('myevent', {
    detail: {
        data: someData
    }
}));

to handle this in parent LWC component:

<c-child-comp onmyevent={handleEvent}></c-child-comp>

to get the data from event in handler

handleEvent = event => { let myData = event.detail.data; }

For parent AURA component:

<c:childComponent onmyevent="{!c.handleEvent}"></c:childComponent>

to get data in handler:

handleEvent(cmp,event){ let myData = event.getParam('data'); }

Note: 1. You can also use addEventListener. But I think above method is less confusing.
2. Use bubble, composed and cancellable carefully. Read documentation before using them.
3. When you dispatch custom event, you need to add "on" before event name/type if you are handling event directly during declaration. Or else if you are using addEventListener in parent component javascript, you need to use event name as is.

| improve this answer | |
  • Thank you for your feedback. I am already aware how to "hard code" an event listener to an LWC that is embedded in HTML (and in general, write aura wrappers to embed LWC). The question is all about dynamically adding event listeners with JavaScript. Side note: You made a small mistake on the HTML snippet: The event handler has to be on the <c:myChildComponent> tag, that is embedded in the <c:myParentAuraComponent> – J. Lietzau Jul 18 '19 at 7:16
  • thanks for highlighting, added solution above – salesforce-sas Jul 18 '19 at 8:16

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.