1

I am following this guide to communicate between my LWC and my aura component. But for some weird reason it still doesnt work.

myComponent.cmp

<aura:component implements="force:hasSObjectName,lightning:actionOverride" >    
    <ui:scrollerWrapper class="scrollerSize" aura:id="scrollerTop">
        <!-- Other code -->
    </ui:scrollerWrapper>
    <!-- My test Lightning Web Component -->
    <c:helloworld onfilterchange="{!c.handleEvent}"/>
</aura:component>

myComponentController.js

({
    handleEvent: function(component, event, helper) {
        console.log("BACK!");
    }
});

helloworld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    constructor(){
        super()
        window.addEventListener("message", this.fireEvent, false, {
            once: true
        });

    }



    fireEvent(event){
        const filterChangeEvent = new CustomEvent('filterchange', {
            detail: { "HELLO": 'TEST' }
        });
        try{
            var data = JSON.parse(event.data);
            if(data.ap_mobile){

                // Fire the custom event
                this.dispatchEvent(filterChangeEvent);
                console.log("Event Fired!");
            }
        }catch(error){
            console.log("Error Parsing");
        }
    }
}

The Event Fired! text is shown but thats it, the controller doesnt fire the handleEvent function at all.

What am I doing wrong?

  • wha tis the cotnext, LEX or communities? what exactly is triggering the action? – glls May 7 at 2:14
  • @glls The context is LEX – Kevin Hernandez May 7 at 2:15
  • I am testing this on the salesforce one emulator app on google chrome – Kevin Hernandez May 7 at 2:16
  • 1
    can you try <c:helloWorld and see .. – Avijit Chakraborty May 7 at 2:23
  • <c:helloWorld /> doesnt exist – Kevin Hernandez May 7 at 2:24
4

As another possible issue, you have a naming convention error.

LWC automatically forces the LWC Class name to Pascal Case, but you have a dueling format right now:

  • LWC class of HelloWorld <- this is Pascal Case

  • LWC JS of helloworld.js <- This is not, it should be helloWorld, capital W.

  • Template of helloworld.html (embedded in aura)

I just tried this and it works fine, notice the naming convention of the LWC file and its class. Everything is lowercase.

helloworld.js

import { LightningElement } from 'lwc';

export default class Helloworld extends LightningElement {
  connectedCallback() {
    const payload = {
      "hello": "test"
    }
    this.dispatchEvent(
      new CustomEvent('filterchange', {
        detail: { payload }
      })
    );
  }
}

AuraListener.cmp

<c:helloworld onfilterchange="{! c.handleChange }"></c:helloworld>

AuraListenerController.js

handleChange : function(component, event, helper) {
  let payload = event.getParam("payload");
  console.log(payload.hello) // outputs test
}
4

The issue was where I was creating the event from

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    constructor(){
        super()
        window.addEventListener("message", this.fireEvent, false, {
            once: true
        });

    }
}

Should be...

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    connectedCallback(){
        super()
        window.addEventListener("message", this.fireEvent, false, {
            once: true
        });

    }
}

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.