구성요소에 반복자 추가

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기3분

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

    시작하기 전에

    필요한 역할: ui_builder_admin

    이 태스크 정보

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

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

    프로시저

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

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

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

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

        인시던트 테이블이 선택되고 "열림" 및 "간단한 설명"이 반환 필드를 반환하는 데이터 자원 구성에서는 최대 결과가 5로 설정됩니다.
      5. 모달을 닫습니다.
    5. 기존 컨테이너를 선택하거나 열 레이아웃을 생성합니다.
      자세한 내용은 UI 빌더 페이지에서 구성요소 구성 문서를 참조하십시오.
    6. 페이지에 반복자 구성요소를 추가합니다.
      도구 상자의 반복자 구성요소를 가리키는 화살표.

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

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

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

        @data.look_up_multiple_records_1.results가 추가된 데이터 바인딩 구성
    9. 이전 단계에서 추가한 반복자 아래에서 + 콘텐츠 추가를 선택합니다.
      반복자 구성요소 아래의 컨텐츠 추가 링크를 가리키는 검은색 화살표가 있는 컨텐츠 트리입니다.
    10. 제목 구성요소를 추가합니다.
    11. 구성( Configure ) 탭에서 없음 - 구성 요소를 수동으로 구성(None - Configure the component manually)을 선택합니다.
    12. 반복자에서 중첩한 구성요소를 구성합니다.

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

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

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

        @item.value.number.displayValue가 추가된 데이터 바인딩 구성
    13. 저장을 선택합니다.

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

      제목 구성요소가 5번 표시되며, 각 테이블마다 인시던트 테이블과 다른 표시 값이 있습니다.
    14. 미리 보기 버튼을 선택하여 페이지를 보고 테스트합니다.
      탭이 열리고 반복되는 데이터가 포함된 페이지 미리 보기가 표시됩니다.

      페이지 미리 보기에는 반복된 구성요소의 모든 데이터가 표시됩니다.