Headless and sidebar component - events
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 |
|
|
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 |
|
|
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 |
|
|
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.
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 | ||
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 |
{ } |
| zqu__QuoteRatePlan__c | timelineId, effectiveDate |
{ field: 'Custom_Field__c', } |
| zqu__QuoteAmendment__c | timelineId, effectiveDate |
{ field: 'zqu__ContractEffectiveDate__c', } |
| zqu__QuoteAmendment__c (Future Dated Update Modal) | timelineId |
{ } |
| zqu__QuoteRatePlanCharge__c | timelineId, chargeIndex, effectiveDate |
{ field: 'Custom_Field__c', } |
What to do next
After the events are dispatched with the listed parameters, you must register the new component in CPQ X.