여러 소스에서 데이터 가져오기

단일 구성요소에서 사용할 여러 소스에서 데이터를 얻는 방법에 대해 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

카드 기본 컨테이너 구성요소를 반복자에 배치하고 다중 테이블 데이터 구성을 사용하여 지난 2년 동안 생성된 모든 활성 인시던트와 문제를 나타냅니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다 >.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 처음부터 페이지를 생성합니다.
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성을 참조하세요.
4. 다중 테이블 데이터 자원을 추가합니다.
   1. 데이터 셸프에서 + 데이터 자원 추가를 선택합니다.
      
   2. 검색에 multi-table을 입력합니다.
   3. 다중 테이블 데이터를 선택합니다.
      
   4. 추가를 선택합니다.
5. 첫 번째 데이터 소스를 구성합니다.
   1. 데이터 원본에서+ 추가를 선택합니다.
      
   2. 테이블에 incident를 입력하고 인시던트 테이블을 선택합니다.
   3. 정렬 필드에 숫자를 입력하고 번호를 선택합니다.
   4. 이름에 Incident를 입력합니다.
   5. 반환 필드에 번호, 상태, 설명 및 활성을 추가합니다.
      
   6. 조건 편집을 선택합니다.
   7. 활성이 true인 조건을 빌드합니다.
   8. and를 선택합니다.
   9. 지난 2년 동안 생성됨 조건을 빌드합니다.
      
   10. 적용을 선택합니다.
   11. 적용을 선택합니다.
6. 두 번째 데이터 소스를 구성합니다.
   1. 데이터 원본에서+ 추가를 선택합니다.
   2. 테이블에 문제를 입력하고 문제 테이블을 선택합니다.
   3. 정렬 필드에 숫자를 입력하고 번호를 선택합니다.
   4. 이름에 Problem을 입력합니다.
   5. 반환 필드에 번호, 상태, 설명 및 활성을 추가합니다.
      다중 테이블 데이터 자원을 만들 때 각 데이터 소스에는 동일한 반환 필드가 지정되어 있고 동일한 순서로 지정되어야 합니다. 이렇게 하면 페이지에 표시되는 데이터가 일관되고 정확한지 확인할 수 있습니다.

      

   6. 조건 편집을 선택합니다.
   7. 활성이 true인 조건을 빌드합니다.
   8. and를 선택합니다.
   9. 지난 2년 동안 생성됨 조건을 빌드합니다.
   10. 적용을 선택합니다.
   11. 적용을 선택합니다.
   12. X를 선택하여 다중 테이블 데이터 편집 팝업을 닫습니다.
7. 저장을 선택합니다.
8. 제목 구성요소를 추가합니다.
   1. 콘텐츠 트리의 본문 아래에서 + 콘텐츠 추가를 선택합니다.
   2. 검색에 제목을 입력합니다.
   3. 제목 구성요소를 선택합니다.
   4. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
   5. 레이블에서 기본 텍스트를 삭제하고 지난 2년 동안 생성된 활성 인시던트 및 문제를 입력합니다.
      
   6. 저장을 선택합니다.
9. 컨테이너를 추가합니다.
   1. 콘텐츠 트리의 제목 1에서 + 콘텐츠 추가를 선택합니다.
   2. 레이아웃 탭의 고급 섹션에서 Flexbox를 선택합니다.
      
   3. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
   4. 크기 조정에 300을 입력하여 너비를 설정합니다.
      
   5. 저장을 선택합니다.
10. 반복자 구성요소를 추가합니다.
    1. 콘텐츠 트리의 컨테이너 1에서 + 콘텐츠 추가를 선택합니다.
    2. 검색에 반복자를 입력합니다.
    3. 반복자 구성요소를 선택합니다.
    4. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
    5. 저장을 선택합니다.
    6. 구성 패널의 구성 탭에서 데이터 배열 필드 위에 마우스를 대고 데이터 바인딩 아이콘을 선택합니다.
       
    7. 데이터 유형에서 데이터 자원을 선택합니다.
    8. 다중 테이블 데이터 선택 1.
    9. 선택 출력 > 데이터 > GlideMultiDatasource_Query > getMultiDatasourceData.
    10. 항목 알약을 두 번 클릭(또는 키보드 단축키 사용)합니다.
        
        상단 섹션이 정확한지 확인합니다.

        

    11. 적용을 선택합니다.
    12. 저장을 선택합니다.
