1

i would like to call an Application event in Lightning web component. Below link describes the same in AURA.

https://developer.salesforce.com/docs/atlas.en-us.218.0.lightning.meta/lightning/events_application_example.htm

and when im trying with pubsub,i am not able to deploy. Below syntax i have used:

import { fireEvent } from 'c/pubsub';

closed as off-topic by Jayant Das, Raul, Pranay Jaiswal, glls, Martin Lezer May 28 at 12:14

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – Jayant Das, Raul, Pranay Jaiswal, glls, Martin Lezer
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Article you've mentioned is about Application event in aura components, not web components. Also your question and code is not sufficient to provide any pointers. – Raul May 24 at 10:49
3

This is a note from the Lightning Web Components documentation, on the "Migrate Events" page:

There's no direct equivalent in Lightning web components for application events in Aura components. Application events can be problematic in complex apps because any component can handle the event. This pattern can lead to code that is hard to maintain.


This is how you do it in LWCs:

Instead of event.fire() in an Aura component, use this.dispatchEvent(myEvent), which is a standard DOM method, in Lightning web components.

For example, if your component has a list of card consisting of contact components, and you want them to be highlighted when selected:

You would have a tag with a onclick, for example, that points to your handler in your component:

<a href="#" onclick={selectHandler}>
   ...
</a>

When the user clicks on that, the component's selectHandler method will be called:

selectHandler(event) {
    // Prevents the anchor element from navigating to a URL.
    event.preventDefault();

    // Creates the event with the contact ID data.
    const selectedEvent = new CustomEvent('selected', { detail: this.contact.Id });

    // Dispatches the event.
    this.dispatchEvent(selectedEvent);
}

Then, in another place of your application, you will have another component that handles that 'selected' event:

<c-contact-list-item key={contact.Id} contact={contact} onselected={contactSelected}></c-contact-list-item>

That component will then handle the event and act accordingly:

contactSelected(event) {
    const contactId = event.detail;
    this.selectedContact = this.contacts.data.find(contact => contact.Id === contactId);
}

If you want to fire an application event from a Lightning Web Component, but want an Aura Component to handle, you'll have to use a wrapper for it (that is, put your LWC inside an Aura Component). It would be a similar approach: you fire the event from your LWC, handle it on your Aura Component, using the on approach. Check this question for further reference on this: Force refresh view in LWC.

Not the answer you're looking for? Browse other questions tagged or ask your own question.