---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# 캐러셀 배지 항목 수 추가

# 캐러셀 배지 항목 수 추가 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 2분

캐러셀의 항목이 데이터 자원에서 데이터를 가져오는 반복자에 의해 제어되는 동적 캐러셀 항목 수(배지에 표시됨)를 만드는 방법입니다.

## 시작하기 전에

필요한 역할: workspace_admin 또는 ui_builder_admin
이 절차는 구성요소를 사용하여 UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오.

* [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.")
* [UI Builder 간략한 정보: 구성요소 구성 탐색](https://www.servicenow.com/community/next-experience-blog/ui-builder-quick-bits-navigating-component-configuration/ba-p/3181624)
{#add-carousel-badge-item-count__ul_et1_5sg_dhc}  
{#add-carousel-badge-item-count__table_exc_zzf_dhc__entry__2}

| 구성요소 | 문서 링크 |
|-|-|
| 캐러셀 | * [사용 가이드라인](https://horizon.servicenow.com/workspace/components/sn-carousel?release=zurich) * [UIB 설정](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/sn-carousel/uib-setup%23properties) {#add-carousel-badge-item-count__ul_ibs_fl1_n3c} |
[표 1. 이 절차에 사용되는 구성요소]

{#add-carousel-badge-item-count__table_exc_zzf_dhc}

## 프로시저

1. 데이터 자원에서 데이터를 가져오는 반복자를 사용하도록 캐러셀을 설정합니다.
2. 배지 속성을 결정하는 객체를 생성하려면 페이지의 클라이언트 상태 매개변수 대화 상자를 엽니다.  
   1. 이름을<kbd class="ph userinput">badgeConfigState</kbd>로 바꾸고 유형 드롭다운에서 JSON을 선택합니다.  
   2. 초기 값 필드 상자 위에 마우스를 대고 편집을 선택합니다.
   3. 드롭다운에서 JSON 유형 객체 를 선택합니다.
   4. 속성 추가를 선택하고 배지 색상, 레이블 및 변형 속성을 추가합니다.  
   5. 적용을 선택하여 클라이언트 상태 매개변수 편집 대화 상자로 돌아갑니다.  
   6. 대화 상자를 닫습니다.  
      나중에 데이터 자원이 로드된 후 스크립트를 사용하여 이 객체의 속성을 업데이트합니다.
   {#add-carousel-badge-item-count__substeps_rcb_f2n_khc}
3. 배지 구성을 방금 생성한 객체로 설정하려면 콘텐츠 트리에서 캐러셀 구성요소를 선택합니다.
   1. 캐러셀 구성요소의 구성 탭에서 배지 구성 속성 위에 마우스를 대고 데이터 바인딩 또는 스크립트 사용 아이콘을 선택합니다.  
   2. 배지에 데이터 바인딩 구성 대화 상자에서 클라이언트 상태 데이터 유형을 선택합니다.
   3. badgeConfigState(3)를 선택하고 데이터 출력 영역에 추가하려면 위쪽 화살표 아이콘을 선택합니다.  
   4. 적용을 선택합니다.  
      badgeConfigState 매개변수는 캐러셀 배지 구성에 추가해야 합니다.

   {#add-carousel-badge-item-count__substeps_zcx_jkn_khc}  
4. 새 클라이언트 스크립트 편집을 선택하여 클라이언트 스크립트 편집 대화 상자를 엽니다.  
5. 캐러셀의 항목 수에 badgeClientState "label" 매개변수 값을 업데이트하는 클라이언트 스크립트를 만들려면 ` api.setState('badgeConfigState', {... api.state.badgeConfigState, "label": 'count: ${api.data.look_up_multiple_records_1.results.length}'});`  
6. 데이터 자원이 업데이트될 때마다 클라이언트 스크립트가 트리거되도록 데이터 자원에 이벤트를 추가합니다.
   1. 왼쪽 하단에서 데이터 자원을 선택합니다 여러 기록 조회 1이벤트 탭.  
   2. 이벤트 매핑 추가를 선택하고, 데이터 가져오기 성공을 선택하고, 계속을 선택합니다.
   3. 처리기 추가를 선택하고 아래로 스크롤하여 만든 새 클라이언트 스크립트를 선택하고 계속을 선택합니다.  
   4. 트리거 시기를 항상으로 설정해야 합니다.
   5. 계속을 선택합니다.
   6. 추가를 선택하고 편집 대화 상자를 닫습니다.
   {#add-carousel-badge-item-count__substeps_qbk_pgm_mhc}
7. 오른쪽 상단에서 저장미리 보기 드롭다운 화살표 선택URL 경로 열기.  
   ![제목과 카운트를 보여주는 최종 표시: 12]()  
   캐러셀 의 제목 에는 배지 수 와 캐러셀 항목 수가 있어야 합니다.
{#add-carousel-badge-item-count__steps_rym_pvc_1fc}