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

단일 구성요소에서 사용할 다양한 소스에서 데이터를 가져오는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

프로시저

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

      

   6. 조건 편집을 선택합니다.
   7. Active is true 조건을 빌드합니다.
   8. 및을 선택합니다.
   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를 가리키고 메뉴(세 개의 세로 점) 아이콘을 선택한 다음 뒤에 추가를 선택합니다.
       
    2. 스타일을 입힌 텍스트 구성요소를 찾아 선택합니다.
    3. 구성 패널의 구성 탭에서 없음 - 구성 요소를 수동으로 구성을 선택합니다.
    4. 구성 패널의 구성 탭에서 텍스트의 기본 텍스트를 삭제합니다.
    5. 텍스트 필드를 가리키고 데이터 바인딩 아이콘을 선택합니다.
    6. 데이터 유형에서 반복자를 선택합니다.
    7. 선택 값 > 필드.
    8. 목록에서 세 번째 알약을 선택하고 마지막 열에서 displayValue 에 정보가 포함되어 있지 않은지 확인합니다.
    9. 값이 없는 displayValue 알약을 두 번 클릭(또는 키보드 단축키 사용)합니다.
       
       상단 섹션이 정확한지 확인합니다.

       

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

       

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

    

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