Using the sidebar
Summarize
Summary of Using the Sidebar
The sidebar element in ServiceNow allows you to display persistent information, such as visualizations and product details, throughout the configuration process. It enhances visibility and user experience by maintaining consistent information across multiple tiers in a layout, though it must be created in the layout CSV and imported, as it is not supported in the ServiceNow CPQ layout editor.
Show less
Setup
To set up the sidebar, define it as a child of the entire layout in your CSV file. Key parameters include:
- Type: sidebar
- Path: /layout/sidebar
- Value: {"location":"right"} or {"location":"left"}
The location property specifies whether the sidebar appears on the left or right of the screen. Note that the sidebar cannot be positioned at the bottom or moved during configuration, and only one sidebar is allowed per layout.
Key Features
- Persistent Display: The sidebar shows information continuously across tiers, allowing users to access important data without navigating away from their current configuration.
- 3D Visualizer Integration: The sidebar can host 3D visualization tools, ensuring users see updates in real time as they make changes.
- Product Information Access: It can display product or quote information, making it readily available throughout the configuration process.
- Alternative Shopping Carts: The sidebar can showcase a different product list than the primary shopping cart, useful for showing manufacturing BOM types while keeping sales BOM types separate.
Key Outcomes
Utilizing the sidebar effectively enables ServiceNow customers to enhance user experience by providing consistent access to critical information during configurations, streamlining workflows, and improving overall efficiency in product and quote management.
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 to enhance visibility and user experience throughout the configuration process.
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, you must define the sidebar element as a child of the entire layout. The cells to fill in are below together 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. This is where the sidebar exists during configuration, and unlike the shopping cart's similar property, it cannot be on the bottom of the configurator, nor can it be 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 fails. 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 on a layout. Adding another will result in their being combined into the same tier upon deployment.
Use case: 3D visualizer
The sidebar can host the 3D visualization tools an organization uses during configuration. As shown in the example above, any changes to fields that are tied to updating the visualization are shown to end users no matter the tier they are currently on.
Use case: product information
The sidebar can host anything from the product or quote using the system or partner fields that you would like to make available to the end user 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. This could be helpful if you need to list a separate manufacturing BOM type while only showing sales BOM types in the shopping cart.