--- sourceDocument: Australia Sales and Order Management sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/order-management Release : - australia ft:locale : - de-DE ft:publication_title : - Australia Sales and Order Management ft:clusterId : - omgmt bundleId : - omgmt workflow : - Customer and Industry --- # Transaction Manager: Layouts # Transaction Manager: Layouts {#ariaid-title1} * Freigeben Version: Australia * * Aktualisiert 12. März 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 9 Minuten Lesedauer Layouts in Transaction Manager can be managed in the Admin UI by using the layout editor or directly in the YAML format. This topic provides the details of the various layout structures, fields, buttons, and effects, and provides code snippets. In Transaction Manager, layouts retain much of the look and feel of the configuration user experience. In January 2026, a visual layout editor was introduced in Transaction Manager. Layouts can be edited in YAML format; however, the option to edit in JSON was retired in favor of the visual editor. Fields, events, UI effects, and lines are available for display and are detailed below. ## Layout formats (visual and YAML) {#transaction-manager-layouts__Layout-Formats-_JSON-and-YAML} Layouts can be managed in either the visual editor or in YAML. The visual editor is selected by default, but admins can toggle to YAML. ## Creating a new layout {#transaction-manager-layouts__Creating-a-New-Layout} To create a new layout, navigate to the Transaction Manager Admin UI, click Layouts in the menu on the left, and then click + Add Layout to add a new layout to the blueprint. An existing layout can be copied by using the Save As function in the layout. The layout requires a name and a variable name. Click in the Name field, enter the name of the new layout, and click Save to proceed. Although the name can later be edited in the layout, the variable name is not editable after the layout is saved. When the layout is saved, the visual editor opens. The default layout includes a few key items, such as the main tier, a line item grid, and a product search capability. ## Layout names and stage association {#transaction-manager-layouts__section_y23_qry_c3c} The layout's variable name is used to map layouts to stages. To map a layout to a stage, use the stage name as the layout name. A layout named "layout" maps to any stage that has no layout mapped to it. The text `default` is appended to all layout variables. For example, when the stages are named Draft, Approved, and Fulfilled, and the layouts are named Draft and Layout, the mapping is as follows: {#transaction-manager-layouts__table_ind_msy_c3c__entry__2} | Stage | Layout name | |:-|:-| | Draft | draft | | Approved | layout | | Fulfilled | layout | [Tabelle : 1. Stage association] {#transaction-manager-layouts__table_ind_msy_c3c} The optional Line Detail layout displays details on a selected line in the line item grid. This view is initiated via the Line Detail UI effect. This layout requires its own layout file and the variable name must end with `_linedetail`. These layouts follow the same mapping as stages. Continuing the example above, if you want a Line Detail layout for the Draft stage, the name must be `draft_linedetail`. The YAML code for the layout can be accessed by using the view toggle in the subheader. Admins can update the layout either by using the visual editor or by directly editing the YAML code. The YAML for each element can also be accessed in the Raw Value section of the element properties. The Save button saves the current version of the layout. However, the blueprint must be deployed for the new version to be used in runtime. If there are errors in the layout, the Save button is disabled. To identify errors, select the error messages button in the subheader. In the YAML view, look for red marks on the right side of the display that indicate the location of the error. ## General layout information {#transaction-manager-layouts__General-Layout-Information} Click the gear (settings) icon in the subheader to access the layout settings. Settings include the following: Branding : Customize the header. Currency Display : Set the currency display style: code, symbol, or neither. When price is 0, display : Set the behavior when the price is zero. When price is undefined, display : Set the behavior when the price is undefined. Allow selecting disabled options : Allow the user to select disabled items from a picklist. Use case is to display an explanation message if selected. Highlight field changes : When enabled, fields are briefly highlighted. Recommended when fields are updated via rules or integrations or if concurrent users are expected. Hide Header : Hides the header section of the layout. ## Theming {#transaction-manager-layouts__section_pry_rxy_c3c} Transaction Manager layouts can be customized with themes. Themes can be enabled on the Customize Theme tab. For more information, see [Customizing CPQ with themes](https://servicenow-prod.fluidtopics.net/CB4u0C2vXQk5GQTeAhEw5g "Custom themes let you customize your layout. You can enable custom themes by submitting a feature enablement request."). ## Stage progress chevrons {#transaction-manager-layouts__section_mzh_sxy_c3c} The Stages Progress Chevron component displays a horizontal chevron bar to visually represent a transaction's progression through stages. It can be defined statically or dynamically and is configurable through layout YAML. For more information, see [Transaction Manager: Layouts - The stages progress chevron](https://servicenow-prod.fluidtopics.net/HOxaBNQOZ0wWV44GEjTLpQ "You can configure a progress bar using layout JSON or YAML and define it either statically or dynamically. See code snippets."). ## Tiers {#transaction-manager-layouts__Tiers} Tiers are sections of information for your transaction. Tiers are the top of the hierarchical structure of a Transaction Manager layout. You can use tiers to organize your transaction information so that it is easier to find and understand for the buyside user. Columnsets, tiers, or a line item grid can be added within a tier, but a line item grid must be the only element in a tier. Tier types include Accordion, Expandable, Tabs, Vertical tabs, Headings, and Pages. The type and depth of a tier can be configured on the Tier Definition tab. ## Columnsets {#transaction-manager-layouts__Columnsets} As in configuration, columnsets are objects in the layout that enable you to organize fields and events on the runtime display. Fields and events can be arranged horizontally in a columnset. Fields and events are arranged vertically by using multiple columnsets in the same tier. You can add fields, images, text, and buttons within a columnset. ## Columnsets: fields {#transaction-manager-layouts__Columnsets-_-Fields} Fields are one type of object that can be placed in the Elements array of a columnset. Fields provide the data input source for the transaction. Fields can be added, removed, and ordered in a columnset on the Arrange Layout tab. Once added, additional field properties can be set on the Edit Field Info tab. On the Edit Field Info tab, changing the field display type to "text area" lets the user resize the field. ## ColumnSets: events {#transaction-manager-layouts__ColumnSets-_-Events} Events are objects that cause certain actions to be taken. Events are typically represented in the layout as a button. To add an event, add a button to a columnset, and then toggle the Event Button setting. Once it is enabled, an event can be selected from the Event picklist. ## Line Item Grid {#transaction-manager-layouts__Line-Item-Grid-_LIG} The Line Item Grid object displays the product information that is included in the transaction. Detailed product information and pricing information is displayed in the Line Item Grid object. In the layout editor, a line item grid is included by default, and has the following three sections: Line Item Grid Header : Buttons can be added and display atop the line item grid in runtime. Line item Grid Column : Fields can be added, removed, and ordered and display as columns on the line item grid. Line Level Buttons : Buttons can be added and display on each line in the line item grid. The line item grid has the following layout properties, each of which is enabled when its value is `true`. The properties must be defined in the main YAML editor. * showLineNumbers: enables user-friendly line numbers * supportLongText: a Line Item Grid field property that enables a popover on the field when selected * autoScrollIntoView: smooths the scroll interaction between the transaction body and LIG {#transaction-manager-layouts__ul_eks_hjl_hhc} YAML code snippet: - depth: 1 label: Line Items lineGrid: columns: - order: 1 variableName: txn.line.product.name - order: 2 variableName: txn.line.product.partnerId showLineNumbers: true lineLevelButtons: - icon: settings label: Line Details uiEffect: type: lineDetail target: slideout variableName: reconfig - event: cloneLine label: Clone Lines variableName: cloneLine - label: Add To Favorites uiEffect: type: addFavorite variableName: addFavorites gridHeaderButtons: - label: Add Lines uiEffect: type: productSearch target: slideout options: products: true favorites: true variableName: productSearch - label: Add To Favorites uiEffect: type: addFavorite variableName: addFavorites - label: Reconfigure Lines uiEffect: type: reconfigure target: slideout variableName: reconfig autoScrollIntoView: true variableName: lineItems Line-level event buttons can have an icon defined. Icons must be defined in the YAML code in either the Raw Value section of the line button properties or in the main YAML editor. Buttons can use specified icons from the SLDS Utility library. |-|-|-|-|-|-| | ![hollow gear icon]() automate | ![icon of three people and a check mark]() buyer_group_qualifier | ![chevron pointing down]() chevrondown | ![chevron pointing left]() chevronleft | ![chevron pointing right]() chevronright | ![chevron pointing up]() chevronup | | ![option button]() choice | ![white x on solid background]() clear | ![clock icon]() clock | ![x icon]() close | ![wrench icon]() custom_apps | ![trash can icon]() delete | | ![triangle pointing down]() down | ![pencil icon]() edit | ![star icon]() favorite | ![triangle pointing left]() left | ![icon of lightning bolt and gear]() lightning_extension | ![triangle pointing right]() right | | ![question mark]() question | ![magnifying glass icon]() search | ![solid gear icon]() settings | ![icon of arrow pointing at center of target]() target_mode | ![three horizontal dots]() threedots | ![three vertical dots]() threedots_vertical | [Tabelle : 2. Available icons] {#transaction-manager-layouts__table_ykm_jll_hhc} YAML code snippet: lineLevelButtons: - icon: settings label: Line Details uiEffect: type: lineDetail target: slideout variableName: reconfig - event: cloneLine label: Clone Lines variableName: cloneLine - label: Add To Favorites uiEffect: type: addFavorite variableName: addFavorites ## Product list search {#transaction-manager-layouts__section_n2k_12z_c3c} The Product List Search object provides a set of layout properties for the product list search results in the add lines/product search flow. By default, the product list search is added via the Add Lines UI effect button. Fields can be added, removed, and reordered in the Product Search object to define the runtime UI. Related properties can be found in three locations: * The button properties of the button with the Product Search UI effect * Product list search properties accessed via the Product Search object in the layout * Each of the fields in the Product List Search object on the layout {#transaction-manager-layouts__ul_nyf_kfz_c3c} UI effect button properties include: UI Effect Target : Options for Product Search display Show Products : Adds the Products tab to the product search Show Favorites : Adds the User Favorites tab to the product search Action Location : The location of action buttons on the product search display The properties of the Product List Search object include: * Primary Default Sort: Define up to two parameters used to sort search results. The following fields can be used as parameters: * modified * created * Name (default if no parameters are defined) * partnerId * productCode * description * unitPrice * externallyConfigurable {#transaction-manager-layouts__ul_n42_xgz_c3c}The order can be defined per parameter as `asc` or `desc`. * Search on Submit: Determines whether search results are updated as the user types or only when the user clicks Submit. {#transaction-manager-layouts__ul_rfj_tgz_c3c} Field-level properties include: Column Width : CSS compatible value to define width Alignment : Alignment of header and values Enable Sorting : When enabled, allows column to be sorted Enable Long Text Popover : When enabled, a popover is displayed when value in field is selected ## UI effects {#transaction-manager-layouts__UI-Effects} UI effects are layout elements that add specific functionalities to a Button. UI effects include: URL : Opens the associated URL inline, in a modal window, in a slideout panel, or in a new tab or window. Anchor : Navigates to specified location in the transaction Product search : Opens the product catalog, starting the Add Products flow Line detail : Opens the line-detail layout Reconfigure : Opens the selected products to configuration UX Add favorite : Opens a modal window to describe and create a favorite from the selection Manage favorites : Opens the Favorites Manager Refresh session : Checks whether the session has been modified, and if so, refreshes the sessionId and merges changes. Export lines : Exports to a CSV file all lines in a transaction that meet the sort, filter, and show/hide column settings. ## YAML code snippets {#transaction-manager-layouts__section_ofv_xhz_c3c} Layout properties: # Layout version version: 1 # Layout identifiers label: Example layout variableName: default_ExampleLayout # Tier definitions tierDef: - depth: 1 representation: BasicContainer # Layout layout: label: layoutsection variableName: layoutsection tiers: - label: tier1 variableName: tier1 depth: 1 Tiers: # Layout layout: label: layoutsection variableName: layoutsection tiers: - label: tier1 variableName: tier1 depth: 1 Columnsets: columnSets: - elements: - type: field columnOrder: 1 variableName: txn.opportunity.id variableName: col1 Columnset with fields: columnSets: - elements: - type: field columnOrder: 1 variableName: txn.opportunity.id - type: field columnOrder: 1 variableName: txn.custom.opportunityName - type: field classInfo: mw20 columnOrder: 1 variableName: txn.custom.primaryContact variableName: col1 Columnset with events: To be added Field properties: fields: - type: Text label: Custom line field variableName: txn.line.custom.customText - type: ReadOnlyText label: TXN Number variableName: txn.custom.tXNNumber Product list search: productList: columns: - label: Product ID sortable: true variableName: id - label: Product Name variableName: name - label: Product description variableName: description supportLongText: true - label: Price variableName: unitPrice defaultSort: - externallyConfigurable,desc - name **Zugehörige Konzepte** * [Transaction Manager: Layouts - UI effects](https://servicenow-prod.fluidtopics.net/qMO0jaypy2hiiDCTiSCuFQ "Learn how to add functionality to a button by programming UI effects in either YAML or JSON.") * [Transaction Manager: Layouts - Theming options](https://servicenow-prod.fluidtopics.net/xqZicFjBOOOGzvPNgi9SDg "Transaction Manager layouts can be adjusted by setting JSON and YAML properties.")