UI 빌더에서 지침 상세 정보 경험 사용자 지정

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 4분

    • UI 빌더를 사용하여권장 작업 카드의 상황별 측면 패널이나 하위 탭에서 상세 정보 경험의 모습을 사용자 지정합니다. 상세 정보 경험에는 사용자 입력 및 드릴다운 작업과 같은 요소가 포함될 수 있습니다.

    시작하기 전에

    필요한 역할: sn_nb_action.next_best_action_author 및 ui_builder_admin, admin

    이 태스크 정보

    먼저 상세 정보 환경의 UI 페이지 변형을 만들어서 시작합니다. 페이지 템플릿에서 UI 페이지 변형을 만들 때는 사용자 지정할 수 있는 기본 구조부터 시작합니다. 구성요소를 구성하고 구성요소 속성을 사용하여 상황별 측면 패널이나 하위 탭에서 상세 정보 경험의 모습을 변경할 수 있습니다.

    프로시저

    1. 다음으로 이동 모두 > 권장 작업 > 작업 유형 > 안내.
    2. 지침 목록에서 지침을 선택합니다.
    3. 상세 정보 UI 생성을 선택하여 상세 정보 UI의 UI 페이지 변형을 만듭니다.
      이 페이지에는 다음 테이블에 나열된 속성이 있는 빈 컨테이너가 포함되어 있습니다.
      표 1. 상세 정보 경험 속성
      속성 설명
      guidanceInputs 지침을 수행하는 데 필요한 입력입니다.
      guidanceOutputs 지침의 출력입니다.
      상태 지침의 상태입니다.
      guidanceMessage 상세 정보 경험에 대한 메시지입니다.
      guidanceActions 상세 정보 뷰의 지침 작업입니다.
      errorMessages 권장 사항이 표시되지 않을 때 표시되는 오류 메시지입니다.

      다음 예에서는 세부 정보 경험에 대한 속성 및 샘플 값을 보여줍니다.

      {
    "guidanceInputs": {},
    "guidanceOutputs": {
        "meta": []
    },
    "status": "waiting",
    "guidanceMessage": "",
    "guidanceActions": [
        {
            "label": "Attach",
            "action_sys_id": "1e8392aa436f0210f81d92621ab8f291",
            "variant": "primary",
            "isExecuted": false,
            "completionMessage": "Knowledge article successfully attached.",
            "action_behaviour": "contextual_side_panel",
            "primary": true
        }
    ],
    "errorMessage": "",
    "actionConfigurations": {},
    "guidanceId": "",
    "tableName": "sn_customerservice_case",
    "bare": true,
    "scrollable": "none"
}
    4. UI 빌더에서 상세 정보 편집을 선택합니다.
      UI 페이지 변형이 열리 UI 빌더며 여기에서 구성요소를 추가하고 구성하여 상세 정보 환경의 모양과 느낌을 사용자 지정할 수 있습니다. 자세한 내용은 UI 빌더에서 구성요소 작업을 참조하세요.
    5. 미리 보기 경험 속성을 사용자 지정 상세 정보 UI에 바인딩합니다.
      데이터 바인딩은 에 있는 UI 빌더구성 패널의 구성 탭에 있습니다. 자세한 내용은 UI 빌더의 데이터 자원을 참조하십시오.
    6. 이벤트 핸들러를 사용하여 이벤트를 디스패치함으로써 해당 페이로드로 권장 사항을 실행하거나, 건너뛰거나, 완료했다고 표시하기 위해 사용자 지정 상세 정보 UI의 구성요소에 스크립트를 추가하고 바인딩합니다.
      표 2. 상세 정보 경험 이벤트
      처리된 이벤트 설명
      GUIDANCE_ACTION_CLICKED 선택된 작업입니다. 이 이벤트는 선택한 작업을 페이로드에 전달합니다.
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions.find(action => action.label == "guidance action label"); 
    } 
);
      주:
      응답의 guidanceActions[n] 속성에 적용하려는 작업의 인덱스 번호를 제공합니다.
      SKIP_GUIDANCE 지침을 건너뜁니다.
      api.emit(
   ‘SKIP_GUIDANCE’
);
      GUIDANCE_MESSAGE_PUBLISHED 데이터를 업스트림 애플리케이션에 전달합니다.
      api.emit( 
  ‘SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED’,
    { 
     name:'decision-tree-payload'
     jsonPayload: jsonObject
    } 
);
      GUIDANCE_MARK_COMPLETE 사용자 지정 지침을 완료됨으로 표시합니다.
      api.emit(
  'GUIDANCE_MARK_COMPLETE'
);
      GO_BACK_GUIDANCE 결정 트리의 이전 노드로 돌아갑니다.
      api.emit(
   ‘GO_BACK_GUIDANCE’
);
      ACTION_TRIGGERED_PROPAGATION 지침 작업에 대한 UI별 동작을 추가할 수 있습니다. 이 이벤트는 페이로드 상세 정보를 이 이벤트를 처리할 수 있는 상위 항목으로 전파합니다.
      api.emit(
    ‘SN_NEXT_BEST_ACTION_LIST_CONNECTED #ACTION_TRIGGERED‘, {
   "actionSysId":api.context.props.guidanceId,
   "actionName": api.context.props.actionConfigurations[api.context.props.guidanceId][“actionName”]
   "actionType": "guidance",
   "eventName": "<eventName>",
   "payload": {}

      자세한 내용은 구성요소에 클라이언트 스크립트 정의 및 바인딩을 참조하세요.