Component Builder

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:

a. Canvas (Center)

• 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.

b. Left Panel (Your Toolkit)

This panel on the left side contains several crucial tools, usually accessed via icons or tabs:

• Component Library:

  • Components Tab: Your palette of all available Avonni components (Data Table, Button, Chart, Map, etc.). Find what you need here and drag it onto the canvas.

  • Fields Tab: After you set the Target Page Name (in Settings), this tab populates with fields from that Salesforce object. Drag these fields directly onto components to bind them to data quickly.

• Resources Panel: The engine room for your component's data and logic. Here you create and manage:

  • Variables: To store dynamic values that can change.

  • Constants: To store fixed values.

  • Formulas: To perform calculations.

  • Queries/Nested Queries: To define how data is fetched from Salesforce.

• Interactions Panel: 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.

• Style Panel: Manage reusable custom styles. Create named styles here and apply them to multiple components for a consistent look and feel.

• 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.

c. Properties Panel (Right)

• 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.

d. Top Bar (Essential Commands)

• Undo/Redo (Left): Step backward or forward through your recent changes.

• 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.

• Save (Right): Save your progress on the Dynamic Component.