동적 필터링된 카드 표시 생성

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 09월 30일
  • 소요 시간: 11분

    • 기록을 표시하는 대화형 카드 레이아웃을 만들고, 드롭다운을 추가하여 표시되는 카드를 이름별로 필터링하고, 선택 시 다른 UI 빌더 페이지에서 전체 기록이 열리도록 각 카드를 구성합니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    이 태스크 정보

    이 예시에서는 사용자 지정 레이아웃에 기록 정보를 표시할 수 있도록 데이터를 구성요소에 바인딩하는 방법을 보여줍니다. 예를 들어 기록을 기존 목록 뷰가 아닌 선택 가능한 카드로 표시할 수 있습니다. 이 절차의 경우 데이터는 인시던트 테이블에서 가져옵니다.

    그림 1. 최종 레이아웃 미리 보기
    UI 빌더 개별 구성요소에 번호가 매겨진 설명선이 있는 스테이지입니다.
    1. 드롭다운: 호출자 이름으로 표시되는 카드를 필터링합니다.
    2. 카드 기본 컨테이너: 개별 카드 콘텐츠를 보관하고 클릭 상호 작용을 활성화합니다.
    3. 제목: 기록 번호를 표시합니다.
    4. 레이블 값: 정적 레이블("호출자: ")이 있는 호출자 이름을 표시합니다.
    5. 스타일 텍스트: 기록에 대한 짧은 설명을 표시합니다.
    6. 강조 표시된 값: 스크립트를 통해 적용된 색상 스타일링으로 기록 우선순위 수준을 표시합니다.
    이 절차는 구성요소를 사용하여 UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오.
    표 1. 이 절차에 사용되는 구성요소
    구성요소 문서 링크
    카드 기본 컨테이너
    드롭다운
    제목
    강조 표시된 값
    레이블 값
    스타일 텍스트

    프로시저

    1부: 카드 레이아웃 빌드

    데이터 자원에 연결된 반복자를 추가하고 각 기록을 표시하는 카드 컨테이너를 생성합니다.

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
    2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
      경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
    3. 처음부터 페이지를 생성합니다.
      페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성을 참조하세요.
    4. 데이터 자원을 생성하여 인시던트 테이블에서 기록을 끌어옵니다.

      데이터 자원은 테이블과 기록의 데이터를 페이지에 노출합니다. 이 예에서는 구성요소를 사용하여 표시할 수 있도록 인시던트 테이블에서 기록을 끌어오는 데이터 자원을 추가합니다. 자세한 내용은 페이지에 데이터 자원 추가 및 구성 문서를 참조하십시오.

      1. 데이터 및 스크립트 서랍의 데이터 자원 아래에서 + 데이터 자원 추가를 선택합니다.
      2. 여러 기록 조회를 선택한 다음 추가를 선택합니다.
      3. look_up_multiple_records_1 ID를 선택하여 데이터 자원 상세 정보 양식을 엽니다.
      4. 데이터 자원 레이블 필드의 텍스트를 인시던트 조회로 바꿉니다.
        데이터 자원 ID 필드가 자동으로 채워집니다.
      5. 적용을 선택합니다.
      6. 인시던트 조회 편집 대화 상자의 필드에 내용을 입력합니다.
        필드 동작
        테이블 인시던트를 입력한 다음 목록에서 선택합니다.
        반환 필드
        1. + 추가를 선택합니다.
        2. Caller를 입력하고 선택하여 선택됨 열에 추가한 다음 검색 상자의 선택을 취소합니다.
        3. 우선순위 및 짧은 설명에 대해 위의 단계를 반복합니다.
          호출자, 우선순위 및 간단한 설명을 표시하는 필드 모달을 선택합니다.
        4. 적용을 선택합니다.
        최대 결과 25를 입력합니다.

        테이블, 반환 필드 및 최대 결과 필드를 강조 표시하는 설명선이 있는 "인시던트 조회"에 대한 데이터 자원 편집 대화 상자.

      7. 오른쪽 상단의 X 를 선택하여 대화 상자를 닫습니다.
      8. 저장을 선택합니다.
    5. 구성요소를 저장할 단일 열 레이아웃을 추가합니다.
      1. 콘텐츠 트리의 본문에서+ 콘텐츠 추가를 선택합니다.
      2. 단일 열을 선택한 다음, + 추가를 선택합니다.
      3. 콘텐츠 트리에서 열 1 을 선택한 상태에서 구성 패널에서 레이아웃 으로 이동하여 방향을행으로 설정합니다.
        행 방향 > 속성 위에 커서를 놓은 단일 열 레이아웃의 구성 패널입니다.
    6. 데이터 바인딩을 사용하여 페이지에 반복자를 추가하고 구성합니다.

      데이터 바인딩은 데이터 자원에 의해 노출된 데이터를 구성요소와 연결하는 프로세스입니다. 이 예에서는 인시던트 조회 데이터 자원의 결과를 반복자 구성요소의 데이터 배열 속성에 바인딩합니다. 자세한 내용은 데이터 구성요소 연결 문서를 참조하십시오.

      1. 콘텐츠 트리의 열 1에서 + 콘텐츠 추가를 선택합니다.
      2. 반복자를 입력한 다음, 도구 상자에서 선택한 다음 추가를 선택합니다.
      3. 취소를 선택하여 사전 설정 창을 닫습니다.
      4. 반복자 1을 선택한 상태에서 구성 패널에서 데이터 배열 필드 위에 마우스를 대고 데이터 바인딩 아이콘 을 선택합니다.
        데이터 바인딩 아이콘 위에 커서를 놓고 있는 반복자의 구성 패널입니다.
      5. 데이터 배열에 데이터 바인딩 대화 상자의 데이터 형식에서 데이터 자원을 선택합니다.
      6. 인시던트 조회 알약을 선택한 다음, 결과 알약을 두 번 클릭하거나 끌어서 위 영역으로 이동합니다.
        그림 2. 데이터 배열에 데이터 바인딩
        반복자를 구성할 데이터 자원 알약 선택을 보여주는 데이터 바인딩 모달입니다.
      7. 적용을 선택하여 바인딩을 확인합니다.
      8. 구성 패널에서 스타일 탭을 선택하고 스타일 사용을 선택한 다음 필드를 채웁니다.
        필드 값
        유형 그리드
        열 4
        갭 S
      9. 저장을 선택합니다.
    7. 카드 디스플레이를 생성합니다.
      1. 콘텐츠 트리의 반복자 1에서+ 콘텐츠 추가를 선택합니다.
      2. 카드 기본 컨테이너를 입력하고 구성요소를 선택한 다음 + 추가를 선택합니다.
      3. 구성 패널에서 구성 탭을 선택하고 상호작용을클릭으로 설정합니다.
      4. 구성 패널에서 스타일 탭을 선택하고 너비를300px로 설정합니다.
      5. 높이를200px로 설정합니다.
        너비 및 높이 필드를 강조 표시하는 설명선이 있는 카드 기본 컨테이너의 구성 패널입니다.
    2부: 구성요소 추가 및 데이터 바인딩

    각 카드에 구성요소를 추가하고 해당 필드를 바인딩하여 기록 상세 정보를 표시하도록 구성합니다.

    1. 카드 기본 컨테이너에 구성요소를 추가합니다.
      1. 콘텐츠 트리의 카드 기본 컨테이너 1에서 + 콘텐츠 추가를 선택합니다.
      2. 아래 나열된 순서대로 다음 구성요소를 추가하고 구성 패널에서 각각 편집합니다.
        팁:
        모든 구성요소를 카드 기본 컨테이너에 중첩된 상태로 유지하려면 첫 번째 구성요소를 추가한 다음 다음 구성요소에 대해 구성 아이콘 의 뒤에 추가를 사용합니다.

        사전 설정 창이 나타나면 취소를 선택하여 닫습니다.

        1. 제목: 초기 구성 필요 없음
        2. 레이블 값: 구성 탭의 레이블 필드에 Caller를 입력합니다.
        3. 스타일 텍스트: 구성 탭에서 HTML 태그를 단락으로 설정합니다.
        4. 강조 표시된 값: 스타일 탭에서 너비를 100px로 설정합니다.
        UI 빌더 콘텐츠 트리에서 반복자와 중첩된 구성요소를 강조 표시하는 설명선이 있는 편집기입니다.
      3. 저장을 선택합니다.
    2. 인시던트 기록의 데이터를 이전 단계에서 추가한 구성요소에 바인딩합니다.
      구성요소 필드 경로
      제목 레이블 displayValue> 숫자> 값
      레이블 값 값 displayValue> caller_id > 값
      스타일 텍스트 텍스트 displayValue> short_description > 값
      강조 표시된 값 레이블 displayValue> 우선 순위> 값
      1. 콘텐츠 트리에서 테이블에 나열된 구성요소를 선택합니다.
      2. 구성 패널의 구성 탭에서 지정된 필드 위에 마우스를 대고 데이터 바인딩 아이콘을 선택합니다.
      3. 데이터 바인딩 모달에서 다음을 수행합니다.
        • 왼쪽의 데이터 유형에서 반복자를 선택합니다.
        • 오른쪽의 알약 뷰에서 각 알약을 순서대로 선택하여 테이블에 나열된 경로를 따라갑니다(예: 제목의 경우 값, 숫자, displayValue를 차례로 선택).
      4. 최종 알약(displayValue)에 도달하면 두 번 클릭하거나 끌어서 위 영역으로 이동한 다음 적용을 선택합니다.
      5. 테이블의 각 행에 대해 이 프로세스를 반복합니다.
        UI 빌더 각 카드에 데이터 바인딩된 값을 표시하는 편집기입니다.
      6. 저장을 선택합니다.
    3. 스크립트를 사용하여 각 기록의 우선순위 색상을 정의합니다.
      1. 콘텐츠 트리에서 강조 표시된 값 1을 선택합니다.
      2. 구성 패널의 구성 탭에서 색상 위에 마우스를 대고 데이터 바인딩 아이콘을 선택합니다.
      3. 오른쪽 위에 있는 스크립트 사용 아이콘을 선택합니다.
      4. 기존 코드를 다음으로 바꿉니다. 
        function getPriorityColor(record) {
    let priority = record.api.item.value.priority.value;

    switch (priority) {
        case '1':
            return 'critical';
        case '2':
            return 'high';
        case '3':
            return 'moderate';
        case '4':
            return 'low';
        case '5':
            return 'gray';
        default:
            return 'gray';
    }
}
      5. 적용을 선택합니다.

      강조 표시된 값이 기록의 우선순위에 따라 색이 바뀌는지 확인합니다.

      UI 빌더 기록 우선순위에 따라 다른 색상으로 강조 표시된 값을 표시하는 편집기입니다.
    파트 3: 드롭다운으로 필터링 추가

    드롭다운 이벤트를 구성하여 클라이언트 상태 매개변수를 업데이트하고 데이터 자원을 새로 고침하여 카드 표시를 필터링합니다.

    1. 사용자 선택을 추적하는 클라이언트 상태 매개변수를 만듭니다.
      구성요소가 이벤트를 트리거할 때 클라이언트 상태 매개변수를 수정할 수 있습니다. 자세한 내용은 클라이언트 상태 매개변수 문서를 참조하십시오.
      1. 데이터 및 스크립트 서랍에서 클라이언트 상태 매개변수 옆에 있는 + 아이콘을 선택합니다.
      2. 클라이언트 상태 매개변수 편집 대화 상자에서 다음 필드를 입력합니다.
        • 이름: selected_caller
        • 유형: 문자열
        • 초기값: 비었음
      3. 적용을 선택합니다.
    2. 클라이언트 상태 매개변수를 조건부 값으로 사용하도록 데이터 자원을 편집합니다.
      1. 데이터 및 스크립트 서랍에서 인시던트 조회 데이터 자원을 선택합니다.
      2. 조건 편집을 선택합니다.
        조건 편집 버튼 위에 강조 표시된 인시던트 조회 편집 대화 상자.
      3. 조건 대화 상자의 첫 번째 필드에 Caler를 입력하고 목록에서 Caler를 선택합니다.
      4. 두 번째 필드는 그대로 둡니다.
      5. 세 번째 필드 위에 마우스를 대고 데이터 바인딩 아이콘 을 선택합니다.
      6. 데이터 바인딩 모달에서 클라이언트 상태를 선택한 다음 selected_caller 알약을 두 번 클릭하거나 끌어서 위 영역으로 이동합니다.
      7. 적용을 선택하여 바인딩을 확인합니다.
      8. 적용을 선택하여 조건을 저장합니다.
        조건을 표시하는 조건 모달, 호출자는 selected_caller입니다.
      9. 오른쪽 상단의 X 를 선택하여 인시던트 조회 대화 상자를 닫습니다.
    3. 사용자 테이블에서 사용자를 쿼리할 두 번째 데이터 자원을 만듭니다.
      1. 데이터 및 스크립트 서랍에서 +를 선택한 다음 데이터 자원을 선택합니다.
      2. 여러 기록 조회를 선택한 다음 추가를 선택합니다.
      3. look_up_multiple_records_1 ID를 선택하여 데이터 자원 상세 정보 양식을 엽니다.
        레이블 및 ID 필드가 강조 표시된 데이터 자원 편집 대화 상자.
      4. 데이터 자원 레이블 필드의 텍스트를 sys_user_lookup로 바꿉니다.
        데이터 자원 ID 필드가 자동으로 채워집니다.
      5. 적용을 선택합니다.
      6. sys_user_lookup 편집 대화 상자의 필드에 내용을 입력합니다.
        필드 동작
        테이블 사용자(sys_user)를 입력한 다음 목록에서 선택합니다.
        반환 필드
        1. + 추가를 선택합니다.
        2. 이름을 입력한 다음 목록에서 선택하여 선택됨 열에 추가합니다.
        3. 적용을 선택합니다.
        정렬 기준 이름을 입력한 다음 목록에서 선택합니다.
        최대 결과 250을 입력합니다.
      7. 오른쪽 상단의 X 를 선택하여 대화 상자를 닫습니다.
      8. 저장을 선택합니다.
      이 데이터 자원은 사용자 테이블에서 사용자를 찾습니다. 이 데이터를 참조하여 다음 단계에서 드롭다운을 채웁니다.
    4. 드롭다운 구성요소를 추가하고 구성합니다.
      1. 콘텐츠 트리에서 열 레이아웃 1 위에 마우스를 대고 구성 아이콘 을 선택합니다.
      2. 이전에 추가를 선택합니다.
      3. 드롭다운을 검색하고 도구 상자에서 선택한 다음 추가를 선택합니다.
      4. 구성 패널에서 지정된 탭으로 이동하여 다음 필드를 구성합니다.
        탭 작업
        구성 자리 표시자 텍스트 필드에 다음을 입력합니다. 호출자 선택.
        구성 변형 필드에서: 기본을 선택합니다.
        구성 목록 항목 필드에서 다음을 수행합니다.
        1. 필드 위에 마우스를 대고 데이터 바인딩 아이콘을 선택합니다.
        2. 데이터 바인딩 모달에서 스크립트 사용 아이콘 을 선택합니다.
        3. 기존 코드를 다음으로 바꿉니다.
          팁:
          코드 포맷 아이콘을 선택하여 코드를 가독성을 높일 수 있습니다.
          function evaluateProperty({ api, helpers }) {
    const userArray = api.data.sys_user_lookup.results;

    let outputArray = [];

    for (let i = 0; i < userArray.length; i++) {
        const obj = {
            'id': `${userArray[i]._row_data.uniqueValue}`,
            'label': `${userArray[i].name.displayValue}`
        };
        outputArray.push(obj);
    }

    return outputArray;
}
        4. 적용을 선택합니다.
        스타일 너비: 200을 입력합니다.
        스타일 패딩: 패딩을 선택한 다음 목록에서 M 을 선택합니다.
    5. 생성한 클라이언트 상태 매개변수를 수정할 수 있도록 이벤트가 포함된 드롭다운을 구성합니다.
      1. 콘텐츠 트리에서 드롭다운 1 을 선택한 상태에서 구성 패널에서 이벤트 탭을 선택한 다음 이벤트 매핑 추가를 선택합니다.
      2. 선택한 항목 변경됨 이벤트를 선택한 다음 계속을 선택합니다.
      3. 클라이언트 상태 매개 변수 설정 처리기를 선택한 다음, 계속을 선택합니다.
      4. 다음 속성을 설정합니다.
        필드 작업
        클라이언트 상태 매개변수 이름 목록에서 selected_caller 선택합니다.
        이벤트를 트리거한 후 사용할 값
        1. 필드 위에 마우스를 대고 데이터 바인딩 아이콘을 선택합니다.
        2. 알약 뷰에서 값 알약을 두 번 클릭하거나 끌어서 위 영역으로 이동합니다.
        3. 적용을 선택하여 바인딩을 확인합니다.
        4. 추가를 선택합니다.
      5. 구성 패널의 이벤트 탭에서 이전 단계에서 추가한 이벤트 아래에 있는 핸들러 추가 를 선택합니다.
      6. 인시던트 조회(1)를 찾고 새로 고침 핸들러를 선택한 다음 계속을 선택합니다.
        인시던트 조회 - 새로 고침 핸들러가 선택된 이벤트 모달.
      7. 추가를 선택합니다.
      8. 저장을 선택합니다.
      드롭다운을 구성한 후 호출자를 선택하면 selected_caller 클라이언트 상태 매개변수가 업데이트되고 데이터 자원을 새로 고쳐 해당 호출자의 기록이 표시됩니다.
    4부: 기록 탐색 활성화

    카드를 선택하면 반복자 데이터의 sys_id를 사용하여 기록 페이지가 열리도록 각 카드를 구성합니다.

    1. 경험에서 기록을 여는 다른 페이지를 생성합니다.
      1. 왼쪽 상단에서 경험 이름(예: "데모 경험")을 선택하여 경험 뷰로 돌아갑니다.
      2. 페이지 옆에 있는 +를 선택한 다음 새 페이지 만들기를 선택합니다.
      3. 표준 기록 템플릿 위에 마우스를 대고 템플릿 사용을 선택합니다.
      4. 페이지의 이름을 인시던트 기록 페이지로 지정하고 계속을 선택합니다.
      5. 좋아 보기를 선택한 다음 만들기를 선택합니다.
    2. 왼쪽 상단에서 경험 이름을 선택한 다음 경험 뷰에서 페이지를 선택하여 원래 페이지로 돌아갑니다.
    3. 카드를 선택하면 생성한 페이지에 해당 기록이 열리도록 카드에 이벤트를 추가합니다.
      1. 콘텐츠 트리에서 카드 기본 컨테이너 1 을 선택합니다.
      2. 구성 패널에서 이벤트 탭을 선택한 다음 이벤트 매핑 추가를 선택합니다.
      3. 카드 클릭 이벤트를 선택한 다음 계속을 선택합니다.
      4. 페이지 열기 또는 URL 처리기를 선택한 다음, 계속을 선택합니다.
      5. 현재 경험의 페이지를 선택합니다.
      6. 인 시던트 기록 페이지를 선택합니다.
      7. 양식의 필드에 다음 내용을 입력합니다.
        필드 작업
        테이블 인시던트 입력
        sysId
        1. sysId 필드를 가리키고 데이터 바인딩 아이콘을 선택합니다.
        2. 왼쪽에서 데이터 유형을 찾아 반복자를 선택합니다.
        3. 알약 뷰에서 값, _row_data 차례로 uniqueValue를 두 번 클릭합니다.
        4. 적용을 선택합니다.
      8. 선택을 선택합니다.
        페이지 대상 모달을 선택합니다.
      9. 새 탭에서 열기 속성을 활성화하려면 확인란을 선택합니다.
      10. 추가를 선택합니다.
      11. 저장을 선택합니다.
    4. 페이지를 미리 보고 테스트합니다.
      1. 미리 보기를 선택합니다.
      2. 드롭다운에서 "Fred Luddy", "Carol Coughlin" 또는 "Bow Ruggeri"와 같은 사용자를 선택하여 카드를 필터링합니다.
        주:
        일부 사용자는 관련 인시던트 기록이 없으므로 해당 사용자를 선택하면 카드가 표시되지 않습니다.
      3. 새 탭에서 전체 기록을 보려면 카드를 선택합니다.

      특정 사용자에 대해 필터링된 카드 표시를 보여주는 페이지의 UI 빌더 미리 보기입니다.