Layout editor

  • Release version: Zurich
  • Updated October 8, 2025
  • 3 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 Layout Editor

    The Layout Editor in ServiceNow CPQ allows administrators to modify layouts directly within the platform. This tool enables users to edit layout names, descriptions, and various field properties seamlessly without needing to exit the CPQ environment.

    Show full answer Show less

    Key Features

    • Actions: Users can Replace the current layout with a CSV file, Export the existing layout as a CSV, and Save any changes made. The Save button is disabled if no modifications have occurred.
    • Edit Tabs: The editor includes three tabs—Arrange Layout, Edit Field Info, and Tier Definition—each catering to specific editing needs.
    • Arrange Layout Tab: This tab provides a user-friendly interface similar to the Layout Wizard for adjusting layout elements. Inline editing of tier labels and field labels is available, along with extended property adjustments through a gear icon.
    • Keyboard Shortcuts: Various shortcuts facilitate quick rearrangements of tiers and fields, enhancing efficiency during layout modifications.
    • Field and Tier Definitions: Users can add, search, and edit fields and tiers, with options to define extended properties, including class names and raw values.

    Key Outcomes

    By using the Layout Editor, ServiceNow customers can efficiently customize their layouts to meet specific requirements, ensuring that they maintain control over the presentation and functionality of their CPQ interfaces. Remember to save changes after editing and be aware that layouts uploaded via API cannot be modified using this tool. For those scenarios, exporting, modifying, and re-importing CSV files is necessary.

    Learn how to use the layout editor to modify a layout without leaving ServiceNow CPQ.

    The layout editor enables an admin to edit an layout without leaving ServiceNow CPQ.

    Layout editor

    1. The layout variable name appears in parenthesis in the header. The layout name and description can be edited by clicking the pencil icon.
    2. Three actions are available: Replace, Export, and Save.
      • Replace: Launches the file picker to select a CSV file to replace the current layout.
      • Export: Exports and downloads a CSV file of the current layout
      • Save: Save changes to the layout. This button will be disabled if no changes have been made to the layout.
    3. The layout editor provides three tabs for editing different aspects of the layout: Arrange Layout, Edit Field Info, and tier definition.

    The Arrange Layout tab

    The Arrange Layout tab provides a similar experience to the Layout Wizard. It lets you adjust various depths but does not allow for a change in the overall tier format.

    Layout editor

    1. Tier labels can be edited inline by clicking the pencil icon that appears on hover.
    2. Extended properties of the element can be edited by clicking the gear icon, which will launch a window to update the values.
    3. The field label can be edited by clicking the pencil icon, and extended properties of the field can be edited by clicking the gear icon. Fields can also be edited in the Edit Field Info tab.
    4. Clicking the plus icon in a column set lets you search for fields to add to the column set.
    5. Additional column sets can be added to the layout by clicking the plus icon in the tier you want to add to.
    6. Tiers can be added to the layout by clicking the plus icon outside of the existing tiers.
    Tip:
    Several keyboard shortcuts are available to rearrange these visual elements. For example, tiers and column sets can be moved vertically by pressing Cmd/Ctrl + ↑ or ↓, and fields can be moved horizontally by pressing Cmd/Ctrl + ← or →. While in the Arrange Layout tab, you can view the keyboard shortcuts by pressing Shift + ? or by clicking the keyboard icon at the top of the page.

    Keyboard shortcuts

    Mac:

    Layout editor

    PC:

    Layout editor

    Missing fields

    If a layout contains fields that are no longer available appear slightly grayed out, with a dashed border.

    Layout editor

    Partially supported elements

    Layout elements that are only partially supported appear with a darker gray background. Some properties can still be edited by clicking the gear icon.

    Field information such as label, display type, and extended properties can be edited in the layout editor.

    Layout editor

    Layout editor

    1. Search and filter fields associated with the layout.
    2. The field label can be edited inline by clicking the label to edit.
    3. The field display type can be updated from a list of available options for the field type by clicking the display type value for the field you are updating.
    4. Extended properties of the field can be edited by clicking the gear icon and making the edits in a dialog box.

    Edit extended field properties

    Layout editor

    1. Class Name: Classes can be added to fields and searched for in the search bar. Classes appear as a pill once added. Classes that control the width and height of the field or align the field to a grid layout have built-in support.
    2. Raw Value: The value can also be edited directly, in the format of key:value pairs. This corresponds to the value column in the layout.csv file.
    3. Cancel and Save

      Layout editor

    4. Number fields also have three values: Precision, Symbol, and Unit.
      • Precision: Controls the decimal precision of the number field
      • Symbol: Displays to the left of the number field
      • Unit: Displays to the right of the number field

    Tier definition

    The overall structure of the layout tiers can be updated in the tier definition tab. This is similar to selecting the initial tier definition when using the Layout Wizard.

    Layout editor

    1. Tier definition preview: Shows a simplified preview of the currently selected tier definition
    2. Tier definition menu: Provides a list of available tier definitions to select from

    When you have made all the changes to the layout, don’t forget to save it, using the Save button in the header.

    Additional considerations

    Layouts that were uploaded by using API calls cannot be edited in the layout editor. A message will appear that lets you import a CSV file to replace the layout.

    Layout editor

    Modifications that cannot be made by using the layout editor can be made by exporting, adjusting, and importing layout CSV files.

    The order of rows is not maintained as the layout editor parses the values.