CSV layout upload

  • Release version: Zurich
  • Updated October 8, 2025
  • 5 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of CSV layout upload

    This guide explains how to create, upload, and manage CSV files that define layout specifications for blueprints in ServiceNow CPQ. Multiple layouts can be associated with a single blueprint, and end users can switch among them via the alternate layout button in the buyside UI. Admins typically build layouts in spreadsheet tools and export them as CSV files for upload.

    Show full answer Show less

    Creating and Editing a Layout

    • Access layouts from the blueprint administration page under the Blueprints section in ServiceNow CPQ Admin.
    • To add a new layout, use the Add Layout option; to edit an existing one, select it from the list or use the Layout Wizard.
    • Layouts can be imported via CSV by dragging the file into the New Layout window or selecting it from the computer.
    • Admins can download a sample layout file for reference and export existing layouts as CSV for editing.
    • If CSV upload errors occur, detailed error messages help identify issues for correction.
    • After redeploying the blueprint, layout changes appear on the buyside UI.

    CSV Layout Format and Configuration

    • The CSV file uses specific column headings (all lowercase) to define layout components such as tiers, columns, images, product lists, and fields.
    • The type column specifies component types like tierDef (for page tabs and sections), image, productlist, field, etc.
    • Fields include attributes like label (display name), variablename (unique identifier), and component display type defining how fields render (e.g., Text, Date, Boolean, Picklist variants, RadioButtons, Checkbox).
    • The classname column references predefined ServiceNow CPQ CSS classes to control layout behavior such as grid placement, height, width, and alignment.
    • Predefined effect classes enable responsive grid layouts, control maximum heights and widths of fields, and customize picklist display orientations and labels.
    • The value column may contain JSON strings representing additional properties such as placeholder text for fields.
    • For image components in picklists, the override-disabled classname can be used to prevent fading of disabled images.

    Additional Information

    • A 26-minute video overview and a 4-minute example video are available for further learning about the layout CSV format and usage.
    • Sample CSV files, such as the HiTech layout CSV, can be downloaded for practical reference.
    • Earlier JSON-based layout editing is possible via REST API but disables CSV editing functionality.
    • Related tools include the Layout Wizard and Layout Editor, which complement CSV layout management.

    Learn how to create and upload a CSV file that contains a layout specification.

    Layouts are defined in a blueprint. When more than one layout is defined for a blueprint, end users rotate through them using the alternate layout button in the upper-right corner of the buyside UI.

    Layouts are defined via CSV file that contains all instructions for the layout. For ease of administration, we recommend that admins build their layout in a spreadsheet (Google Sheets, Microsoft Excel, or similar) and export to CSV format.

    Creating and editing a layout

    Access a layout from its corresponding blueprint administration page.

    1. In the ServiceNow CPQ Admin navigation pane, click Blueprints (2).
    2. Click the Layouts tab (3).
    3. Click the name of the blueprint you want to access.

    CSV layout upload

    To start a new layout, click Add Layout. To edit an existing layout, click the name of a layout in the list.

    You can also edit a layout in the Layout Wizard. After you redeploy your blueprint, the new UI changes appear on the buyside.

    When you begin a new layout, the New Layout window opens. You can import a CSV file by dropping it in the box or click to select it from your computer. (i) You can also download a sample layout file for your reference. (ii)

    Sample layout file

    CSV layout upload

    When you edit an existing layout:

    Click Export to download the current layout file. (a)

    Import a layout CSV file by clicking Replace (b).

    Click Save (c) to replace the current layout with the edited layout. If CSV file upload fails, all errors found in the file will be shown to the administrator in an error dialog.

    CSV layout upload

    Using layout CSV file upload

    For a thorough introduction to the layout CSV format, view the following 26-minute video:

    Layout CSV Overview

    For an example of how a layout CSV is used, view the following 4-minute video:

    HiTech Layout Overview

    Download the corresponding HiTech Layout CSV file:

    HiTech layout CSV file

    Layout CSV format

    Column headings are lower case.

    The type column defines the layout components. The following table shows valid values for this column.

    Table 1. Valid values for the type column
    Type value Description
    tierDef Properties: Pages, PagesWithLabels, PagesWithNavigation, ExpandableSection, Tab, TabWithNavigation, VerticalTab, VerticalTabWithNavigation, Accordion, AccordionWithNavigation
    tier
    columnset
    image
    productlist
    productlistcolumn
    field

    The path column value format gives a visual cue to the placement of the element override source label, and is not currently used by the application. Leave it empty.

    label defines the label to display to the end-user in the UI for tiers and fields.

    variablename defines a unique identifier for a tier or field.
    • For tiers, administrator should define distinct values.
    • For fields, populate the field variable name.

    The component display type column defines how a field should be displayed. The following types are available.

    Table 2. Component display types
    Field type Component display types
    Text

    ReadOnlyText

    Text

    TextArea

    Date
    Boolean

    Boolean

    Radio

    RadioButtons
    Number

    Number

    Slider

    NumberWithSubmit

    ReadOnlyText

    ReadOnlyCurrency

    FormattedNumber
    Picklist (single-select)

    Extended picklist

    Extended picklistDisplayOnly

    Picklist

    ReadOnly picklist

    Radio

    RadioButtons

    SingleSelect picklistGrid

    VerticalRadio

    VisualPicker
    Picklist (multi-select)

    MultiSelectExtended picklist

    MultiSelectExtended picklistDisplayOnly

    MultiSelect picklist

    MultiSelect picklistGrid

    MultiSelectVisualPicker

    Checkbox

    VerticalCheckbox

    columnorder is relevant for components in a column set. Used to provide the sort order of the Fields based on screen resolution in the responsive UI.

    classname is used to reference predefined classes available in ServiceNow CPQ. For example, when placing an image, a class can define the flow of fields around that image. Add these class names to the layout CSV file in the className column. As max-height and grid controls interact with the width of the browser, we recommend you experiment with each class distinctly, exploring how the class responds to a variety of browser sizes.

    Table 3. Effects classes
    Effect Applies to Supported classes Notes and examples
    Grid Fields, Images topleft1col1row, topleft1col2row ... topleft1col6row

    topleft1col1row { grid-column: 1/2; }

    topleft1col2row { grid-column: 1/2; grid-row: 1/3; }

    topleft1col3row { grid-column: 1/2; grid-row: 1/4; }

    topleft1col4row { grid-column: 1/2; grid-row: 1/5; }

    topleft1col5row { grid-column: 1/2; grid-row: 1/6; }

    topleft1col6row { grid-column: 1/2; grid-row: 1/6; }
    topleft2col1row, topleft2col2row ... topleft2col6row

    topleft2col1row { grid-column: 1/3; }

    topleft2col2row { grid-column: 1/3; grid-row: 1/3; }

    topleft2col3row { grid-column: 1/3; grid-row: 1/4; }

    topleft2col4row { grid-column: 1/3; grid-row: 1/5; }

    topleft2col5row { grid-column: 1/3; grid-row: 1/6; }

    topleft2col6row { grid-column: 1/3; grid-row: 1/6; }
    topleft3col1row, topleft3col2row ... topleft3col6row

    topleft3col1row { grid-column: 1/4; }

    topleft3col2row { grid-column: 1/4; grid-row: 1/3; }

    topleft3col3row { grid-column: 1/4; grid-row: 1/4; }

    topleft3col4row { grid-column: 1/4; grid-row: 1/5; }

    topleft3col5row { grid-column: 1/4; grid-row: 1/6; }

    topleft3col6row { grid-column: 1/4; grid-row: 1/6; }
    topright1col1row, topright1col2row ... topright1col6row

    topright1col1row { grid-column: -2/-1; }

    topright1col2row { grid-column: -2/-1; grid-row: 1/3; }

    topright1col3row { grid-column: -2/-1; grid-row: 1/4; }

    topright1col4row { grid-column: -2/-1; grid-row: 1/5; }

    topright1col5row { grid-column: -2/-1; grid-row: 1/6; }

    topright1col6row { grid-column: -2/-1; grid-row: 1/6; }
    Height Fields mh5, mh10, mh15 ... mh40 Maximum height from 5 rem to 40 rem, in increments of 5
    Width Fields w5, w10, w15 ... w40 Maximum width from 5 rem to 40 rem, in increments of 5
    Grid column width Fields lc-15m-15max, lc-15m-20max, lc-15m-25max, lc-15m-30max These classes set the width of the columns in the layout grid.
    • lc: layout column
    • 15m: width of 15 rem
    • 15max: maximum width of 15 rem
    Display vertically, align center Picklist Fields vertical-layout, align-center Default: horizontal (when layout is vertical, default is left)
    Hide field label, hide field option label Display components: Extended picklist, MultiSelectExtended picklist hide-field-label, hide-field-option-label

    The value column contains a JSON string to represent properties for element (Field or productlistcolumn) referenced on that row.

    placeholder allows the Admin to define placeholder text that will display in a text field until the end-user inputs a value.

    Components with images

    For picklist display components that include images, when options are disabled, the image is faded. Admins can override this behavior and force the image to look normal by applying the override-disabled class to the classname field in the layout.

    Note:
    An earlier means of defining and editing layouts using JSON is available. When leveraging JSON, the files must be loaded into the application via REST API. Once a layout has been edited via JSON, CSV manipulation is no longer available. If a layout has been edited via JSON, the Current Layout button is disabled.