트랜잭션 관리자: 레이아웃 - UI 효과

호주 판매 고객 관계 관리

Release

australia

ft:locale

ko-KR

ft:publication_title

호주 판매 고객 관계 관리

ft:clusterId

omgmt

bundleId

omgmt

workflow

Customer and Industry

트랜잭션 관리자: 레이아웃 - UI 효과

릴리스 버전: Australia

업데이트 날짜 2026년 03월 12일

소요 시간: 9분

YAML 또는 JSON으로 UI 효과를 프로그래밍하여 버튼에 기능을 추가하는 방법에 대해 알아봅니다.

트랜잭션 관리자에서 UI 효과는 버튼에 기능을 추가하는 레이아웃 요소입니다. 사용자는 설정된 UI 효과를 CPQ 사용자 지정할 수 있습니다. 그러나 사용자는 이벤트를 수행하는 동안 새 UI 효과를 만들 수 없습니다.

UI 효과와 이벤트가 같은 버튼에 있는 경우 이벤트가 실행된 후 UI 효과가 실행됩니다.

예: 목록 열기

예를 들어, UI 효과를 사용하면 트랜잭션에 추가할 수 있는 검색 가능한 제품 목록을 열 수 있습니다. 레이아웃에서 작성할 수 있는 방법은 다음과 같습니다.

      ...
      {
        "type": "button",
        "event": "productSearch",
        "label": "Add Products",
        "uiEffect": {
          "type": "productSearch",
          "target": "slideout"
        },
        "columnOrder": 6,
        "variableName": "productSearch"
      },
      ...

결과 UI에 해당 버튼이 표시되는 방식은 다음과 같습니다.

제품 추가

UI 효과 프로그래밍

UI 효과는 매개변수의 조합으로 정의됩니다. 모든 UI 효과에는 유형이 있으며 일부 효과에는 대상, 위치 또는 옵션이 있을 수 있습니다.

각 매개변수에는 다음과 같은 가능한 값이 있습니다.

type: , , anchor, productSearch, reconfigurerefreshSessionmanageFavoritesaddFavoritelineDetailurlshowTier
target: inline, , tab, windowmodal, slideout, , lineDrawer,fullScreen
location: [URL 또는 요소 ID]
options: [유형에 따라 다름]

유형 분석

url 에는 URL 형식의 위치가 필요합니다. 버튼을 누르면 특정 대상(인라인, 탭, 창, 모달 iframe 또는 슬라이드아웃 iframe)을 통해 사용자가 URL로 이동합니다. 관리자는 중괄호를 사용하여 필드 값을 URL에 동적으로 전달할 수 있습니다. 일반적인 사용 사례는 출력 문서에 값을 전달하거나 Salesforce에서 기록 페이지를 여는 것입니다.
anchor 에는 위치가 레이아웃의 요소 ID로 필요합니다. 버튼을 누르면 요소에 포커스를 맞추거나 스크롤합니다. 관련 상위 요소는 탭 또는 아코디언 구조로 열립니다. 대상은 인라인이어야 합니다.
productSearch 슬라이드아웃 또는 모달 창의 대상에서 제품 카탈로그를 엽니다. 변수 이름이 필요합니다. UI 효과를 gridHeaderButtons 요소에 추가해야 합니다. 옵션은 다음과 같습니다.
- 제품 목록 표시: products - true (표시), false (숨기기)
- 즐겨찾기 목록 표시: favorites - true (표시), 아니오(숨기기)
- 버튼 배치 위치: actionLocation - footer, header또는 둘 다
  - 지정되지 않은 경우 기본값으로 설정됩니다.footer
  - 버튼에는 "취소", "라인 추가", "구성" 및 "구성 완료"가 포함됩니다.
다음 코드는 제품을 표시하고, 즐겨찾기를 숨기고, 헤더에만 버튼을 배치합니다.
```
...
"options": {
  "products": true,
  "favorites": false,
  "actionLocation": header
},
...
```
lineDetail 은(는) 라인 수준 버튼에 있어야 합니다. 이 버튼을 누르면 대상(modal, slideout, 또는 lineDrawer)에서 줄 상세 정보 레이아웃이 열립니다.
exportLines 헤더 수준 버튼에 있어야 합니다. 버튼을 누르면 트랜잭션 라인이 CSV 파일로 익스포트됩니다.
reconfigure 라인 수준 또는 헤더 수준 버튼에 있을 수 있습니다. 버튼이 헤더 수준인 경우 줄을 선택해야 합니다. 유형은 reconfigure 대상(modal, slideout또는 lineDrawer)에서 구성을 엽니다. 에는 버튼 위치를 정의하는 옵션이 포함되어 있습니다. reconfigure 자세한 내용은 위를 참조하십시오 productSearch .
addFavorites 라인 수준 버튼 또는 헤더 수준 버튼에 있을 수 있습니다. 버튼이 헤더 수준인 경우 줄을 선택해야 합니다. addFavorites 선택 항목에서 즐겨찾기를 설명하고 생성할 수 있는 창을 엽니다. 다른 속성은 지원되지 않습니다.
주:
즐겨찾기를 공유하려면 테넌트 설정을 사용하도록 설정해야 합니다. 즐겨찾기 공유를 사용하려면 지원 티켓을 제출하십시오.
manageFavorites 지정된 대상(modal, slideout, inline또는 )에서 즐겨찾기 관리자를 엽니다.
refreshSession 세션이 수정되었는지 여부를 확인합니다. 그렇다면 refreshSession sessionId를 새로 고치고 변경 내용을 병합합니다.
showTiertarget = fullScreen 및 위치 = lineItems인 경우 전체 화면으로 라인 항목 그리드를 엽니다. showTier 모든 계층에서 작동하지만 이 기능의 목적을 위해 위치를 라인 항목의 계층 변수 이름으로 채워야 합니다.