11. 반복자 내에 카드 기본 컨테이너 구성요소를 추가합니다.
    1. 콘텐츠 트리의 반복자 1에서+ 콘텐츠 추가를 선택합니다.
    2. 카드 기본 컨테이너 구성요소를 찾아 선택합니다.
    3. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
    4. 스타일 탭을 선택합니다.
    5. 카드 주위에 약간의 공간을 추가하려면 간격으로 이동하여 여백을 선택한 다음 M (중간)을 선택합니다.
       
    6. 저장을 선택합니다.
12. 카드 기본 컨테이너 내에 제목 구성요소를 추가합니다.
    1. 콘텐츠 트리의 카드 기본 컨테이너 1에서 + 콘텐츠 추가를 선택합니다.
    2. 제목 구성요소를 찾아 선택합니다.
    3. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
    4. 구성 패널의 구성 탭에서 레이블의 기본 텍스트를 삭제합니다.
    5. 레이블 필드를 가리키고 데이터 바인딩 아이콘을 선택합니다.
    6. 데이터 유형에서 반복자를 선택합니다.
    7. 선택 값 > 필드.
    8. 최상위 알약을 선택하고 마지막 열에서 인시던트 또는 문제 번호가 있는 displayValue 를 확인합니다.
    9. 인시던트 또는 문제 번호가 있는 displayValue 알약을 두 번 클릭(또는 키보드 단축키 사용)합니다.
       
       상단 섹션이 정확한지 확인합니다.

       

    10. 적용을 선택합니다.
    11. 구성 탭에서 아래쪽 여백 숨기기 옵션을 선택합니다.
        
    12. 저장을 선택합니다.
13. 첫 번째 스타일화된 텍스트 구성요소를 추가하여 인시던트 또는 문제에 대한 설명을 표시합니다.
    1. 콘텐츠 트리에서 제목 2를 가리키고, 메뉴(세로 점 3개) 아이콘을 선택하고, Add after를 선택합니다.
       
    2. 스타일 텍스트 구성요소를 찾아 선택합니다.
    3. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
    4. 구성 패널의 구성 탭에서 텍스트에서 기본 텍스트를 삭제합니다.
    5. 텍스트 필드를 가리키고 데이터 바인딩 아이콘을 선택합니다.
    6. 데이터 유형에서 반복자를 선택합니다.
    7. 선택 값 > 필드.
    8. 목록에서 세 번째 알약을 선택하고 마지막 열에서 displayValue 에 정보가 포함되어 있지 않은지 확인합니다.
    9. 값이 없는 displayValue 알약을 두 번 클릭(또는 키보드 단축키 사용).
       
       상단 섹션이 정확한지 확인합니다.

       

    10. 적용을 선택합니다.
    11. 텍스트 크기를 줄이려면 구성 탭으로 이동하여 HTML 태그 를 단락으로 변경합니다.
    12. 저장을 선택합니다.
14. 두 번째 스타일화된 텍스트 구성요소를 추가하여 인시던트 또는 문제의 상태를 표시합니다.
    1. 콘텐츠 트리에서 스타일 텍스트 1을 가리키고, 메뉴(세로 점 3개) 아이콘을 선택하고, Add after(뒤에 추가)를 선택합니다.
    2. 스타일 텍스트 구성요소를 찾아 선택합니다.
    3. 구성 패널의 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
    4. 구성 패널의 구성 탭에서 텍스트에서 기본 텍스트를 삭제합니다.
    5. 텍스트 필드를 가리키고 데이터 바인딩 아이콘을 선택합니다.
    6. 데이터 유형에서 반복자를 선택합니다.
    7. 선택 값 > 필드.
    8. 목록에서 두 번째 알약을 선택하고 마지막 열에서 displayValue 에 해결됨 또는 진행 중 등의 상태가 포함되어 있는지 확인합니다.
    9. 상태 값이 있는 displayValue 알약을 두 번 클릭(또는 키보드 단축키 사용)합니다.
       
       상단 섹션이 정확한지 확인합니다.

       

    10. 적용을 선택합니다.
    11. 텍스트 크기를 줄이려면 구성 탭으로 이동하여 HTML 태그 를 단락으로 변경합니다.
    12. 저장을 선택합니다.
15. 미리 보기를 선택합니다.
    페이지 제목은 맨 위에 있습니다. 각 카드에는 인시던트 또는 문제 번호가 있는 제목이 포함되어 있습니다. 카드에는 인시던트나 문제에 대한 설명(사용 가능한 경우)과 상태도 표시됩니다. 두 소스, 즉 인시던트 테이블과 문제 테이블에서 데이터를 성공적으로 끌어오고 있습니다.

    

16. X를 선택하여 미리 보기 오버레이를 닫습니다.