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

단일 구성 요소에서 사용하기 위해 다양한 소스에서 데이터를 얻는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

프로시저

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

      

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

        

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

       

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

       

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

       

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

    

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