트랜잭션 관리자: 레이아웃

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 13분
  • 트랜잭션 관리자의 레이아웃은 레이아웃 편집기를 사용하여 관리자 UI에서 관리하거나 YAML 형식으로 직접 관리할 수 있습니다. 이 주제에서는 다양한 레이아웃 구조, 필드, 버튼 및 효과에 대한 상세 정보를 제공하고 코드 스니펫을 제공합니다.

    Transaction Manager에서 레이아웃은 구성 사용자 환경의 모양과 느낌을 대부분 유지합니다. 2026년 1월, 트랜잭션 관리자에 시각적 레이아웃 편집기가 도입되었습니다. 레이아웃은 YAML 형식으로 편집할 수 있습니다. 그러나 JSON으로 편집하는 옵션은 시각적 편집기를 위해 폐기되었습니다. 필드, 이벤트, UI 효과 및 선을 표시할 수 있으며 아래에 자세히 설명되어 있습니다.

    레이아웃 형식(시각적 및 YAML)

    레이아웃은 시각적 편집기 또는 YAML에서 관리할 수 있습니다. 시각적 편집기는 기본적으로 선택되지만 관리자는 YAML로 전환할 수 있습니다.

    새 레이아웃 작성 중

    새 레이아웃을 만들려면 트랜잭션 관리자 관리자 UI로 이동하여 왼쪽 메뉴에서 레이아웃 을 클릭한 다음 + 레이아웃 추가 를 클릭하여 Blueprint에 새 레이아웃을 추가합니다.

    레이아웃에서 다른 이름으로 저장 기능을 사용하여 기존 레이아웃을 복사할 수 있습니다.

    트랜잭션 관리자: 레이아웃

    레이아웃에는 이름과 변수 이름이 필요합니다. 이름 필드를 클릭하고 새 레이아웃의 이름을 입력하고 저장 을 클릭하여 계속 진행합니다. 나중에 레이아웃에서 이름을 편집할 수 있지만 레이아웃을 저장한 후에는 변수 이름을 편집할 수 없습니다.

    레이아웃이 저장되면 시각적 편집기가 열립니다. 기본 레이아웃에는 메인 계층, 라인 항목 그리드, 제품 검색 기능과 같은 몇 가지 주요 항목이 포함되어 있습니다.

    레이아웃 이름 및 스테이지 연결

    레이아웃의 변수 이름은 레이아웃을 스테이지에 매핑하는 데 사용됩니다. 레이아웃을 스테이지에 매핑하려면 스테이지 이름을 레이아웃 이름으로 사용합니다. 이름이 "레이아웃"인 레이아웃은 매핑된 레이아웃이 없는 모든 스테이지에 매핑됩니다. 텍스트 기본값 은 모든 레이아웃 변수에 추가됩니다.

    예를 들어 스테이지의 이름이 초안, 승인됨 및 이행됨이고 레이아웃의 이름이 초안 및 레이아웃인 경우 매핑은 다음과 같습니다.

    표 1. 스테이지 연결
    스테이지 레이아웃 이름
    초안 초안
    승인함 레이아웃
    이행됨 레이아웃

    선택적 라인 상세 정보 레이아웃은 라인 항목 그리드에서 선택한 라인에 대한 상세 정보를 표시합니다. 이 뷰는 라인 상세 정보 UI 효과를 통해 시작됩니다. 이 레이아웃에는 자체 레이아웃 파일이 필요하며 변수 이름은 _linedetail로 끝나야 합니다. 이러한 레이아웃은 스테이지와 동일한 매핑을 따릅니다. 위의 예를 계속 진행하면서 초안 스테이지에 대한 라인 상세 정보 레이아웃을 사용하려면 이름을 draft_linedetail해야 합니다.

    트랜잭션 관리자: 새 레이아웃 보기

    하위 헤더의 뷰 토글을 사용하여 레이아웃의 YAML 코드에 액세스할 수 있습니다. 관리자는 시각적 편집기를 사용하거나 YAML 코드를 직접 편집하여 레이아웃을 업데이트할 수 있습니다. 각 요소에 대한 YAML은 요소 속성의 원시 값 섹션에서도 액세스할 수 있습니다.

    저장 버튼은 레이아웃의 현재 버전을 저장합니다. 그러나 런타임에 새 버전을 사용하려면 Blueprint를 배포해야 합니다. 레이아웃에 오류가 있으면 저장 버튼이 비활성화됩니다. 오류를 식별하려면 하위 헤더에서 오류 메시지 버튼을 선택합니다. YAML 뷰에서 오류 위치를 나타내는 디스플레이 오른쪽에 있는 빨간색 표시를 찾습니다.

    트랜잭션 관리자 레이아웃

    일반 레이아웃 정보

    하위 헤더의 기어(설정) 아이콘을 클릭하여 레이아웃 설정에 액세스합니다.

    트랜잭션 관리자: 레이아웃 속성 대화 상자

    설정에는 다음이 포함됩니다.

    브랜딩
    헤더를 사용자 지정합니다.
    통화 표시
    통화 표시 스타일을 코드, 기호 또는 둘 다 설정하지 않음
    가격이 0이면 표시합니다.
    가격이 0일 때의 동작을 설정합니다.
    가격이 정의되지 않은 경우
    가격이 정의되지 않을 때의 동작을 설정합니다.
    비활성화된 옵션 선택 허용
    사용자가 선택 목록에서 비활성화된 항목을 선택할 수 있도록 허용합니다. 선택 시 설명 메시지를 표시하는 것이 사용 사례입니다.
    필드 변경 강조 표시
    이 옵션을 사용하면 필드가 잠시 강조 표시됩니다. 규칙이나 통합을 통해 필드를 업데이트하거나 동시 사용자가 필요한 경우 권장됩니다.
    헤더 숨기기
    레이아웃의 헤더 섹션을 숨깁니다.

    테마

    Transaction Manager 레이아웃은 테마로 사용자 지정할 수 있습니다. 테마는 테마 사용자 지정 탭에서 활성화할 수 있습니다. 자세한 내용은 테마를 CPQ 사용하여 사용자 지정 문서를 참조하십시오.

    스테이지 진행률 펼침 단추

    스테이지 진행률 펼침 단추 구성요소는 스테이지를 통한 트랜잭션의 진행 상황을 시각적으로 나타내는 가로 펼침 막대를 표시합니다. 정적 또는 동적으로 정의할 수 있으며 레이아웃 YAML을 통해 구성할 수 있습니다. 자세한 내용은 트랜잭션 관리자: 레이아웃 - 스테이지 진행률 펼침 단추 문서를 참조하십시오.

    계층

    계층은 트랜잭션에 대한 정보 섹션입니다. 계층은 트랜잭션 관리자 레이아웃의 계층 구조 중 최상위입니다. 계층을 사용하여 거래 정보를 구성하면 구매 측 사용자가 더 쉽게 찾고 이해할 수 있습니다. 열 집합, 계층 또는 광고 항목 그리드는 계층 내에 추가할 수 있지만 라인 항목 그리드는 계층의 유일한 요소여야 합니다.

    계층 유형에는 아코디언, 확장 가능, 탭, 세로 탭, 제목 및 페이지가 포함됩니다. 계층의 유형과 깊이는 계층 정의 탭에서 구성할 수 있습니다.

    열 세트

    구성에서와 마찬가지로 열 집합은 런타임 디스플레이에서 필드와 이벤트를 구성할 수 있는 레이아웃의 객체입니다. 필드와 이벤트를 열 집합에 가로로 정렬할 수 있습니다. 필드와 이벤트는 동일한 계층에서 여러 열 집합을 사용하여 세로로 정렬됩니다. 열 집합 내에 필드, 이미지, 텍스트 및 단추를 추가할 수 있습니다.

    열 세트: 필드

    필드는 열 집합의 Elements 배열에 배치할 수 있는 개체의 한 유형입니다. 필드는 트랜잭션에 대한 데이터 입력 소스를 제공합니다. 레이아웃 정렬 탭의 열 세트에서 필드를 추가, 제거 및 정렬할 수 있습니다. 추가가 완료되면 필드 정보 편집 탭에서 추가 필드 속성을 설정할 수 있습니다.

    필드 정보 편집 탭에서 필드 표시 유형을 "텍스트 영역"으로 변경하면 사용자가 필드의 크기를 조정할 수 있습니다.

    ColumnSets: events

    이벤트는 특정 작업을 수행하게 하는 개체입니다. 이벤트는 일반적으로 레이아웃에서 버튼으로 표시됩니다. 이벤트를 추가하려면 열 집합에 단추를 추가한 다음 이벤트 단추 설정을 전환합니다. 활성화되면 이벤트 선택 목록에서 이벤트를 선택할 수 있습니다.

    트랜잭션 관리자: 이벤트가 활성화된 버튼 속성

    라인 항목 그리드

    라인 항목 그리드 객체는 트랜잭션에 포함된 제품 정보를 표시합니다. 자세한 제품 정보 및 가격 정보는 라인 항목 그리드 객체에 표시됩니다.

    레이아웃 편집기에는 기본적으로 라인 항목 그리드가 포함되며 다음 세 개의 섹션이 있습니다.
    라인 항목 그리드 헤더
    런타임에 버튼을 추가하여 라인 항목 그리드 상단에 표시할 수 있습니다.
    라인 항목 그리드 열
    필드를 추가, 제거 및 정렬할 수 있으며 라인 항목 그리드에 열로 표시할 수 있습니다.
    라인 수준 버튼
    버튼을 추가하고 라인 항목 그리드의 각 라인에 표시할 수 있습니다.

    라인 항목 그리드에는 다음과 같은 레이아웃 속성이 있으며, 각 속성의 값은 true일 때 활성화됩니다. 속성은 기본 YAML 편집기에서 정의해야 합니다.

    • showLineNumbers: 사용자 친화적인 라인 번호 사용
    • supportLongText: 선택 시 필드에서 팝오버를 활성화하는 라인 항목 그리드 필드 속성
    • autoScrollIntoView: 트랜잭션 본문과 LIG 간의 스크롤 상호 작용을 부드럽게 합니다.

    YAML 코드 스니펫:

         - 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
    

    라인 수준 이벤트 버튼에는 아이콘이 정의될 수 있습니다. 아이콘은 라인 단추 속성의 원시 값 섹션에 있는 YAML 코드 또는 기본 YAML 편집기에서 정의되어야 합니다. 버튼은 SLDS 유틸리티 라이브러리에서 지정된 아이콘을 사용할 수 있습니다.

    표 2. 사용 가능한 아이콘
    속이 빈 톱니바퀴 아이콘

    자동화

    세 사람과 체크 표시의 아이콘

    buyer_group_qualifier

    아래를 가리키는 펼침 단추

    펼침 단추

    왼쪽을 가리키는 펼침 단추

    왼쪽 펼침 단추

    오른쪽을 가리키는 펼침 단추

    펼침 단추 오른쪽

    위쪽을 가리키는 펼침 단추

    펼침 단추

    옵션 버튼

    선택

    단색 배경에 흰색 X

    지우기

    시계 아이콘

    시계

    X 아이콘

    종결

    렌치 아이콘

    custom_apps

    휴지통 아이콘

    삭제

    아래를 가리키는 삼각형

    아래로

    연필 아이콘

    편집

    별 아이콘

    즐겨찾기

    왼쪽을 가리키는 삼각형

    왼쪽

    번개와 기어의 아이콘

    lightning_extension

    오른쪽을 가리키는 삼각형

    오른쪽

    물음표

    질문

    돋보기 아이콘

    검색

    솔리드 기어 아이콘

    설정

    대상 중심을 가리키는 화살표 아이콘

    target_mode

    세 개의 가로 점

    3점

    세 개의 세로 점

    threedots_vertical

    YAML 코드 스니펫:

            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

    마지막으로, 라인 항목 그리드에 라인 번호를 표시하는 세 가지 방법이 있습니다: 레이아웃 속성을 사용하거나 두 시스템 필드 중 하나를 사용합니다.

    • layout 속성입니다 showLineNumbers . 효율적으로 수행되고 라인 수에 제한이 없으므로 이 방법을 사용하는 것이 좋습니다.

      showLineNumbers 표시되는 줄의 순차적 라인 번호를 표시합니다. 필터 또는 검색이 라인 항목 그리드에 적용되면 번호 매기기가 재설정됩니다.

    • txn.line.orderNumber 시스템 필드

      txn.line.orderNumber 모든 라인에 대해 계층적 줄 번호 매기기를 표시합니다(예: 1, 1.1, 2, 2.1, 2.2, 2.2.1). 필터나 검색이 라인 항목 그리드에 적용되어도 번호 매기기는 재설정되지 않습니다. 최대 2,000줄까지 번호 매기기를 적용할 수 있습니다.

      이 필드는 다른 라인 수준 필드와 동일한 레이아웃 속성을 가지며 레이아웃의 lineGrid 섹션에 있는 레이아웃에 추가할 수 있습니다.

      이 필드를 활성화하려면 고객 지원에 요청을 제출하십시오.

    • txn.line.number 시스템 필드

      txn.line.number 모든 라인에 대한 순차적 라인 번호 매기기를 표시합니다(즉, 1, 2, 3 등).

      과 마찬가지로 txn.line.orderNumber필터나 검색이 적용되어도 번호 매기기가 재설정되지 않으며 최대 2,000줄이 있습니다. 이 필드는 다른 라인 수준 필드와 동일한 레이아웃 속성을 가지며 레이아웃의 lineGrid 섹션에 있는 레이아웃에 추가할 수 있습니다. 이 필드를 활성화하려면 고객 지원에 요청을 제출하십시오.

    제품 목록 검색

    제품 목록 검색 객체는 라인 추가/제품 검색 플로우에서 제품 목록 검색 결과에 대한 레이아웃 속성 세트를 제공합니다. 기본적으로 제품 목록 검색은 라인 추가 UI 효과 버튼을 통해 추가됩니다. 제품 검색 객체에서 필드를 추가, 제거 및 재정렬하여 런타임 UI를 정의할 수 있습니다. 관련 속성은 다음 세 위치에서 찾을 수 있습니다.

    • 제품 검색 UI 효과가 있는 버튼의 버튼 속성
    • 레이아웃의 제품 검색 객체를 통해 접근하는 제품 목록 검색 속성
    • 레이아웃의 제품 목록 검색 객체에 있는 각 필드
    UI 효과 단추 속성은 다음과 같습니다.
    UI 효과 대상
    제품 검색 표시 옵션
    제품 표시
    제품 검색에 제품 탭 추가
    즐겨찾기 표시
    제품 검색에 사용자 즐겨찾기 탭 추가
    작업 위치
    제품 검색 디스플레이의 작업 버튼 위치

    트랜잭션 관리자: 제품 목록 검색 객체의 버튼 속성

    제품 목록 검색 개체의 속성은 다음과 같습니다.

    • 기본 기본 정렬: 검색 결과를 정렬하는 데 사용되는 매개변수를 최대 2개까지 정의합니다. 다음 필드를 매개변수로 사용할 수 있습니다.
      • 수정됨
      • created
      • 이름(매개변수가 정의되지 않은 경우 기본값)
      • partnerId
      • 제품 코드
      • 설명
      • 단위가격
      • 외부적으로 구성 가능
      순서는 매개변수당 오름차순 또는 내림차순으로 정의할 수 있습니다.
    • 제출 시 검색: 검색 결과가 사용자 입력에 따라 업데이트되는지 또는 사용자가 제출을 클릭할 때만 업데이트되는지 여부를 결정합니다.

    트랜잭션 관리자: 제품 목록 속성

    필드 수준 속성은 다음과 같습니다.

    열 너비
    너비를 정의하기 위한 CSS 호환 값
    정렬
    헤더와 값 정렬
    정렬 사용
    이 옵션을 사용하면 열을 정렬할 수 있습니다.
    긴 텍스트 팝오버 사용
    사용하도록 설정하면 필드의 값을 선택하면 팝오버가 표시됩니다.

    트랜잭션 관리자: 제품 목록 열 속성

    UI 효과

    UI 효과는 버튼에 특정 기능을 추가하는 레이아웃 요소입니다. UI 효과는 다음과 같습니다.

    URL
    연결된 URL을 인라인, 모달 창, 슬라이드아웃 패널 또는 새 탭이나 창에서 엽니다.
    앵커
    트랜잭션에서 지정된 위치로 이동
    제품 검색
    제품 카탈로그를 열고 제품 추가 플로우를 시작합니다.
    라인 상세 정보
    라인 상세 정보 레이아웃을 엽니다.
    재구성
    선택한 제품을 열어 구성 UX
    즐겨찾기 추가
    선택 항목에서 즐겨찾기를 설명하고 작성할 수 있는 모달 창을 엽니다.
    즐겨찾기 관리
    즐겨찾기 관리자를 엽니다.
    세션 새로 고침
    세션이 수정되었는지 확인하고, 수정된 경우 sessionId를 새로 고치고 변경 내용을 병합합니다.
    익스포트 라인
    정렬, 필터 및 열 설정/숨기기 설정을 충족하는 트랜잭션의 모든 라인을 CSV 파일로 익스포트합니다.

    YAML 코드 스니펫

    레이아웃 속성:

    # 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

    계층:

    # Layout
    layout:
      label: layoutsection
      variableName: layoutsection
      tiers:
        - label: tier1
          variableName: tier1
          depth: 1

    열 세트:

    columnSets:
            - elements:
                - type: field
                  columnOrder: 1
                  variableName: txn.opportunity.id
              variableName: col1

    필드가 있는 열 세트:

    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

    이벤트가 있는 열 세트:

    To be added

    필드 속성:

    fields:
      - type: Text
        label: Custom line field
        variableName: txn.line.custom.customText
      - type: ReadOnlyText
        label: TXN Number
        variableName: txn.custom.tXNNumber

    제품 목록 검색:

    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