Welcome to Zuora Product Documentation

Explore our rich library of product information

Register and dispatch events

Learn how to register and dispatch events in Aura components and LWC.

After your component is implemented, you need to register and dispatch events in your code implementation. See the following Salesforce documentation for instructions:
  1. For Aura components, see Fire Component Events.
  2. For LWC, see Create and Dispatch Events.

    Aura example:

    If you want to register the updateQuote event for an Aura component, you can use the following sample codes:
    <aura:registerEvent name="updateQuote" type="zqu:quoteUpdate"/>
    
    Then use the following code to fire the event:
    let quote = component.get("v.quoteState.quote");
    let updateQuote = cmp.getEvent("updateQuote");
    updateQuote.setParams({ quote: quote });  
    updateQuote.fire();

    LWC example:

    When dispatching custom events in LWC, it is important to adhere to the standard of using all lowercase letters for event names. Uppercase letters are not allowed in custom event names as per LWC guidelines. Here's an example to illustrate this:
    const updateQuote = new CustomEvent('updatequote', {
        detail: { quote: this.quoteState.quote },
      });
      this.dispatchEvent(updateQuote);

    Events should be dispatched with the listed parameters to persist any data changes within the Quote Studio page. For more information, see Headless and sidebar component - events.