The sidebar
Summarize
Summary of The sidebar
The sidebar element in ServiceNow CPQ configurations allows you to display persistent information—such as visualizations, product details, or alternate shopping carts—across multiple tiers within a configuration. This sidebar remains visible to end users throughout the configuration process, enhancing their experience by providing continuous access to important data.
Show less
Note that the sidebar cannot be created directly within the CPQ layout editor; it must be defined in the layout CSV file and then imported.
Setup and Configuration
To set up the sidebar, define it as a child element of the entire layout in the CSV file. Key configuration details include:
- Location: Specify whether the sidebar appears on the left or right side of the screen using
{"location":"left"}or{"location":"right"}. The sidebar position is fixed during configuration and cannot be moved or placed at the bottom. - Hierarchy: The sidebar must have a single child of type
tierdef. Adding other child elements liketierorcolumnsetdirectly under the sidebar will invalidate the layout. - Uniqueness: Only one sidebar can exist per layout. Multiple sidebars defined in the CSV merge into a single tier upon deployment.
Customization Options
- Pin Control: Use the
pinnedproperty in the sidebar value to control the pin button's visibility and the sidebar's default pinned state:{"pinned":"PINNED"}- Sidebar is pinned and pin button is hidden.{"pinned":"UNPINNED"}- Sidebar is unpinned and pin button is hidden.{"pinned":"DEFAULT"}or omitted - Pin button is visible and sidebar defaults to pinned.
- Width Settings: Define the sidebar’s default, minimum, and maximum widths using pixel (px) or viewport width (vw) units. Example properties include:
width: default width (e.g.,{"width":"400px"})minWidth: minimum width (e.g.,{"minWidth":"300px"})maxWidth: maximum width (e.g.,{"maxWidth":"600px"})
Use Cases
- 3D Visualizer: Embed 3D visualization tools in the sidebar to provide real-time visual feedback during configuration. Changes in related fields update the visualization regardless of the current tier.
- Product Information: Display detailed product or quote information, including system or partner fields, consistently throughout the configuration process.
- Alternate Shopping Cart: Host a product list different from the main shopping cart, such as showing a manufacturing BOM separately from sales BOMs, enhancing clarity for end users.
Use the sidebar element to display persistent information, such as visualizations, product details, or alternate shopping carts, across tiers in a configuration. Define its position and content in the layout CSV file.
In a layout, the sidebar element can be used to show persistent information to the end user across multiple tiers.
Setup
When setting up the sidebar, define the sidebar element as a child of the entire layout. The following table lists the cells to fill in, with an example of the sidebar section of the CSV file.
- Type: sidebar
- Path: /layout/sidebar
- Value:
{"location":"right"}or{"location":"left"}
| type | path | label | variablename | component display type | value |
|---|---|---|---|---|---|
| sidebar | /layout/sidebar | {"location":"right"} |
|||
| tierdef | /layout/sidebar/tiers | BasicContainer | |||
| tier | /layout/sidebar/tiers | Tier | tier |
The location property determines whether the sidebar appears to the user on the left or right of the screen. The sidebar appears in this position during configuration and, unlike the shopping cart, cannot be placed at the bottom of the configurator or moved during configuration.
The child of the sidebar can only be a tierdef object. If you add a tier or a columnset element as a child, the layout is invalid. After a tierdef is defined in the CSV, you can then add the necessary tiers, columnsets, and fields as children as in any other tier.
Only one sidebar can exist in a layout. If you add another, both are combined into the same tier upon deployment.
Control the sidebar pin
Add the pinned property to the sidebar value to control whether the pin button appears to the end user and whether the sidebar is pinned or unpinned by default. Set this property in the
value cell of the sidebar element in the layout CSV file.
| Value | Description |
|---|---|
{"pinned":"PINNED"} |
Hides the pin button and renders the sidebar as pinned. |
{"pinned":"UNPINNED"} |
Hides the pin button and renders the sidebar as unpinned. |
{"pinned":"DEFAULT"} |
Shows the pin button and renders the sidebar as pinned. The sidebar also uses this behavior when you omit the pinned property. |
Set the sidebar width
Add width properties to the sidebar value to define how wide the sidebar component appears to the end user. Specify each width value in pixels (px) or viewport width (vw) units, and set the
properties in the value cell of the sidebar element in the layout CSV file.
| Property | Description |
|---|---|
| width | Sets the default width of the sidebar component. For example, {"width":"400px"}. |
| minWidth | Sets the minimum width of the sidebar component. For example, {"minWidth":"300px"}. |
| maxWidth | Sets the maximum width of the sidebar component. For example, {"maxWidth":"600px"}. |
Use case: 3D visualizer
The sidebar can host 3D visualization tools used during configuration. Any changes to fields tied to the visualization are visible to end users regardless of the tier they are on. For more information, see Integrating CPQ with visualization tools.
Use case: product information
The sidebar can display product or quote information — including system or partner fields — throughout the configuration process.
Use case: shopping cart
To show a product list other than the shopping cart to the end user, you can host it in the sidebar. Use this option to list a separate manufacturing BOM type while showing only sales BOM types in the shopping cart.