Layouts
Summarize
Summary of Layouts
Layouts in ServiceNow CPQ define the appearance and organization of the configuration experience for end users. They control the placement and grouping of fields, the arrangement of steps, and the presentation of the product list (shopping cart), transforming the underlying blueprint logic and data into a clear, guided user interface. Each layout serves as the presentation layer of a blueprint, determining how fields, sections, sets, and product pickers are displayed without altering the configuration logic.
Show less
Multiple layouts can be associated with a single blueprint to support different user personas, channels, or demonstration scenarios, allowing users to switch between these layouts within the configurator UI.
Key Features
- Presentation Layer: Layouts define pages, tabs, sections, and product list views, focusing solely on UI structure and appearance.
- Flexible Structure: Layouts use nested tiers such as pages, tabs, accordions, expandable sections, and basic containers to organize content logically and intuitively.
- Multiple Layouts per Blueprint: Supports creating varied UI experiences from the same underlying configuration logic.
- Layout Building Blocks: Users define layout elements in CSV files and refine them using in-product tools, enabling control over the arrangement and display properties.
- Layout Tools:
- CSV Layout Upload: Primary method for defining layouts with full control over components.
- Layout Wizard: Generates initial layouts quickly from blueprint fields with visual previews, ideal for starting point creation.
- Layout Editor: Allows direct editing within the ServiceNow Admin UI, offering advanced customization and user-friendly editing features.
- Sets and Repeatable Content: Layouts manage how sets are displayed—as tables, lists, or repeaters—with configurable properties like expand direction, inline controls, and messaging.
- Product List Configuration: Defines how the shopping cart displays product columns, labels, alignment, and whether it appears inline or in a separate window, driven by layout CSV definitions and product rule parameters.
Practical Benefits for ServiceNow Customers
By leveraging layouts, ServiceNow CPQ customers can:
- Create tailored and user-friendly configuration experiences without modifying backend logic.
- Support diverse user groups and channel-specific presentations through multiple layouts on a single blueprint.
- Quickly prototype and iterate on UI design using the Layout Wizard and CSV files, then fine-tune in the Admin UI.
- Maintain clear separation between configuration data and presentation, reducing risk when updating UI elements.
- Customize how complex sets and product lists are presented, enhancing usability and clarity for end users.
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 ServiceNow 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.