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

Table 1. Components used in this procedure

Component	Documentation links
Carousel	Usage Guidelines UIB Setup

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