# Section

## Overview

The Avonni Section component creates expandable sections to organize content in your Salesforce Dynamic Components. It includes a slot for adding other Avonni components, making it ideal for grouping related elements such as forms, lists, or data displays.

### Key features

* **Expandable Design:** Toggle content visibility for better UX in dense interfaces.
* **Customization:** Variants for styling, avatars for visual cues, and icons for collapsibility.
* **Interactivity:** Support for actions, progress indicators, and tags.
* **Slot Integration:** Embed other components (e.g., Text Areas, Sliders) within the section's content area.

{% hint style="success" %}

## Tip

For creating accordion-like structures with multiple expandable panels, use the dedicated [Avonni Accordion component](https://docs.avonnicomponents.com/dynamic-components/components/accordion)
{% endhint %}

### Use Cases

* Group form fields in expandable panels (e.g., "Contact Details" section).
* Organize dashboard widgets, collapsing less-used ones.
* Display collapsible help content or FAQs.
* Structure reports with tagged, progress-tracked sections.
* Build nested UIs, like a section containing a Data Table for filtered views.

***

## Configuration

Select the Section on the canvas to access properties in the right-hand Properties Panel.

### **Basic Properties**

These handle identification and core labeling.

| Property     | Type            | Description                             | Example                    |
| ------------ | --------------- | --------------------------------------- | -------------------------- |
| **API Name** | Text            | Unique identifier for the instance.     | ContactDetailsSection      |
| **Title**    | Text            | Main heading for the section.           | "Contact Information"      |
| **Caption**  | Text (Optional) | Subtext or description below the title. | "Enter user details here." |

### **Content and Slot**

This is the expandable area where you drag and drop other Avonni components (e.g., inputs, tables). No direct property—configure via canvas placement.

*Best Practice:* Keep slotted content related and concise to maintain performance when expanding/collapsing.

### **Appearance & Variant**

These control the visual style.

| Property    | Type   | Description                                                            | Options/Examples |
| ----------- | ------ | ---------------------------------------------------------------------- | ---------------- |
| **Variant** | Select | Base style: base (default, clean) or shaded (with background shading). | base, shaded.    |

### **Collapsibility**

These manage the expand/collapse behavior.

| Property        | Type    | Description                                                                  |
| --------------- | ------- | ---------------------------------------------------------------------------- |
| **Collapsible** | Boolean | Enables toggling; if off, section is always open.                            |
| **Closed**      | Boolean | Initial state: On = collapsed, Off = expanded (active if Collapsible is on). |

### **Collapsible Icon (Active if Collapsible is On)**

Customize the toggle icon.

| Sub-Property        | Type    | Description                                                          | Options/Examples    |
| ------------------- | ------- | -------------------------------------------------------------------- | ------------------- |
| **Hide**            | Boolean | Hides the icon entirely.                                             | -                   |
| **Open Icon Name**  | Text    | Icon when expanded (e.g., Salesforce Lightning Design System names). | utility:chevronup   |
| **Close Icon Name** | Text    | Icon when collapsed.                                                 | utility:chevrondown |
| **Position**        | Select  | Icon location relative to title.                                     | left, right.        |

*Tip:* Use standard SLDS icons for consistency. (Placeholder for screenshot: Section with custom icon.)

### **Avatar**

Add a visual element before the title.

| Property      | Type                | Description                         | Options/Examples                                  |
| ------------- | ------------------- | ----------------------------------- | ------------------------------------------------- |
| **Variant**   | Select              | Shape: circle (rounded) or square.  | circle, square.                                   |
| **Initials**  | Text (Optional)     | Text overlay (e.g., user initials). | "JD"                                              |
| **Icon Name** | Text (Optional)     | Icon instead of image/initials.     | standard:user                                     |
| **Icon Size** | Select              | Size of icon or avatar.             | x-small, small, medium, large, x-large, xx-large. |
| **Image**     | Text/URL (Optional) | URL or map for an image.            | "<https://example.com/avatar.jpg>"                |

*Note:* Prioritize one: image, icon, or initials.

### **Actions**

Configure buttons on the right side that trigger interactions (set up in the [Interactions Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions)). Examples: "Edit", "Delete".

{% hint style="success" %}

## Best Practise

Limit to 2-3 actions to avoid clutter, or use the visible actions buttons to set the number of actions you want to display and/or prevent clutter; use for section-specific operations.
{% endhint %}

### **Progress and Tags**

These add indicators and metadata.

| Property     | Type      | Description                                                                                                                                                        | Example                                  |
| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- |
| **Progress** | Number    | Value for a progress bar (0-100); displays completion status. Can be set manually or bound to a Number Variable for dynamic updates based on calculations or data. | 75 (or mapped to `{!completionPercent}`) |
| **Tags**     | List/Text | Comma-separated or array of tags for categorization/searchability.                                                                                                 | "Priority", "Review"                     |

{% hint style="success" %}

## Tip

For Progress, binding to a [variable](https://docs.avonnicomponents.com/dynamic-components/component-builder/resources/variable) (created in Resources) enables real-time changes, e.g., updating based on form completion or query results.
{% endhint %}

***

## Example

### Collapsible Contact Form Section

{% stepper %}
{% step %}

#### **Add Section Component**

* **API Name**: ContactFormSection
* **Title**: "Contact Details"
* **Caption**: "Fill in user information"
* **Variant**: shaded
* **Collapsible**: On
* **Closed**: On (starts collapsed)
* **Collapsible Icon**: Open Icon Name = utility:chevronup, Close Icon Name = utility:chevrondown, Position = left
  {% endstep %}

{% step %}

#### **Add Avatar**

* **Variant**: circle
* **Icon Name**: standard:contact
* **Icon Size**: medium
  {% endstep %}

{% step %}

#### **Configure Actions**

First, create a Record Variable in Resources for the desired object (e.g., Contact) to hold form data. Then, in the Interactions Panel, add a "Save" button that triggers a record update action (e.g., Update Record), binding it to the Record Variable.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FsK1ObMV7eCua8oVwCfXV%2F2025-07-14_14-50-30.png?alt=media&#x26;token=03466154-21c5-4be5-954a-448cd7c718e7" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Add Progress and Tags**

Progress = 50, Tags = "Form", "Required"
{% endstep %}

{% step %}

#### **Slot Content**

To populate the section with form fields linked to your Contact record, base it on the Record Variable created earlier (e.g., for the Contact object).

**Steps:**

1. Select the Section component on the canvas.
2. In the Elements Panel (typically left or right side), switch to the [**Fields** tab](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/fields)—this displays available fields from the bound Record Variable.
3. Drag relevant fields (e.g., Name, Email) directly into the section's slot on the canvas.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FEk47oqreRaRQF8uEUmTb%2F2025-07-14_14-53-23.png?alt=media&#x26;token=cb3b1394-a9b8-4055-94d0-721bb3473751" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

**Result:** A shaded, collapsible section with avatar, progress bar, tags, and actions—expands to reveal form fields.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FzEqmiawXY9gyz9j4BWpR%2F2025-07-14_14-45-41.png?alt=media&#x26;token=1e84c90f-635c-42b1-bc50-d596836f462c" alt=""><figcaption></figcaption></figure>

***

## Key Considerations

* **Collapsibility Logic:** Test initial Closed state; bind to variables for dynamic toggling.
* **Slot Performance:** Avoid overloading slots with heavy components to prevent lag on expand.
* **Avatar Prioritization:** Use an image for photos, an icon for generics, and initials for personalization—only one displays.
* **Actions Integration:** Ensure interactions are defined in the panel; test firing on click.
* **Progress Visualization:** Style matches variant; use for task tracking within sections.
* **Accessibility:** Provide alt text for images/icons; ensure keyboard-navigable collapse.

***

## **Troubleshooting Common Issues**

* **Section Won't Collapse:** Verify Collapsible is on; check for conflicting behaviors.
* **Icon Not Showing:** If Hide is on, toggle off; confirm icon names are valid SLDS.
* **Actions Not Triggering:** Double-check Interactions Panel setup and bindings.
* **Progress Not Visible:** Ensure value is 0-100; may require variant adjustment.
* **Tags Overlap:** Limit tag count; style via custom CSS if needed.
* **Slot Content Missing:** Drag components directly into the slot on canvas.

***

## Summary

The Avonni Section component organizes UIs with expandable, customizable panels and slots for nested components. It's perfect for modular, interactive designs in Salesforce. For related components, see Avonni Accordion or Interactions Guide.