Customize Quote Studio sidebar with Extensibility Framework

Create your own 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:

• Create Lightning Web Components
• Creating Aura Components 

When creating components, you must ensure your component implementation meets the following requirements:

• The pageState, metricState, quoteState , and textTitle attributes must be declared as global attributes.

  Component type	Code example
  LWC	@api quoteState; @api metricState; @api pageState; @api textTitle
  Aura	<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:<isExposed>true</isExposed>
  Aura	<aura:component access="GLOBAL">

• To persist any data changes within the Quote Studio page, the following events should be dispatched with the listed parameters: 

  Event type	Paramemeter	Parameter type	Description
  updateQuote	quote	Javascript object	Overrides the existing quote with the parameter value and recalculates ramp intervals , and terms and conditions if necessary. A Preview an order call is initiated unless the Enable Preview On Demand Quote Studio admin setting is enabled.
  upsertQuoteLineItems	quoteLineItems	Javascript object	Override existing list of quote line items with the parameter value. A Preview an order call is initiated unless the Enable Preview On Demand Quote Studio admin setting is enabled.
  addQuoteLinesItems	prodIds: a list of productRatePlan ids with one-time flat-fee charges effectiveDate	prodIds: List effectiveDate: String	Add the one-time flat fee charges associated with the prodIds parameter as line items to the quote as of the effective date. A Preview an order call is initiated unless the Enable Preview On Demand Quote Studio admin setting is enabled.
  addProducts	prodIds: a list of productRatePlan ids effectiveDate	prodIds: List effectiveDate: String	Adds the product rate plans listed in the prodIds parameter to the quote subscription as of effectiveDate. A Preview an order call is initiated unless the Enable Preview On Demand Quote Studio admin setting is enabled.
  updateProducts	productTimelines	Javascript object	Overrides the existing productTimelines list with the parameter value. A Preview an order call is initiated unless the Enable Preview On Demand Quote Studio admin setting is enabled. Note: This method does not initiate any recalculation of the fields on the product. The custom component is responsible for recalculating the associated fields such as Effective Price and Discount, if you manually change these field values.
  previewQuoteState	N/A	N/A	Initiates a Preview an order call.
  saveQuote	N/A	N/A	Saves the existing quote and triggers a Preview an order call.
  toastMessageDisplay	message theme: the value can be warning, error, or success. timeout: optional, defaults to 5000	message: String theme: String timeout: Integer	Shows a toast message defined by the parameters.

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:registerEvent name="updateQuote" type="zqu:quoteUpdate"/>

let quote = component.get("v.quoteState.quote");
let updateQuote = cmp.getEvent("updateQuote");
updateQuote.setParams({ quote: quote });  
updateQuote.fire();

const updateQuote = new CustomEvent('updateQuote', {
    detail: { quote: this.quoteState.quote },
  });
  this.dispatchEvent(updateQuote);

Register custom component in CPQ X

After you have completed the code implementation of your components, you must register your components in CPQ X so that the custom UI components are rendered in the Quote Studio sidebar.

Take the following steps to register a custom component in CPQ X:

1. Navigate to Zuora Config > Quote Studio Settings > Custom Component Settings.
2. Click the Create New Component button.
3. Complete the component information for registration. 
   • (Optional) Component Namespace: Enter the namespace of your component.
   • Component Name: Enter the name of the component. 
   • Component Type: Select Aura or LWC from the dropdown lists.
   • (Optional) Component Event Action: Select the event actions you want to handle in your component.
   • Active: Select this check box if you want to activate the registered component on registration.
   • Sort Order: Enter the number of the sequence number such as 1. The registered components are sorted and displayed in the ascending order based on the Sort Order value. 
   • (Optional) Title Text: The title text for the registered component.
   • Image Resource Name: Enter the name of your component. It should be identical with the name of the image file that is uploaded to static resource in Salesforce.
4. Click Create.

If the created component is added to the table in the Manage Existing Components tab, the component is successfully registered.