Chip Container
Last updated
Last updated
The Chip Container is also available as an Experience Cloud Component.
The Chip Container is a visual component for organizing and displaying interactive tags or labels called "chips."
Before using the Avonni Chip Container, you must decide where the chip data will come from. This is where the Data Source setting comes in. It determines how the chip content is created and what it displays.
Here's a quick guide to choosing the right data source for your needs:
Manual
Ideal for static or predefined data.
For tables without the need for updates or dynamic changes, like fixed lists.
Variable
Perfect for tables reflecting dynamically changing data or real-time updates.
When table data is linked to variable collections in Salesforce, such as Get Records Collection.
Optimal for managing large data sets with hundreds of thousands of records, and ideal for complex data retrieval from multiple sources or specific criteria.
For tables displaying data from multiple sources or based on complex queries.
The data source you choose directly impacts how your Chip Container functions. A manual source is perfect for simple, static lists, while a variable or query source allows you to create dynamic, interactive displays that respond to changes in your Salesforce data.
When using a dynamic data source for your Avonni Chip Container (like Variable or Query), you'll need to configure the Data Mappings section to tell the component how to create chips from your data.
Think of it like a translator: Data Mappings ensure that the right piece of information from your Salesforce data (like a field value) is displayed as the label on each chip.
Without data mapping, the chip container wouldn't know which part of your data to use for the chip labels. This could result in chips showing incorrect or irrelevant information.
In the Data Mappings section, you'll establish the connection between your Salesforce data fields and the corresponding Chip Container attributes. By selecting which field maps to which attribute (for example, the "Account Name" field to the "Label" attribute), you ensure each chip accurately displays the correct information from your Salesforce data.
Use these properties to tailor the Chip Container Component:
Single Line: Force all chips to appear on one line, creating a compact display.
Sortable Chips: Allow users to rearrange chips using drag-and-drop. Based on the new order, you can even trigger actions.
Is Collapsible: Make the Chip Container expandable and collapsible. This is useful when space is limited, or you want to group multiple Chip Containers.
Is Expandable: Determines whether the Chip Container starts in an expanded (showing all chips) or collapsed (showing only a few) state.
You can add a visual element next to the Chip Container's label to make it stand out. Here's how:
Choose Your Avatar Style:
Circle: A classic, rounded avatar.
Square: A modern, angular avatar.
Add Initials or an Image:
Initials: Display the first letter of the label (e.g., "C" for "Contacts").
Image: Link to a field that contains the URL of the image you want to use (e.g., a profile picture field).
Customize the Look:
Go to the Style panel to adjust the avatar's size, color, and other visual details.
Adding an avatar is a great way to make your Chip Container more engaging and visually appealing.
Add interactions to turn your Chip Container into a dynamic component. When users rearrange the chips (ensure the "Sortable Chips" option is enabled), you can trigger specific actions.
How to Add Interactions
Turn on Sortable Chips: In the Chip Container properties, toggle on "Sortable Chips."
Choose Your Action from the Interactions Panel
Open a flow: Launch a new flow screen or action.
Navigate: Redirect the user to another page within Salesforce or an external website.
...and more!
Example: Sorting a Priority List
Imagine a Chip Container displaying a list of tasks. When users rearrange the chips to indicate a change in priority, you could trigger a flow to update the task records in the background.
The Style Panel gives you full control over your Chip Container's looks and feels.
Here's a breakdown of the styling options:
Margin: Controls the space around the entire Chip Container (top, right, bottom, left).
Padding: Adjusts the space inside the Chip Container, between the border and the chips (top, right, bottom, left).
Spacing: Fine-tune spacing between individual chips (block start, block end, inline start, inline end).
Chip Container: Set the background color, border color, size, style (e.g., solid, dashed), and rounded corners (border-radius) for the entire container.
Chip: Customize the label's font size, weight (e.g., bold), style, and border (size, style, radius). You can also adjust line height for better readability.
Avatar: Control the border (size, color, style), initials font color (normal and on hover), initials font weight (normal and on hover), and background and foreground colors for the icon or image. You can also choose how the image fits within the avatar (image object fit).
Variant Styling Settings: If you're using variant, you can set unique colors for background, border, text, and outlined text for each variant.
