--- sourceDocument: 호주 고객 서비스 관리 sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/customer-service-management Release : - australia ft:locale : - ko-KR ft:publication_title : - 호주 고객 서비스 관리 ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # UI 빌더에서 지침 미리 보기 경험 사용자 지정 # UI 빌더에서 지침 미리 보기 경험 사용자 지정 {#ariaid-title1} * 릴리스 버전: Australia * * 업데이트 날짜 2026년 03월 12일 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 10분 UI 빌더를 사용하여 상황별 측면 패널에 표시되는 권장 작업 카드의 미리 보기를 사용자 지정합니다. 미리 보기 경험에는 힌트, 아이콘, 메시지 및 작업 버튼이 포함됩니다. ## 시작하기 전에 필요한 역할: sn_nb_action.next_best_action_author 및 ui_builder_admin, admin ## 이 태스크 정보 먼저 지침 미리 보기 경험의 UI 페이지 변형을 만들어서 시작합니다. 페이지 템플릿에서 UI 페이지 변형을 만들 때는 사용자 지정할 수 있는 기본 구조부터 시작합니다. 구성요소 속성을 사용하여 권장 카드 미리 보기의 모습을 변경할 수 있습니다. ## 프로시저 1. 다음으로 이동 모두권장 작업작업 유형안내. 2. 지침 목록에서 지침을 선택합니다. 3. 미리 보기 UI 만들기를 선택하여 지침 미리 보기 경험의 UI 페이지 변형을 만듭니다. 이 페이지에는 런타임 중에 다음 표에 나열된 속성이 있는 빈 `customExpProps` 컨테이너가 포함되어 있습니다. 권장 작업 프레임워크는 `customExpProps` 객체를 사용자 지정 경험에 대한 속성으로 전달합니다. {#customize-ra-preview-experience__table_eq3_zhc_xvb__entry__2} | 속성 | 설명 | |-|-| | 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이거나 정의되지 않은 경우 관련성 점수 구성요소가 지침 카드에 숨겨집니다. | [표 1. 미리 보기 경험 속성] {#customize-ra-preview-experience__table_eq3_zhc_xvb} 다음 예에서는 미리 보기 경험에 대한 속성 및 샘플 값을 보여줍니다. "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 빌더에서 구성요소 작업을 참조하세요.](https://www.servicenow.com/docs/access?context=work-components&version=australia&pubname=australia-application-development&ft:locale=en-US) 5. 미리 보기 경험 속성을 미리 보기 UI에 바인딩합니다. 데이터 바인딩은 에 있는 구성 패널의 구성 탭에 있습니다 UI 빌더. 자세한 내용은 [UI 빌더의 데이터 자원을](https://www.servicenow.com/docs/access?context=data-resources&version=australia&pubname=australia-application-development&ft:locale=en-US) 참조하십시오. 6. 이벤트 핸들러를 사용하여 이벤트를 디스패치하고 해당 페이로드로 권장 사항을 실행하거나 건너뛰기 위해 미리 보기 UI의 구성요소에 스크립트를 추가하고 바인딩합니다. 다음 표는 에이전트가 수행하는 작업과 관련하여 내보내는 이벤트 목록을 보여줍니다. {#customize-ra-preview-experience__table_grp_flc_xvb__entry__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: { : }, 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: , actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: {"":""}, 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": "", "payload": { } } | | LOG_SEARCH_RESULT_EVENT | 검색 결과 로그를 큐에 대기 중인 신호 이벤트 \[sys_signal_event_queue\] 테이블에 추가합니다. api.emit(LOG_SEARCH_RESULT_EVENT, {actionData: {actionName: actionId}}) | [표 2. 미리 보기 경험 이벤트] {#customize-ra-preview-experience__table_grp_flc_xvb} 자세한 내용은 [구성요소에 클라이언트 스크립트 정의 및 바인딩](https://www.servicenow.com/docs/access?context=define-client-scripts&version=australia&pubname=australia-application-development&ft:locale=en-US)을 참조하세요.