Layouts
Summarize
Summary of Layouts
In ServiceNow CPQ,Layoutsdefine the visual structure and user interface of the configuration experience. They determine how fields, steps, sections, and product lists appear to end users, transforming blueprint logic and data into an intuitive, guided UI. Each layout controls the presentation layer without altering the underlying configuration logic, allowing you to customize the user experience for different personas, channels, or demos within a single blueprint.
Show less
Key Features
- Presentation Focus: Layouts specify which fields appear on each page or tab, how sections are grouped and labeled, and how product pickers, messages, and the shopping cart are displayed.
- Multiple Layouts per Blueprint: You can create several layouts for one blueprint, enabling users to switch between them easily using the alternate layout control.
- Structural Elements (Tiers): Layouts are built using tiers such as Pages, Tabs, Accordions, Expandable Sections, and Containers, which can be nested to create multi-level, organized configuration interfaces.
- Layout Authoring Tools: Layouts are primarily defined via CSV files for detailed control and can be generated or fine-tuned using the Layout Wizard and Layout Editor within the Admin UI. These tools support visual previews, editing labels, display types, and extended properties.
- Sets and Repeatable Content: Layouts control how sets of configurable items are presented, including table or list formats, repeaters, and interactive controls like inline add/remove and upload/download options.
- Product List Configuration: The layout defines the shopping cart display, specifying which product attributes appear as columns, their labels, alignment, and whether the list shows inline or in a separate window.
Practical Benefits for ServiceNow Customers
By leveraging layouts, ServiceNow customers can:
- Deliver a tailored and user-friendly configuration interface that aligns with business needs and user roles without changing the core blueprint logic.
- Maintain flexibility to iterate and improve the configurator UI independently from rules and data models, reducing risk and complexity.
- Support multi-step, multi-tab, or multi-section configurations that guide users efficiently through complex product setups.
- Customize how product selections and shopping carts are presented to enhance user engagement and accuracy in order configuration.
- Utilize built-in tools to create, preview, and refine layouts easily, promoting faster deployment and ongoing optimization.
Layouts define how the configuration experience looks and feels for your users. They control where fields appear, how steps are grouped, and how the product list (shopping cart) is presented—turning a blueprint’s logic and data into an intuitive, guided UI in CPQ.
A layout is the presentation layer of a configuration experience. Where a blueprint brings together fields, rules, layouts, and configurable products, the layout focuses on how those elements are displayed:
- Which fields appear on each page or tab
- How sections are grouped and labeled
- How sets, product pickers, and messages are arranged
- How the product list is rendered alongside the configuration
Layouts are defined per blueprint. A single blueprint can have one or more layouts, giving you flexibility to support different personas, channels, or demo experiences without duplicating configuration logic.
When a blueprint has multiple layouts, end users can rotate through them using the alternate layout control in the upper-right corner of the configurator UI.
How layouts fit into the configuration model
Layouts are placed at the presentation layer of the CPQ configuration stack:
- Fields collect and display data.
- Rules control behavior (visibility, messaging, calculations, product inclusion, and more).
- Blueprints tie fields, rules, layouts, and configurable products into a single configuration experience.
- Layouts define the buyside interface—pages, tabs, sections, and product list—without changing the underlying logic.
Because layouts reference field variable names and product list parameters, you can safely iterate in the layout (for example, reorganizing tiers or changing display types) without modifying rules or data structures.
Layout building blocks
Layouts are composed of reusable structural and visual elements that you define in a layout CSV file and refine in the Layout Wizard or the layout editor.
- Pages (PagesWithLabels): Break the configuration into discrete steps with progress navigation.
- Tabs (VerticalTab): Group related content horizontally or vertically for quick switching.
- Accordion (AccordionWithNavigation): Show one expanded section at a time for long or complex content.
- ExpandableSection: Allow users to expand or collapse content as needed.
- BasicContainer: Provide an unstyled container for simple grouping.
You can nest tiers to build multilevel layouts—for example, pages that contain tabs, or tabs that contain expandable sections.
Layout definition and tools
Layouts are authored and maintained using a combination of CSV files and in-product tools:
- CSV layout upload
- Primary definition format for layouts
- Built in a spreadsheet tool and exported to a CSV file
- Supports full control over tiers, column sets, fields, product list, and component properties
- Layout Wizard
- Helps you quickly generate an initial layout from a blueprint’s fields
- Provides a visual preview of tiers and major groupings
- Acts as a starting point; fine-tuning is done via CSV file or the layout editor
- Layout editor
- Allows you to edit an existing layout directly in the Admin UI
- Supports arranging tiers and column sets, editing labels, adjusting display types, and updating extended properties
- Provides keyboard shortcuts and visual cues for missing or partially supported elements
Regardless of which tool you use, the layout is ultimately stored as a structured definition that can be exported, versioned, and replaced as your configuration experience evolves.
Sets and repeatable content
Layouts also control how sets are presented:
- As tables (rows and columns with headers)
- As lists (card-style rows with optional selection and search behavior)
- In repeaters that focus the user on one set index at a time
Set-specific layout properties—such as expand direction, size controls, message indicators, inline add/remove controls, and upload/download behavior—are configured in the layout via extended properties and raw value JSON.
The product list section of a layout defines how the shopping cart is displayed:
- Which product list parameters appear as columns (for example, name, quantity, price, extended attributes)
- How columns are labeled and aligned
- Whether the product list is inline or in a window
Product list columns are driven by the layout CSV file using the productlist and productlistcolumn types and by referencing ProductList.<param> values defined in the product rules
and underlying tables.