캐러셀의 항목이 데이터 자원에서 데이터를 가져오는 반복자에 의해 제어되는 동적 캐러셀 항목 수(배지에 표시됨)를 만드는 방법입니다.
시작하기 전에
필요한 역할: workspace_admin 또는 ui_builder_admin
이 절차는 구성요소를 사용하여
UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오.
표 1. 이 절차에 사용되는 구성요소
| 구성요소 |
문서 링크 |
| 캐러셀 |
|
프로시저
-
데이터 자원에서 데이터를 가져오는 반복자를 사용하도록 캐러셀을 설정합니다.
-
배지 속성을 결정하는 객체를 생성하려면 페이지의 클라이언트 상태 매개변수 대화 상자를 엽니다.
-
이름을badgeConfigState로 바꾸고 유형 드롭다운에서 JSON을 선택합니다.
-
초기 값 필드 상자 위에 마우스를 대고 편집을 선택합니다.
-
드롭다운에서 JSON 유형 객체 를 선택합니다.
-
속성 추가를 선택하고 배지 색상, 레이블 및 변형 속성을 추가합니다.
-
적용을 선택하여 클라이언트 상태 매개변수 편집 대화 상자로 돌아갑니다.
-
대화 상자를 닫습니다.
나중에 데이터 자원이 로드된 후 스크립트를 사용하여 이 객체의 속성을 업데이트합니다.
-
배지 구성을 방금 생성한 객체로 설정하려면 콘텐츠 트리에서 캐러셀 구성요소를 선택합니다.
-
캐러셀 구성요소의 구성 탭에서 배지 구성 속성 위에 마우스를 대고 데이터 바인딩 또는 스크립트 사용 아이콘을 선택합니다.
-
배지에 데이터 바인딩 구성 대화 상자에서 클라이언트 상태 데이터 유형을 선택합니다.
-
badgeConfigState(3)를 선택하고 데이터 출력 영역에 추가하려면 위쪽 화살표 아이콘을 선택합니다.
-
적용을 선택합니다.
badgeConfigState 매개변수는 캐러셀 배지 구성에 추가해야 합니다.
-
새 클라이언트 스크립트 편집을 선택하여 클라이언트 스크립트 편집 대화 상자를 엽니다.
-
캐러셀의 항목 수에 badgeClientState "label" 매개변수 값을 업데이트하는 클라이언트 스크립트를 만들려면
api.setState('badgeConfigState', {... api.state.badgeConfigState, "label": 'count: ${api.data.look_up_multiple_records_1.results.length}'});
-
데이터 자원이 업데이트될 때마다 클라이언트 스크립트가 트리거되도록 데이터 자원에 이벤트를 추가합니다.
-
왼쪽 하단에서 데이터 자원을 선택합니다 .
-
이벤트 매핑 추가를 선택하고, 데이터 가져오기 성공을 선택하고, 계속을 선택합니다.
-
처리기 추가를 선택하고 아래로 스크롤하여 만든 새 클라이언트 스크립트를 선택하고 계속을 선택합니다.
-
트리거 시기를 항상으로 설정해야 합니다.
-
계속을 선택합니다.
-
추가를 선택하고 편집 대화 상자를 닫습니다.
-
오른쪽 상단에서 .
캐러셀 의 제목 에는 배지 수 와 캐러셀 항목 수가 있어야 합니다.