현재 레이아웃 JSON은 확인되지 않았으며 일부 속성 조합은 지원되지 않습니다. 지원되지 않는 조합은 오류를 표시하지 않고 실패할 수 있습니다.

암시적 이벤트 호출

일부 UI 효과에는 관련 이벤트 실행이 포함됩니다. 예를 들어 UI 효과 reconfigure 나 UI 효과를 트리거하면 productSearch 이벤트가 실행됩니다upsertLines.

액세스 조건

UI 효과에 액세스하는 사용자의 기능은 이벤트와 같은 방식으로 제어할 수 없습니다. 다음 이벤트 설정에 필적할 수 있는 설정은 없습니다.

트랜잭션 관리자: 레이아웃 - UI 효과

그러나 UI 효과에 대한 액세스 조건은 트랜잭션의 컨텍스트 또는 관련 이벤트에 의해 변경될 수 있습니다.

UI 효과에 암시적 이벤트가 연결되어 있는 경우 이벤트의 액세스 조건에 따라 버튼의 액세스 조건이 결정되고 UI 효과도 결정됩니다. 따라서 관리자가 UI 효과를 트리거할 수 있는 productSearch 조건을 제한하려는 경우 이러한 제한 사항을 이벤트에 upsertLines 추가할 수 있습니다.

UI 효과가 reconfigure 있는 라인 그리드의 버튼은 구성할 수 없는 라인에서 숨겨져 있습니다. 헤더 수준에서는 선택한 모든 라인을 구성할 수 있는 경우에만 활성화됩니다.

이벤트와 UI 효과가 모두 버튼에 있는 경우 둘 다에 대한 액세스는 개별 액세스 설정의 교집합에 따라 결정됩니다. 버튼에 액세스할 수 있으려면 UI 효과와 이벤트에 모두 액세스할 수 있어야 합니다. 둘 중 하나가 비활성화되거나 숨겨져 있으면 전체 버튼이 비활성화되거나 숨겨집니다.

일반적인 케이스

제품 검색( addLines UI 효과는 암시적으로 upsertLines 이벤트를 호출함):

JSON 코드 스니펫

{
  "type": "button",
  "variableName": "addLines",
  "label": "Add Lines",
  "uiEffect": {
    "type": "productSearch",
    "target": "slideout"
  }
}

YAML 코드 스니펫

type: button
variableName: addLines
label: Add Lines
uiEffect:
  type: productSearch
  target: slideout

라인 상세 정보 서랍:

JSON 코드 스니펫

"lineLevelButtons": [
 {
   "icon": "settings",
   "label": "reconfig",
    "uiEffect": {
       "type": "lineDetail",
        "target": "lineDrawer"
      },
    "variableName": "reconfig"
  }

YAML 코드 스니펫

lineLevelButtons:
-icon: settings
 label: reconfig
 uiEffect:
   type: lineDetail
   target: lineDrawer
 variableName: reconfig

즐겨찾기를 활성화한 제품 검색:

JSON 코드 스니펫

{
  "type": "button",
  "variableName": "addLines",
  "label": "Add Lines",
  "uiEffect": {
    "type": "productSearch",
    "target": "slideout"
    "options": {
      "products": true,
      "favorites": true,
    }
  }
}

YAML 코드 스니펫

type: button
variableName: addLines
label: Add Lines
uiEffect:
  type: productSearch
  target: slideout
  options:
    products: true
    favorites: true

새 탭에서 URL 링크 열기:

JSON 코드 스니펫

{
  "columnorder": 1,
  "label": "Google it",
  "type": "event",
  "variableNane": "LinkToSite",
    "uieffect": {
        "type": "url",
        "target": "tab",
        "location": "https://google.com/search?q=I{txn.search}" 
    }
}

YAML 코드 스니펫

columnorder: 1
label: Google it
type: event
variableName: LinkToSite
uieffect:
  type: url
  target: tab
  location: "https://google.com/search?q=I{txn.search}"

세션 새로 고침:

JSON 코드 스니펫

{
  "type": "button",
  "variableName": "Refresh",
  "label": "Refresh",
  "uiEffect": {
    "type": "refreshSession"
  }
}

YAML 코드 스니펫

type: button
variableName: Refresh
label: Refresh
uiEffect:
  type: refreshSession

재구성:

JSON 코드 스니펫

"lineLevelButtons": [
  {
     "icon": "settings",
     "label": "Reconfigure",
      "uiEffect": {
          "type": "reconfigure",
          "target": "modal"
       },
     "variableName": "reconfig"
  }

YAML 코드 스니펫

lineLevelButtons:
-icon: settings
 label: Reconfigure
 uiEffect:
   type: reconfigure
   target: modal
 variableName: reconfig

즐겨찾기에 추가:

JSON 코드 스니펫

{
  "label": "Add To Favorites",
  "uiEffect": {
    "type": "addFavorite"
    },
  "variableName": "addFavorites"
}

YAML 코드 스니펫

label: Add To Favorites
uiEffect:
  type: addFavorite
variableName: addFavorites

즐겨찾기 관리:

JSON 코드 스니펫

{
  "label": "Manage Favorites",
  "uiEffect": {
    "type": "manageFavorites",
    "target": "modal"
    },
 "variableName": "manageFavorites"
}

YAML 코드 스니펫

label: Manage Favorites
uiEffect:
  type: manageFavorites
  target: slideout
variableName: manageFavorites

라인 익스포트 YAML 스니펫:

label: Export Lines
uiEffect:
  type: exportLines
variableName: exportLines