You are here:
Additional Catalog Product Actions and Fields
Use the additionalCustomJson setting in the Lightning Web Components CPQ UI to add custom buttons and fields to the Catalog Panel for Products, Promotions, and Discounts.
The additionalCustomJson setting in the LWC CPQ UI supports implementing
customizations within the Catalog Panel, adding custom buttons and fields to the Products,
Promotions, and Discounts tabs. This section provides detailed steps, a sample JSON structure,
and instructions for configuring event listeners to handle custom button actions.
Configure Custom Buttons and Field
This section describes how to configure custom buttons and fields in the Catalog Panel.
Here is a sample additionalCustomJsonconfiguration for adding custom
buttons and fields to the Catalog Panel.
{
"catalogPanelCustomActions": {
"products": [
{
"label": "CAction 1",
"name": "productAction1",
"variant": "base|neutral|brand|brand-outline|destructive|destructive-text|inverse|success", //Optional
"icon-name": - icon-name -, // Optional
"icon-position": "left|right" // Optional
},
{
"label": "CAction 2",
"name": "productAction2",
"variant": "base|neutral|brand|brand-outline|destructive|destructive-text|inverse|success", //Optional
"icon-name": - icon-name -, // Optional
"icon-position": "left|right" // Optional
}
],
"promotions": [
{
"label": "CAction 3",
"name": "promotionAction1",
"variant": "base|neutral|brand|brand-outline|destructive|destructive-text|inverse|success", //Optional
"icon-name": - icon-name -, // Optional
"icon-position": "left|right" // Optional
},
{
"label": "CAction 4",
"name": "promotionAction2",
"variant": "base|neutral|brand|brand-outline|destructive|destructive-text|inverse|success", //Optional
"icon-name": - icon-name -, // Optional
"icon-position": "left|right" // Optional
}
],
"discounts": [
{
"label": "CAction 5",
"name": "discountAction1",
"variant": "base|neutral|brand|brand-outline|destructive|destructive-text|inverse|success", //Optional
"icon-name": - icon-name -, // Optional
"icon-position": "left|right" // Optional
},
{
"label": "CAction 6",
"name": "discountAction2",
"variant": "base|neutral|brand|brand-outline|destructive|destructive-text|inverse|success", //Optional
"icon-name": - icon-name -, // Optional
"icon-position": "left|right" // Optional
}
]
},
"catalogPanelCustomFields": {
"products": [
{
"label": "Currency",
"field": "CurrencyCode",
"type": "currency|datatime"
}
],
"promotions": [
{
"label": "All Products",
"field": "vlocity_cmt__AppliesToAllItems__c",
"type": "currency|datatime"
}
],
"discounts": [
{
"label": "Discount Type ",
"field": "vlocity_cmt__DiscountType__c",
"type": "currency|datatime"
}
]
}
} Sample Code for cpqCartSampleCustomEventHandler.js
import { LightningElement, track } from 'lwc';
import pubsub from 'vlocity_cmt/pubsub';
export default class cpqCartSampleCustomEventHandler extends LightningElement {
connectedCallback() {
// Register event listener for custom action 'productAction1'
pubsub.register('cpq_cart_custom_action', { productAction1: this.handleEvent01.bind(this) });
}
disconnectedCallback() {
// Unregister event listener to prevent memory leaks
pubsub.unregister('cpq_cart_custom_action', { productAction1: this.handleEvent01.bind(this) });
}
handleEvent01(event) {
console.log('Product Action 1 Triggered:', event.cartId);
console.log('Record Data:', event.lineItem);
}
}
Event Properties
The event payload includes:
- Details of the product, promotion, or discount record.
- The price list ID associated with the event.
- The cart ID associated with the event.
Add the custom component (cpqCartSampleCustomEventHandler) to the
cpqCartTab.
These are the component files for setting up the event listener
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>60.0</apiVersion>
<isExposed>true</isExposed>
<runtimeNamespace>vlocity_cmt</runtimeNamespace>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
By using additionalCustomJson with
catalogPanelCustomActions and catalogPanelCustomFields,
you can enable dynamic customization within the Catalog Panel, providing personalized user
actions and custom data displays. By setting up a Lightning Web Component to listen for
custom button events, you can manage these actions and create a tailored experience in the
CPQ UI.
