Configure Quote Details Page using CX Studio
CX (customer experience) Studio is a low-code/no-code module that makes it simple for users of all experience levels to create and edit pages, layouts, and applications. Each page in CPQ Web UI is configured using predefined layouts, which are a combination of Application Name, Entity Type, Page Type, and Variant. These layouts control the display, behavior, and functionality of various UI elements. When you need to customize the user experience, such as adding standard, custom fields or modifying visibility rules, you should clone the appropriate default layout and apply your customizations to the cloned version.
- Your customizations are preserved during system upgrades
- Default layouts remain intact as fallback options
- You maintain full control over your customized experience
- Changes can be tested and rolled back if needed
Before you customize a layout, check the network logs to identify the layout variant that is used on the page. Note the naming convention for page layouts. For example: 'cpq-web::productconfiguration::::master-detail::cart-detail' or 'ApplicationName::EntityType::::PageType::Variant'.
Navigate to CX Studio > Object Layouts and clone the required layout. Only cloned layouts have Edit option which is displayed under the kebab next to the name. You can now modify the layout as per your requirements. Default layouts are non-editable.
Following is a comprehensive list of default layouts used across CPQ Web UI pages.
| Entity Type | Page Type | Variant | Description |
|---|---|---|---|
| Quote Detail related list These layouts control the display and behavior of related list components on the Quote page. | |||
| ApprovalRequest | List | approval-list | Displays approval requests associated with the quote |
| Asset Line Item | List | assetItem-list | Shows asset line items linked to the quote |
| Product Configuration | List | cart-list | Lists all product configurations in the cart |
| Product Configuration | Master Detail | cart-detail | Displays a detailed view of a product configuration |
| contracts | List | contracts-list | Shows contracts associated with the quote |
| DocumentMetadata | List | document-list | Lists documents attached to the quote |
| LineItem | List | lineItem-list | Displays line items |
| Order | List | order-list | Shows orders generated from the quote |
| Proposal Location | List | proposal-locations-list | Lists locations associated with the quote |
| CollaborationRequest | List | collaboration-list | Displays collaboration requests |
| Quote List Page & Header Action These layouts control the Quote list and quote creation functionality. | |||
| Proposal | Master Detail | createQuote-form | Layout for creating new quote |
| Proposal | List | proposal-List | Quote list page |
| Quote Control Bar These layouts control the right-side control panel on the Quote page. | |||
| Proposal | Master Detail | proposal-controlPanel-detail | Layout to configure Quote Details on right-side control panel |
| Product | Master Detail | product-detail | Quick view on click of product name in mini catalog & Recommended Products in Control panel |
| Quote Detail & Header 'Next Steps' These layouts control the Quote Detail page and Next Steps action panel. | |||
| Proposal | Master Detail | proposal-detail | Main quote detail page layout |
| Proposal | List | action-panel | Next Steps action panel display |
| Proposal | List | action-panel-config_rule1 | Visibility and behavior rules for Next Steps actions |
| LineItem | List | clone-quote-lineItems-grid | Grid layout for selecting line items during quote cloning |
