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

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

시작하기 전에

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

이 태스크 정보

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

프로시저

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

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

   표 1. 미리 보기 경험 속성

   속성	설명
   sysId	권장 사항의 ID입니다.
   이름	미리 보기 경험의 제목입니다.
   설명	미리 보기 경험에 대한 메시지입니다.
   권장 사항 힌트	권장 사항이 제안된 이유를 에이전트에게 알려주는 텍스트입니다.
   callToActions	지침 작업에 대한 설정입니다.
   actionTypeLabel	권장 작업 유형에 대한 레이블입니다.
   아이콘	권장 카드의 아이콘입니다.
   actionStateLabel	작업 상태의 외부 이름입니다.
   actionStateValue	작업 상태의 내부 이름입니다.
   미리 보기 필드	지침 미리 보기 경험에 표시할 필드입니다.
   errorMessage	권장 사항이 표시되지 않을 때 표시되는 오류 메시지입니다.
   aria히든	권장 작업 그룹화 목록에서 sn-carousel 구성요소는 이 속성을 각 카드에 전달하여 캐러셀 내에 콘텐츠가 숨겨져 있는지 여부를 결정합니다. 카드가 숨겨져 있는 경우 이 값을 사용하여 aria-hidden을 설정하거나 실행 가능한 구성요소를 예로 비활성화하여 접근성 문제를 방지할 수 있습니다.
   useCase	지침이 렌더링되는 검색/RA 탭입니다.
   actionInputs	지침 입력입니다.
   작업 유형 SysId	권장 유형의 시스템 ID입니다.
   actionId	권장 사항의 시스템 ID입니다.
   테이블	권장 작업 컨텍스트 테이블
   tableSysId	권장 작업 컨텍스트 테이블 기록 sys_id.
   렌더러	상세한 경험을 렌더링할 책임이 있는 구성요소
   보조 호출 작업	카드에 표시할 보조 작업입니다.
   is지니어스	검색 탭 genius 결과에 사용되는 genius 결과 카드입니다.
   contextSysId	권장 작업 컨텍스트 sysId입니다.
   actionConfigurations	권장 작업 actionConfigurations 속성 값입니다. 기본적으로 값 필드는 비어 있습니다.
   isFullSearchView	측면 패널 뷰의 전체 검색 뷰에 검색이 표시되는 경우 이 값은 true입니다.
   컨텍스트입력	권장 작업 contextInput 속성 값입니다. 미리 정의된 구문을 가져오려면 다음으로 이동하십시오. 모든 > > 권장 작업 > 컨텍스트 > 컨텍스트 입력 및 컨텍스트 입력의 JSON 형식을 복사합니다.
   검색 관련성 점수	사용 사례가 검색 이지만 제안된 작업이 아닌 경우 지침 카드에 표시되는 검색 결과의 관련성 점수입니다. 값이 null이거나 정의되지 않은 경우 관련성 점수 구성요소가 지침 카드에 숨겨집니다.

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

   "customExpProps": {
           "sysId": "e8421a2a436f0210f81d92621ab8f2da",
           "name": "Attach and share article",
           "description": null,
           "recommendationHint": "Knowledge",
           "callToActions": [
               {
                   "label": "",
                   "name": "",
                   "id": "1e8392aa436f0210f81d92621ab8f291",
                   "actionBehavior": "contextual_side_panel",
                   "primary": "true",
                   "order": "100",
                   "completionMessage": "Knowledge article successfully attached."
               }
           ],
           "recommendationAction": "",
           "actionTypeLabel": "Guidance",
           "icon": "magnifying-glass-sparkle-outline",
           "actionStateLabel": "New",
           "actionStateValue": "new",
           "previewFields": null,
           "attributes": "",
           "errorMessage": "",
           "ariaHidden": false,
           "useCase": "search",
           "actionInputs": {},
           "actionTypeSysId": "",
           "actionId": "",
           "table": "sn_customerservice_case",
           "tableSysId": "",
           "renderer": "sn-guidance-experience-connected",
           "secondaryCallToAction": {},
           "isGenius": false,
           "contextSysId": "",
           "actionConfigurations": {},
           "isFullSearchView": false
       }
   

