UI 빌더에서 지침 미리 보기 경험 사용자 지정

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 소요 시간: 5분

    • UI 빌더를 사용하여 상황별 측면 패널에 표시되는 권장 작업 카드의 미리 보기를 사용자 지정합니다. 미리 보기 경험에는 힌트, 아이콘, 메시지 및 작업 버튼이 포함됩니다.

    시작하기 전에

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

    이 태스크 정보

    먼저 지침 미리 보기 경험의 UI 페이지 변형을 만들어서 시작합니다. 페이지 템플릿에서 UI 페이지 변형을 만들 때에는 사용자 지정할 수 있는 기본 구조부터 시작합니다. 구성요소 속성을 사용하여 권장 카드 미리 보기의 모습을 변경할 수 있습니다.

    프로시저

    1. 다음으로 이동 모두 > 권장 작업 > 작업 유형 > 안내.
    2. 지침 목록에서 지침을 선택합니다.
    3. 미리 보기 UI 생성을 클릭하여 지침 미리 보기 경험의 UI 페이지 변형을 만듭니다.

      이 페이지에는 다음 테이블에 나열된 속성이 있는 빈 컨테이너가 포함되어 있습니다. 권장 작업 프레임워크는 customExpProps 객체를 사용자 지정 경험에 대한 속성으로 전달합니다.

      표 1. 미리 보기 경험 속성
      속성 설명
      sysId 권장 사항의 ID입니다.
      name 미리 보기 경험의 제목입니다.
      description 미리 보기 경험에 대한 메시지입니다.
      recommendationHint 권장 사항이 제안된 이유를 에이전트에게 알려주는 텍스트입니다.
      callToActions 지침 작업에 대한 설정입니다.
      actionTypeLabel 권장 작업 유형에 대한 레이블입니다.
      icon 권장 카드의 아이콘입니다.
      actionStateLabel 작업 상태의 외부 이름입니다.
      actionStateValue 작업 상태의 내부 이름입니다.
      previewFields 지침 미리 보기 경험에 표시되는 필드입니다.
      errorMessage 권장 사항이 표시되지 않을 때 표시되는 오류 메시지입니다.

      다음 예에서는 미리 보기 경험에 대한 속성 및 샘플 값을 보여줍니다.

      "customExpProps": { 
       "sysId": "05831457cc3f1110f877c24a7dd07eb0", 
       "name": "Eclipse configuration for Android development\n\t\t", 
       "description": "<p>Please review this article and attach</p>", 
       "recommendationHint": "This item may help you!", 
       "callToActions": [ 
            { 
            "label": "Review and attach article", 
            "name": "review_and_attach_article", 
            "id": "f18738c8a4f70110f87726cbf49777ae", 
            "actionBehavior": "contextual_side_panel", 
            "primary": "true", 
            "order": "100", 
            "completionMessage": "KB Article was shared." 
            } 
        ],   
       "actionTypeLabel": "Guidance", 
       "icon": "lightbulb-outline", 
       "actionStateLabel": "New", 
       "actionStateValue": "new", 
       "previewFields": [ 
            { 
            "label": "Number", 
            "name": "knowledge.number", 
            "value": { 
            "type": "string", 
            "value": "KB0000033" 
             } 
          }, 
       ], 
      "errorMessage": "This action couldn’t be completed." 
}
    4. UI 빌더에서 미리 보기 편집을 클릭합니다.
      UI 빌더에서 UI 페이지 변형이 열리며, 여기에서 구성요소를 추가하고 구성하여 미리 보기 경험의 모습과 느낌을 사용자 지정할 수 있습니다. 자세한 내용은 UI 빌더에서 구성요소 작업을 참조하십시오.
    5. 미리 보기 경험 속성을 미리 보기 UI에 바인딩합니다.
      데이터 바인딩은 UI 빌더에 있는 구성 패널의 구성 탭에 있습니다. 자세한 내용은 UI 빌더의 데이터 자원을 참조하십시오.
    6. 이벤트 핸들러를 사용하여 이벤트를 디스패치하고 해당 페이로드로 권장 사항을 실행하거나 건너뛰기 위해 미리 보기 UI의 구성요소에 스크립트를 추가하고 바인딩합니다.
      표 2. 미리 보기 경험 이벤트
      처리된 이벤트 설명
      ON_SINGLE_CLICK_ACTION 에이전트가 작업 버튼을 클릭하면 작업을 시작하고 완료합니다. 이 이벤트는 페이로드에서 다음 매개변수를 전달합니다.
      api.emit( 
    ‘ON_SINGLE_CLICK_ACTION‘, { 
        sysId: api.context.props.customExpProps.sysId, 
        name: api.context.props.customExpProps.name, 
        actionStateValue: api.context.props.customExpProps.actionStateValue, 
        actionMetadata: api.context.props.customExpProps.callToActions[0] 
    }
)
      ON_DRILL_DOWN_ACTION 에이전트가 기본 작업 버튼을 클릭하면 작업을 확장하고 추가 작업 또는 정보를 표시합니다. 이 이벤트는 페이로드에서 다음 매개변수를 전달합니다.
      api.emit( 
    ‘ON_DRILL_DOWN_ACTION‘, { 
        sysId: api.context.props.customExpProps.sysId, 
        name: api.context.props.customExpProps.name, 
        actionStateValue: api.context.props.customExpProps.actionStateValue, 
        actionMetadata: api.context.props.customExpProps.callToActions[0] 
     }
)
      DISMISS_ACTION_CLICK 작업을 취소합니다.
      api.emit( 
    ‘DISMISS_ACTION_CLICK‘, { 
         sysId: api.context.props.customExpProps.sysId
    }
)

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