구성요소에 반복자 추가

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

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

프로시저

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

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

   1. 여러 기록 조회 데이터 자원을 선택합니다.
   2. 인시던트 테이블을 사용하도록 데이터 자원을 구성합니다.
   3. 최대 결과 필드에 5를 입력합니다.

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

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

   구성 요소 추가에 대한 자세한 내용은 을 참조하십시오 구성요소 추가 및 구성.

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

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

      
9. 이전 단계에서 추가한 반복자 아래에서 구성 요소 추가를 선택합니다.
   

   예를 들어 제목 구성 요소를 추가합니다.

10. 구성 탭에서 없음을 선택하여 제목 구성요소를 수동으로 구성합니다.
11. 반복자에서 중첩한 구성요소를 구성합니다.

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

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

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

       
12. 저장을 선택합니다.

    데이터 세트의 첫 번째 값만 스테이지에 표시됩니다.

    
13. 미리 보기 단추를 선택하여 페이지를 보고 테스트합니다.
    탭이 열리고 반복된 데이터가 있는 페이지 미리 보기가 표시됩니다.