Last updated
Was this helpful?
The Component Builder is your visual design environment where you bring your custom Dynamic Components to life. It's designed to be intuitive, allowing you to build sophisticated interfaces easily using drag-and-drop.
Let's take a tour of the main areas:
Your Primary Workspace: This is the main stage where you visually assemble your component.
Drag & Drop: You'll drag components from the Component Library (on the left) and drop them onto the canvas.
Arrange & Nest: Position components freely and place them inside layout components (like Cards, Columns, Containers, and Tabbed Containers) to create structured and complex user interfaces.
This panel on the left side contains several crucial tools, usually accessed via icons or tabs:
Component Library:
Component Structure Panel: Provides a hierarchical "tree" view of all components currently on your canvas. This is incredibly helpful for understanding the nesting structure and selecting specific components, especially in complex layouts.
Context-Sensitive Settings: This panel is dynamic. It displays the specific configuration options for the component currently selected on the canvas.
Your Control Center: This is where you fine-tune everything about the selected component: its appearance (labels, colors, sizes), behavior, connection to data (Data Source, mapping), and specific interactions.
Settings (Left - Gear Icon ⚙️): Access crucial settings for the entire Dynamic Component, most importantly setting the Target Object API Name.
Preview (Right): Instantly see a live preview of how your component will look and behave for end-users.
: Your palette of all available Avonni components (Data Table, Button, Chart, Map, etc.). Find what you need here and drag it onto the canvas.
: After you set the (in Settings), this tab populates with fields from that Salesforce object. Drag these fields directly onto components to bind them to data quickly.
: The engine room for your component's data and logic. Here you create and manage:
: To store dynamic values that can change.
: To store fixed values.
: To perform calculations.
/: To define how data is fetched from Salesforce.
: A central place to view and manage all the interactions (like "On Click" or "On Load" actions) you've configured for the components on your canvas.
: Manage reusable custom styles. Create named styles here and apply them to multiple components for a consistent look and feel.
(Left): Step backward or forward through your recent changes.
(Right): Save your progress on the Dynamic Component.
