Layout: a deeper dive

Learn advanced layout concepts in ServiceNow CPQ, including tiers, column sets, and product list layouts. Understand how to structure pages, tabs, and sections in CSV files to create dynamic, responsive configuration interfaces with organized and intuitive user experiences.

Tiers and tierDef

Tiers define the sections of the page.

Each tier and subtier needs a tierDef that defines the component display type (column F). Each tier has the following options: Tab, ExpandableSection, Pages, Accordion, AccordionWithNavigation, and VerticalTab. Each of the examples below shows the same configuration with different tier structures.

• Tabs:

  

• ExpandableSection (this makes the layout more vertical)
• Pages:

  

You also can have subtiers inside tiers.

Tab tier with an ExpandableSection subtier:

A screenshot of the CSV file used to create this two-tiered layout is shown below. The highlighted cells show how the different tiers are flagged. Because rows 9 and 10 have the same path as the top row tierDef in row 8, the cells are displayed in a tab layout.

Do not define label or variablename at the tierDef level (row 8 in the image). They are applied at the tier level (rows 9 and 10).

Label column

For both fields and tiers, the text entered in the label column is the text that appears on screen in the layout. The label for the yellow rows appears as the label for each tab. The label column is also used for fields.

variablename

Variables are used to define the path and call specific fields created in ServiceNow CPQ. In row 9 of the following image, the variablename background is defined in column E. In rows 25-29, background is added to the path (column B). This lets ServiceNow CPQ know that those go in the background tier.

Variables pertaining to layout must be different than variables defined in ServiceNow CPQ for fields or rules. This is because variables defined in ServiceNow CPQ are also used in the layout CSV. The variables names assigned to a field in ServiceNow CPQ UI are used to add the field to the layout. The following images show the CSV file referencing a field variable (variablename=desiredIrons) that was created in ServiceNow CPQ resulting in the field appearing in the layout.

Column set types

Column sets help define the vertical positioning of objects in a tier. The layout is responsive to the width of the browser (which can change), so ServiceNow CPQ uses column sets to help the Admin identify an intentional row breakpoint.

If the user is using a smaller window where the whole column set does not fit on one row, columns will continue onto the next row. The end of the column set always triggers a new row.

In the following images, the user field is part of 1 column set, while the fields leftHanded and bag are part of a second column set. If the browser window becomes too small for all three pictures (picklist options for user), the column set continues on the next row. Even though there is room for the leftHanded field next to the third image, it is on a new row.

Column order

The columnorder column in the CSV file changes the order of the columns in the same column set. Fields do not have to be added to the CSV in order, as seen in the following image.

Product list layouts

The product list is how the shopping cart feature of configurations are customized. To add items to the product list, a new product rule is created. When the user selects Simple, the following fields are available:

If the user wants the field to be displayed in the layout, they would add a column to the layout CSV for the field. (The user would use the values in the ProductList.<param> column of the linked table as the variable name. See note 1 for the following image.)

The following is a screen shot of the product list section of the layout CSV.

A few things to note:

1. The variables in this column match the values in the productList.<param> column {hauss- extList and List are missing}. This tells ServiceNow CPQ to add the user inputs to the table.
2. To adjust the alignment of the text in the individual columns add the class slds-text- align_left, slds-text-align_right, or slds-text-align_center. To add multiple class names, separate them with a space.
3. price, list, and extList always align right so the numbers align nicely.
4. To save space on the screen, select modal for location.

Tier components

Use these tier component property names in the component column of a CSV layout.

Table 1. Tier components

Component	Property name	Description
Basic container	BasicContainer	Tier container with no decoration or navigation
Expandable sections	ExpandableSection	Display tiers in expandable sections with gray bar as section header Value setting for initial state: defaultState: delay | collapsed To lazy-load the tier, use “delay”, which will open the section after other sections have begun rendering
Accordion	Accordion	Similar to expandable sections, but only one is expanded
Accordion with navigation	AccordionWithNavigation	Similar to expandable sections, but only one is expanded, and next/previous buttons are included
Tabs	Tab	Display tiers in a horizontal tab group
Vertical tabs	VerticalTab	Display tiers in a vertical tab group (tabs are on the left)
Pages	Pages	Display tiers as pages with a progress nav bar at the top (tier names are displayed on hover)
Pages with labels	PagesWithLabels	Display tiers as pages with a progress nav bar at the top, including labels that truncate as needed (no hover display)