구성요소에 반복자 추가

UI 빌더에서 반복자를 사용하여 데이터 자원의 결과로 하나 이상의 구성요소를 반복합니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

반복자 구성요소는 여러 구성요소 UI 빌더에서 제공하는 데이터를 반복하는 기본 루프 역할을 합니다. 반복자는 배열 또는 객체 배열을 사용합니다. 예를 들어 배열 [{"task": "A"},{"task": "B"}] 는 그 안의 콘텐츠를 두 번 반복합니다. 반복자를 사용하면 값을 데이터 배열 속성에 바인딩 할 수 있습니다. @item.value입니다. {property_name} 이 값을 반복자 내의 구성요소에 바인딩합니다. 작업을 바인딩하려면 @item.value.task로 바인딩하면 반복자가 올바른 값을 표시합니다.

반복자 내부의 구성요소는 구성요소 출력이 동적인지 여부에 관계없이 데이터 소스의 항목 수를 반복합니다. 예를 들어, 세 개의 데이터 요소가 있는 반복자 내에 헤더 구성요소를 배치하고 레이블 필드는 변경하지 않는다고 가정해 보겠습니다. 그러면 동일한 출력 레이블을 가진 헤더의 인스턴스 세 개가 표시됩니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 반복자를 추가할 페이지의 편집기를 엽니다.
   환경에 대한 페이지를 생성하지 않은 경우 페이지를 생성하는 방법에 대한 자세한 내용을 참조하십시오 에서 페이지 생성 UI 빌더 .
4. 데이터 자원을 페이지에 연결합니다.

   예를 들어 여러 기록 조회 데이터 자원을 페이지에 추가합니다. 데이터 자원 연결에 대한 자세한 내용은 을 참조하십시오 페이지에 데이터 자원 추가 및 구성 .

   1. 데이터 리소스 서랍에서 + 데이터 리소스 추가를 선택합니다.
   2. 모달에서 여러 기록 조회 데이터 자원을 검색하고 추가를 선택합니다.
   3. 테이블 필드에 Incident를 입력합니다.
   4. 최대 결과 필드에 5를 입력합니다.

      여러 기록 조회 데이터 자원이 구성되었습니다.

      
   5. 모달을 닫습니다.
5. 기존 컨테이너를 선택하거나 열 레이아웃을 생성합니다.
   자세한 내용은 UI 빌더 페이지에서 구성요소 구성 문서를 참조하십시오.
6. 페이지에 반복자 구성요소를 추가합니다.
   

   구성요소 추가에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.

7. 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
8. 구성 탭에서 반복되는 구성요소에 대한 데이터를 정의하는 배열을 추가합니다.
   1. 데이터 배열을 가리키고 데이터 바인딩 아이콘( )을 선택합니다.
   2. 데이터 유형에서 데이터 자원을 선택합니다.
   3. 다음 열에서 여러 기록 조회 1 알약을 선택합니다.
   4. 알약 뷰에서 결과를 두 번 클릭하거나 끌어서 @data.look_up_multiple_records_1.results 출력을 추가합니다.
   5. 적용을 선택합니다.

      데이터 자원의 결과는 반복자 구성요소에 바인딩됩니다. 반복자 내에서 하나의 구성요소가 각 결과를 나타냅니다.

      
9. 이전 단계에서 추가한 반복자 아래에서 + 콘텐츠 추가를 선택합니다.
   
10. 제목 구성요소를 추가합니다.
11. 구성 탭에서 없음 - 구성요소를 수동으로 구성합니다.
12. 반복자에 중첩한 구성요소를 구성합니다.

    예를 들어 displayValue 를 구성요소에 바인딩합니다. 자세한 내용은 데이터를 구성요소에 연결 문서를 참조하십시오.

    1. 커서를 레이블 필드로 이동하고 데이터 바인딩 아이콘( )을 선택합니다.
    2. 데이터 유형에서 반복자를 선택합니다.
    3. 알약 뷰에서 값 알약을 선택합니다.
    4. 다음 열에서 숫자 알약을 선택합니다.
    5. 다음 열에서 displayValue 를 두 번 클릭하거나 끌어서 @item.value.number.displayValue 출력을 추가합니다.
    6. 적용을 선택합니다.

       displayValue는 제목 구성요소에 바인딩됩니다.

       
13. 저장을 선택합니다.

    데이터 자원에 바인딩한 구성요소가 스테이지에 나타나고 인시던트 테이블에서 반환되는 각 결과에 대해 한 번씩 5회 반복됩니다.

    
14. 미리 보기 버튼을 선택하여 페이지를 보고 테스트합니다.
    탭이 열리고 반복된 데이터가 포함된 페이지 미리 보기가 표시됩니다.