Customizing the ServiceNow CPQ UI header

Customize the ServiceNow CPQ UI header to reflect your brand with logos, text, and background styles. Configure header elements and buttons—such as Cancel, Reset, Return, and Switch Layout—through the layout CSV file to create a branded, user-friendly configuration experience.

The ServiceNow CPQ header lets you brand the configuration page with a logo. Essential buttons and actions are also customizable. CSV layout upload supports these features.

Branding options

The header accommodates text, a logo, or both. If using text, the logo must be relatively narrow, so it fits without overlap.

If you want to remove or replace the blue Salesforce-like background frame, use the backgroundStyle control.

All header elements are defined in a header row component, in the values column. Logically, the header component is the first informational row in your CSV file, with the header values definition in cell I2. The following screenshot shows a spreadsheet that is not yet exported to a file.

The header value contains instructions for several header elements, so here's a breakdown of common content in that cell:

{
"text":"Company/Product Name",
"url":"<image url>",
"backgroundStyle": "url(http://www.some.url/bg.png) transparent no-repeat top center / cover",
"cancelButton": {
	"confirmation": true,
	"label": "Cancel",
	"visible": true
	},
"resetButton": {
	"confirmation": true,
	"label": "Reset",
	"visible": true
	},
"returnButton": {
	"label": "Quote"
	},
"switchLayoutButton": {
	"visible": true
	} 
}

As a general guideline, we recommend that administrators include both text and URL keys in the header component row. If the Admin does not intend to leverage either text or URL, they should include the key and an empty value. Examples:

"text": ""

The key: value pair above indicates that no text is displayed, where as the pair below leaves the image empty.

"url": ""

Customize the background style (the frame surrounding the configuration pane) with the following:

"backgroundStyle": "url(http://www.some.url/bg.png) transparent no-repeat top center / cover"

Here, http://www.some.url/bg.png is the location of a publicly available image. The remaining style instructions are recommended:

Adjust the header definition in your layout spreadsheet. Export to a CSV file and upload to the appropriate blueprint. Navigation:

ServiceNow CPQ Admin -> Blueprints -> [click appropriate blueprint] -> Layouts tab -> [click appropriate layout name] - Import Layout.

Button configurations

The ServiceNow CPQ UI offers four buttons: Cancel, Reset, Return, and Switch Layout. Return, commonly labeled Quote, is required. All others are optional.

In the following table, bracketed properties are the default values.

Table 1. Button properties

Button	Visible	Confirmation	Default Label	Behavior
Cancel	[true], false	[true], false	Cancel	When configuring a solution for the first time, Cancel takes the user back to the Product Selection page in Salesforce (SFDC). When reconfiguring, Cancel returns the user to the SFDC Quote Line Editor (QLE) without saving changes.
Reset	true, [false]	[true], false	Reset	Resets all fields to their initial states so that the user can start over without moving from the page.
Return	N/A	N/A	Quote	Pushes the bill-of-material (BOM) into SFDC and returns to the user to the QLE.
Switch Layout	[true], false	N/A	N/A	If multiple layouts are defined for this Blueprint, displays the next layout.

By default, Cancel, Return/Quote, and Switch Layout buttons display. Cancel and Reset allow the administrator to set a confirmation parameter. When true, a popup requires end users to confirm their intentions, as follows.

All header elements are defined in a header row component, in the values column. Here is a screenshot of the spreadsheet before it is exported in CSV format:

The header value contains instructions for several elements. In the graphic below, the parameters relevant to each button definition are separated by green dashed lines:

To copy this text to your local clipboard for editing, use the code block in the Branding Options section above.

Adjust the header definition in your layout spreadsheet. Export to a CSV file and upload to the appropriate blueprint. Navigation:

ServiceNow CPQ Admin -> Blueprints -> [click appropriate blueprint] -> Layouts tab -> [click appropriate layout name] -> Import Layout.

Currency display

You also use the values column of the header row component of the CSV layout upload file to configure how currency displays in the Shopping Cart. For more information, see Customizing the currency display in the shopping cart.