Create your own components
Learn to create and implement Lightning web components or Aura components.
You must create your own Lightning web components or Aura components. See the following Salesforce documentation for steps about creating LWC or Aura components:
When creating components, you must ensure your component implementation meets the following requirements:
-
The
pageState,metricState,quoteState, andtextTitleattributes must be declared as global attributes.Component type
Code example
LWC
@api quoteState; @api metricState; @api pageState; @api textTitleAura
<aura:attribute name="quoteState" type="Map" access="global" /> <aura:attribute name="metricState" type="Map" access="global"/> <aura:attribute name="pageState" type="Map" access="global"/> <aura:attribute name="textTitle" type="String" access="global"/>
-
Custom components must be declared globally or exposed.
|
Component type |
Code example |
|---|---|
|
LWC |
In LWC metadata file:
|
|
Aura |
|
Register and dispatch events
After your component is implemented, you need to register and dispatch events in your code implementation. See the following Salesforce documentation for instructions:
-
For Aura components, see Fire Component Events.
-
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.