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 inside, making it ideal for grouping related elements like forms, lists, or data displays.
Key features
Expandable Design: Toggle visibility of content 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.
Tip
For creating accordion-like structures with multiple expandable panels, use the dedicated Avonni Accordion component
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.
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.
Variant
Select
Base style: base (default, clean) or shaded (with background shading).
base, shaded.
Collapsibility
These manage the expand/collapse behavior.
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.
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.
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.
Note: Prioritize one: image, icon, or initials.
Actions
Configure buttons on the right side that trigger interactions (set up in the Interactions Panel). Examples: "Edit", "Delete".
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.
Progress and Tags
These add indicators and metadata.
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"
Tip
For Progress, binding to a variable (created in Resources) enables real-time changes, e.g., updating based on form completion or query results.
Example
Collapsible Contact Form Section
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:
Select the Section component on the canvas.
In the Elements Panel (typically left or right side), switch to the Fields tab—this displays available fields from the bound Record Variable.
Drag relevant fields (e.g., Name, Email) directly into the section's slot on the canvas.
Result: A shaded, collapsible section with avatar, progress bar, tags, and actions—expands to reveal form fields.
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.
Last updated
Was this helpful?