Chip Container

Overview

The Chip Container component is an essential user interface element for Salesforce Experience Cloud sites, designed to neatly display and manage a collection of interactive tags or labels, often referred to as "chips."

It streamlines the user experience in managing these elements and ensures the layout remains visually attractive and user-friendly, aligning perfectly with the aesthetics of Experience Cloud sites.

Configuring the Chip Container

General Settings

1. Single Line

• Functionality: Determines whether the chips are displayed in a single line or can be wrapped in multiple lines.

• Usage: Useful for maintaining a compact layout or accommodating a more significant number of chips.

2. Is Collapsible

• Functionality: Allows the chip container to be collapsible.

• Usage: Ideal for scenarios where you want to conserve space or manage the visibility of the chips.

3. Is Expanded

• Functionality: Sets the initial state of the chip container to expand.

• Usage: Useful when you want all chips immediately visible to the user upon loading.

Data Source Configuration for Avonni Chip Container

The Avonni Chip Container offers two primary methods for data integration – Manual and Query Data Sources. Each method serves distinct purposes and suits different scenarios, ranging from static data displays to dynamic, real-time data integration from Salesforce records.

Manual Data Source

• Functionality:

  • This setting allows for direct and manual data entry into the Chip Container.

• Usage:

  • This is particularly useful when the chip data is not dynamically sourced from Salesforce records.

  • It is ideal for initial setups, testing environments, or scenarios where static data is preferred.

Query Data Source

• Functionality:

  • The query option enables the Chip Container to pull and display data from Salesforce records automatically.

• Usage:

  • Perfect for instances where chips need to be dynamically populated with up-to-date information from Salesforce.

  • Facilitates real-time data reflection, making it an excellent choice for active, data-driven sites.

Data Mappings for Query Data Source

The data mapping process is vital for the accuracy and relevance of the data displayed in the Chip Container.

• Process:

  • It involves carefully aligning and mapping Salesforce field data to the corresponding attributes in the Chip Container. This step ensures that the data is fetched and presented meaningfully and organized.

• Outcome:

  • Proper data mapping guarantees that the data retrieved from Salesforce is correctly represented in the chips, ensuring meaningful and contextually accurate displays.

Styling Settings

Overview

Customizing the style of the Avonni Chip Container component is crucial in aligning its appearance with the overall aesthetic of your Salesforce Experience Cloud site. The component offers a range of styling options that allow for detailed customization, ensuring both functionality and visual appeal.

Spacing Options

Chip Container Block Start/End, Inline Start/End:

• These settings control the spacing around the chip container in block (vertical) and inline (horizontal) orientations.

• Adjusting these values can help create the desired visual buffer between the chips and other elements, enhancing readability and layout consistency.

Chip Container Styling

• Background, Border Color, Size, Style, and Radius:

  • Customize the background color to complement or contrast with the site's theme.

  • The border customization options (color, size, style, and radius) offer control over the container's outline, allowing it to stand out or blend seamlessly with other page elements.

Individual Chip Styling

• Label Font Size, Weight, Style; Border Size, Style, Radius; Line Height:

  • Fine-tune the typography of the chip labels for clarity and brand alignment.

  • Border and line height adjustments enhance the visual impact of each chip, making them more distinct and more straightforward to interact with.

Avatar Customization within Chips

• Border Size, Color, Style; Initials Font Color/Weight, Icon Background Color, Image Object Fit:

  • Avatars within chips can be stylized to match the site's design, with options to adjust border properties and initials' font characteristics.

  • 'Image Object Fit' settings like 'fill', 'contain', 'cover', etc., are crucial for ensuring that avatar images are displayed correctly without distortion.

Variant Style Settings

• Customizable Based on Selected Variant:

  • The Chip Container component offers variant-based styling, meaning different styles can be applied based on the selected chip variant.

  • This feature allows for greater flexibility and creativity in design, ensuring that each chip variant can have a unique but cohesive look within the container.