4. UI 빌더에서 미리 보기 편집을 선택합니다.
   UI 페이지 변형이 열 UI 빌더리며 여기에서 구성요소를 추가하고 구성하여 미리 보기 환경의 모양과 느낌을 사용자 지정할 수 있습니다. 자세한 내용은 UI 빌더에서 구성요소 작업을 참조하세요.
5. 미리 보기 경험 속성을 미리 보기 UI에 바인딩합니다.
   데이터 바인딩은 에 있는 구성 패널의 구성 탭에 있습니다 UI 빌더. 자세한 내용은 UI 빌더의 데이터 자원을 참조하십시오.
6. 이벤트 핸들러를 사용하여 이벤트를 디스패치하고 해당 페이로드로 권장 사항을 실행하거나 건너뛰기 위해 미리 보기 UI의 구성요소에 스크립트를 추가하고 바인딩합니다.

   다음 표는 에이전트가 수행하는 작업과 관련하여 내보내는 이벤트 목록을 보여줍니다.

   표 2. 미리 보기 경험 이벤트

   처리된 이벤트	설명
   ON_SINGLE_CLICK_ACTION_ 개시	에이전트가 작업 버튼을 선택하면 작업을 시작하고 완료합니다. 이 이벤트는 페이로드에서 다음 매개변수를 전달합니다. api.emit( ‘ON_SINGLE_CLICK_ACTION_INITIATE‘, { 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] , table: api.context.props.customExpProps.table, tableSysId: api.context.props.customExpProps.tableSysId, contextSysId: api.context.props.customExpProps.contextSysId, actionType: api.context.props.customExpProps.actionTypeSysId, actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: { <actionInputs key>: <actionInputs value> }, actionId: api.context.props.customExpProps.actionId, name: api.context.props.customExpProps.name, actionMetadata: api.context.props.customExpProps.callToActions[0], actionStateValue: api.context.props.customExpProps.actionStateValue, } ) formFieldInputs에는 actionInputs가 포함되어 있으며 이벤트가 내보낼 때 업데이트해야 합니다.
   ON_DRILL_DOWN_ACTION_INITIATE	에이전트가 기본 작업 버튼을 선택하면 작업을 확장하고 추가 작업 또는 정보를 표시합니다. 이 이벤트는 페이로드에서 다음 매개변수를 전달합니다. api.emit( ‘ON_DRILL_DOWN_ACTION_INITIATE ‘, { table: api.context.props.customExpProps.table, tableSysId: api.context.props.customExpProps.tableSysId, actionType: <sys_id for "Guidance" action type/ e38f55b9b72120107d472397ee11a9be>, actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: {"<actionInputs Key>":"<new value which needs to be set>"}, actionId: api.context.props.customExpProps.actionId, 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], renderer: api.context.props.customExpProps.renderer, contextSysId: api.context.props.customExpProps.contextSysId, sysId: api.context.props.customExpProps.sysId, name: api.context.props.customExpProps.name } )
   DISMISS_ACTION_CLICK	작업을 취소합니다. api.emit( ‘DISMISS_ACTION_CLICK‘, { sysId: api.context.props.customExpProps.sysId } )
   ACTION_TRIGGERED_PROPAGATION	사용자가 지침 작업에 대한 UI별 동작을 추가할 수 있습니다. 이 이벤트는 페이로드 상세 정보를 이 이벤트를 처리할 수 있는 상위 항목으로 전파합니다. api.emit( ‘SN_NEXT_BEST_ACTION_LIST_CONNECTED#ACTION_TRIGGERED_PROPAGATION' ‘, { "actionSysId": api.context.props.customExpProps.actionId "actionName": api.context.props.customExpProps.actionConfigurations[api.context.props.customExpProps.actionId ][“actionName”] "actionType": "guidance", "eventName": "<eventName>", "payload": { } }
   LOG_SEARCH_RESULT_EVENT	검색 결과 로그를 큐에 대기 중인 신호 이벤트 [sys_signal_event_queue] 테이블에 추가합니다. api.emit(LOG_SEARCH_RESULT_EVENT, {actionData: {actionName: actionId}})

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