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

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기5분

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

    시작하기 전에

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

    이 태스크 정보

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

    프로시저

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

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

      {
  "guidanceInputs": {    
    "task": {
      "name": "task",
      "value": "a473d057cc3f1110f877c24a7dd07ec6"
    },
    "knowledge": {
      "name": "knowledge",
      "value": "e97ee81eff6002009b20ffffffffffe0"
    },
    "guidance_input_form_fields": {
      "additional_comments": {
        "label": "Additional Comments",
        "maxLength": "255",
        "hint": "This item may help you!",
        "name": "additional_comments",
        "recordValue": {
          "displayValue": "test",
          "value": "test"
        },
        "dictionary": {
          "type": "string",
          "dependentField": null,
          "dependentTable": null,
          "name": "additional_comments",
          "label": "Additional Comments",
          "canWrite": true,
          "canRead": true,
          "internalType": "string",
          "isMandatory": false,
          "isReadonly": false,
          "attributes": {
            "name": "edge_encryption_enabled",
            "value": true
          }
        }
      }
    }
  },
  "guidanceOutputs": {
    "attached_article": "kb_knowledge",
    "meta": [
      {
        "varName": "attached_article",
        "varType": "reference",
        "varTableName": "kb_knowledge",
        "varlabel": "Attached Article",
        "varDefaultValue": "",
        "varOrder": "100",
        "varActive": "true",
        "varDisplayValue": ""
      }
    ]
  },
  "status": "completed",
  "guidanceMessage": "You can attach this article to the case.",
  "guidanceActions": [
    {
      "label": "Dismiss",
      "actionId": "skip",
      "variant": "secondary"
    },
    {
      "label": "Attach Article",
      "action_sys_id": "f18738c8a4f70110f87726cbf49777ae",
      "variant": "primary",
      "isExecuted": true,
      "completionMessage": "KB Article was shared",
      "action_behaviour": "contextual_side_panel",
      "primary": true
    }
  ],
  "errorMessage": "This action couldn’t be completed."
}
    4. UI Builder에서 상세 정보 편집을 클릭합니다.
      UI 빌더에서 UI 페이지 변형이 열리며, 여기에서 구성요소를 추가하고 구성하여 상세 정보 경험의 모습과 느낌을 사용자 지정할 수 있습니다. 자세한 내용은 UI Builder에서 구성요소 작업을 참조하십시오.
    5. 미리 보기 경험 속성을 사용자 지정 상세 정보 UI에 바인딩합니다.
      데이터 바인딩은 UI 빌더에 있는 구성 패널의 구성 탭에 있습니다. 자세한 내용은 UI Builder의 데이터 자원을 참조하십시오.
    6. 이벤트 핸들러를 사용하여 이벤트를 디스패치함으로써 해당 페이로드로 권장 사항을 실행하거나, 건너뛰거나, 완료했다고 표시하기 위해 사용자 지정 상세 정보 UI의 구성요소에 스크립트를 추가하고 바인딩합니다.
      표 2. 상세 정보 경험 이벤트
      처리된 이벤트 설명
      GUIDANCE_ACTION_CLICKED 클릭한 작업입니다. 이 이벤트는 클릭한 작업을 페이로드에 전달합니다.
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions[1] 
    } 
);
      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’
);

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