Add carousel badge item count

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
• UI Builder Quick Bits: Navigating Component Configuration

[Omitted video] Description: Add Carousel badge item count

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 `badgeConfigState`, 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.

1. 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**.

1. Open the Edit client script dialog by selecting Add a new Edit client script.

1. 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}});

1. 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 1 > Events 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.

1. In the upper right corner, select Save > select the Preview dropdown arrow > Open URL path.

The **Title** of your carousel should have a badge **count** followed by the number of carousel items.

Parent Topic:Learn components by example