Welcome to Zuora Product Documentation

Explore our rich library of product information

Headless and sidebar component - events

This document outlines the events required to persist data changes within the Quote Studio page.

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. Starting with Quotes version 10.49, for sample code to recalculate pricing fields, see

Sample code for hooks and events

.

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

  • remove: optional.

    Indicates that the toast message should be removed.

  • id: optional.

    Stores the unique identifier of the toast message to be dispatched and later removed. Use the same ID to remove the toast message.

  • id: String

  • remove: Boolean

10.50

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.

Signature for objectFieldConfig

Property name

Type

Description

field

String

API name of the field. [Required]

object

String

API name of the object. [Required]

chargeIndex

Number

Index of the charge in the Version of the Product Timeline

timelineId

String

Id of the timeline present in the Product Timeline

quoteId

String

Id of the quote

effectiveDate

String

Contract Effective date of the version/Rate Plan present in the Product Timeline

backgroundColor

String

Color to be applied to the field. (Colors are specified using predefined color names, RGB, HEX, HSL, RGBA, HSLA values.) If the default color needs to be applied - default should be used as a color.

helpText

String

Value can be a string or null . If String, help text to be displayed next to the field. If help text needs to be removed, you can pass null as a value

readOnly

Boolean

Value can be true or false . If true, make the field read-only. If false, make the field normal from read-only.

disabled

Boolean

Value can be true or false . If true, make the field disabled. If false, make the field editable.

hidden

Boolean

Value can be true or false . If true, make the field hidden. If false, make the field unhidden.

textColortextColor

String

This property will help apply text color to the fields on the quote studio UI.

Text color to be applied to the field. (Colors are specified using predefined color names, RGB, HEX, HSL, RGBA, HSLA values.) If the default color needs to be applied - ‘default’ should be used as a textColor.

options : [ ]

Array of JS Objects

You can use this property to override the options for a picklist field in Quote Studio UI.

Quote, QuoteRatePlan, and QuoteRatePlanCharge objects are supported. QuoteRatePlanCharge record-level updates are supported. Using product hooks with valid timelineId and chargeIndex, each charge field can be configured with different options. ‘isDefault’:true is not supported currently. However, any picklist value can be set through the updateQuote event. Dropdown fields other than picklist field type are not supported. Example: BillTo, SoldTo.

Sets options to a picklist field.

isDefault

Boolean

label

String

value

String

Note:

Some properties are commonly available for all objects, such as field, object, readOnly, disabled, hidden, backgroundColor, helpText, textColor, and options.

Object

Properties available for use

Signature

zqu__Quote__c

quoteId

{ field: 'zqu__InitialTerm__c', object: 'zqu__Quote__c', quoteId: 'a0xEi0000022pYLIAY', //Parent or child Quote Id in MSQ context backgroundColor: 'green', helpText: 'Initial Term cannot be greater than 12', readOnly: false, disabled: true, hidden: false

}

zqu__QuoteRatePlan__c

timelineId , effectiveDate

{

field: 'Custom_Field__c', object: 'zqu__QuoteRatePlan__c' timelineId: '&ArHc3bUujToP9iV8axJ6g', effectiveDate: '2024-09-18', backgroundColor: 'red', helptext: 'This value cannot be accepted', readOnly: false, disabled: true, hidden: false

}

zqu__QuoteAmendment__c

timelineId , effectiveDate

{

field: 'zqu__ContractEffectiveDate__c', object: 'zqu__QuoteAmendment__c' timelineId: '&ArHc3bUujToP9iV8axJ6g', effectiveDate: '2024-09-18', backgroundColor: 'blue', helpText: 'Fill the Contract Effective Date', readOnly: false, disabled: true, hidden: false

}

zqu__QuoteAmendment__c (Future Dated Update Modal)

timelineId

{ field: 'zqu__ContractEffectiveDate__c', object: 'zqu__QuoteAmendment__c' timelineId: '&ArHc3bUujToP9iV8axJ6g', backgroundColor: 'blue', helpText: 'Fill the Contract Effective Date', readOnly: false, disabled: true, hidden: false

}

zqu__QuoteRatePlanCharge__c

timelineId , chargeIndex , effectiveDate

{

field: 'Custom_Field__c', object: 'zqu__QuoteRatePlanCharge__c' chargeIndex: 0, timelineId: '&ArHc3bUujToP9iV8axJ6g', effectiveDate: '2024-09-18', backgroundColor: 'red', helpText: 'Quantity is greater than 10', readOnly: false, disabled: true, hidden: false

}

What to do next

After the events are dispatched with the listed parameters, you must register custom components in CPQ X.