---
sourceDocument: Zurich Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/application-development

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add Carousel badge item count

# Add Carousel badge item count {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

How to create a dynamic carousel item count (displayed in the badge) where the items in the carousel are controlled by a repeater pulling its data from a data resource.

## Before you begin

Role required: workspace_admin or ui_builder_admin
This procedure uses UI Builder components to create dynamic, interactive layouts. For more information on how to configure components, see:

* [Add and configure components](https://www.servicenow.com/docs/2TGg~O~VTqAhbPfHyQKG7A#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.")
* [UI Builder Quick Bits: Navigating Component Configuration](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}

| Component | Documentation links |
|-|-|
| Carousel | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/sn-carousel?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/sn-carousel/uib-setup%23properties) {#add-carousel-badge-item-count__ul_qsf_rvg_phc} |
[Table 1. Components used in this procedure]

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

## Procedure

1. Set up Carousel to use a repeater pulling its data from a data resource.
2. To create an object that determines the badge properties, open the page's Client state parameters dialog.  
   1. Replace the Name with <kbd class="ph userinput">badgeConfigState</kbd>, and from the Type dropdown, choose JSON.  
   2. Hover over the Initial value field box and select Edit.
   3. Choose the JSON type object from the dropdown.
   4. Select Add property and add the badge color, label, and variant properties.  
   5. Select Apply to return to the Edit client state parameters dialog.  
   6. Close the dialog.  
      Later, you will use a script to update this object's properties after the data resource loads.
   {#add-carousel-badge-item-count__substeps_rcb_f2n_khc}
3. To set the badge config to the object just created, in the Content tree, select the Carousel component.
   1. On the Config tab for your Carousel component, hover over the Badge configuration property and select the Bind data or use scripts icon.  
   2. In the Bind data to Badge configuration dialog, select the data type Client states.
   3. Select badgeConfigState (3), and to add it to the data output area, select the up arrow icon.  
   4. Select Apply.  
      The badgeConfigState parameter should be added to the Carousel Badge configuration.

   {#add-carousel-badge-item-count__substeps_zcx_jkn_khc}  
4. Open the Edit client script dialog by selecting Add a new Edit client script.  
5. To create a client script that updates the badgeClientState "label" parameter value to the number of items in the Carousel, enter: `` api.setState(`badgeConfigState`,
   {...api.state.badgeConfigState, "label": `count: ${api.data.look_up_multiple_records_1.results.length}`});``  
6. Add an event to the data resource so that your client script triggers whenever the data resource is updated.
   1. In the bottom left, select the data resource Look up multiple records 1Events tab.  
   2. Select Add event mapping, select Data Fetch Succeeded, and select Continue.
   3. Select Add handler, scroll down, and select the new client script you created, and select Continue.  
   4. When to trigger should be set to Always.
   5. Select Continue.
   6. Select Add and close the Edit dialog.
   {#add-carousel-badge-item-count__substeps_qbk_pgm_mhc}
7. In the upper right corner, select Saveselect the Preview dropdown arrowOpen URL path.  
   ![Final display showing the Title followed by count: 12]()  
   The Title of your carousel should have a badge count followed by the number of carousel items.
{#add-carousel-badge-item-count__steps_rym_pvc_1fc}

*[\>]: and then