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?

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

2 Answers 2

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
        });

    }
}

You must log in to answer this question.

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