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 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 CPQ know that those go in the background tier.

Variables pertaining to layout must be different than variables defined in CPQ for fields or rules. This is because variables defined in CPQ are also used in the layout CSV. The variables names assigned to a field in 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 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 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 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.