CSV layout upload
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.
- In the ServiceNow CPQ Admin navigation pane, click Blueprints (2).
- Click the Layouts tab (3).
- Click the name of the blueprint you want to access.
CSV layout upload
To start a new layout, click Create 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)
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:
For an example of how a layout CSV is used, view the following 4-minute video:
Download the corresponding 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.
| 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.
| 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.
| 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.
Related topics