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	Parameter	Parameter type	Description	Introduced in version	Required to select the event action while component registration
  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.	10.4	Yes
  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.	10.4	Yes
  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.	10.4	Yes
  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.	10.4	Yes
  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.	10.4	Yes
  previewQuoteState	N/A	N/A	Initiates a Preview an order call.	10.4	Yes
  saveQuote	N/A	N/A	Saves the existing quote and triggers a Preview an order call.	10.4	Yes
  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.	10.4	No
  objectFieldConfig	configs	configs: Array of Javascript object For more information related to Javascript object signature, see Signature for objectFieldConfig.	For dynamic field rendering, you can apply field config properties (background color, help text, read-only, disabled, hidden, textColor, and options) to Quote, Quote Rate Plan, Quote Rate Plan Charge, and Quote Amendment fields in Quote Studio. It overrides the object field config settings setup in Quote Studio Settings.	10.35.1	Yes
  changesidebarwidth	width	width: String	Configure the sidebar width using Custom Code. The width can be any CSS-supported unit. We recommend responsive units like vw for responsive behavior.	10.36	No
  opensidebarcomponent	componentName: Name of the custom component from sidebar to open	componentName: String	Opens the sidebar custom component.	10.36	No
  closesidebar	N/A	N/A	Closes the sidebar.	10.36	No

For sample code, see Sample code for 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.
     Sometimes, after you upgrade your Zuora CPQ package from the previous version, newly created events in the upgraded package might not be available. In such cases, you will have to create the event picklist with the value and name as the one present in Event Type for the field zqu__Component_Event_Action__c in the object zqu__Add_on_component_registration__c
   • (Optional) Use as Headless Component: Check this box to designate the component as headless. For more information, see Headless component.
     Headless Components will not appear in the Quote Studio Sidebar.
   • 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.