LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • AppExchange Listing Page
    • Installation & Licenses Management
  • Tutorials
    • Projects
    • Components
      • Calendar
        • How to Create Events Quickly by Dragging
        • How to Add an Edit Action to Calendar Events
        • How to Add a New Event Button to the Calendar Header
        • How to Customize the Right-Click Menu
        • How to Reschedule Events with Drag and Drop
      • Columns
        • Creating a Responsive 3-Column Layout
      • Data Table
        • How to customize Data Table style
        • How to make a field editable
        • How to add clickable buttons
        • How to color-code badges
        • How to export data
        • How to configure search
        • How to set columns visibility
      • Kanban
        • Saving Changes on Drag-and-Drop
      • List
      • Metric
      • Record Detail
        • Saving Changes
    • Interactions
      • How to create an interaction to navigate to an object page
      • How to create an interaction to navigate to a record page
      • How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow
    • Reactive Components
      • Reactive Map and Data Table
      • Master-Detail Relationship with Data Tables
      • Vertical Tabs with Reactive Data Table
    • Style
      • How do you add space or a break between sections or fields?
    • Tips and Tricks
      • Using the Dynamic Component component
  • Component Builder
    • Overview
    • Configuring Components
      • Properties
      • Fields
      • Style
    • Data & Interactions
      • Data Sources
        • Manual
        • Picklist
      • Resources
        • Constant
        • Formula
        • Nested Queries
        • Query
        • Variable
      • Interactions
        • CRUD from Record Variable
        • Download
        • Execute Flow
        • Navigate
        • On Load
        • Open Alert Modal
        • Open Confirm
        • Open Dynamic Component Dialog
        • Open Dynamic Component Panel
        • Open Flow Panel
        • Open Flow Dialog
        • Show Toast
    • Advanced Topics
      • Undo / Redo
      • Copy and Paste
      • Keyboard Shortcut
  • Components
    • Explore All Components
    • Accordion
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Badge
    • Barcode
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Button Stateful
    • Calendar
    • Camera 🆕
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Button
    • Chip Container
    • Color Picker
    • Columns
    • Combobox
    • Container
    • Counter
    • Data LWC Container
    • Data Table
    • Date Picker
    • Date
    • Date Range
    • Dual Listbox
    • Dynamic Component
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Icon
    • Icon Picker
    • Illustration
    • Image
    • Input Color
    • Input Date
    • Input Pen (Signature)
    • Input Text
    • Kanban
    • List
    • LWC Container
    • Map
    • Media Object
    • Metric
    • PDF Viewer
    • Pivot Table
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Rating
    • Record Detail
    • Relationship Graph
    • Scope Notification
    • Section
    • Separator
    • Slider
    • Status
    • Tabbed Container
    • Tabs
    • Text
    • Text Area
    • Timeline
    • Toggle
    • Tree
    • Vertical Visual Picker
    • Video Player
    • Visual Picker
    • Visual Picker Link
  • Help
    • Contact Support
    • Security
    • Performance Guide
    • Deployment Process
    • Release Notes
    • Report Bugs
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Location and Behavior
  • What You Can Do with the Properties Panel
  • How to Use the Properties Panel
  • Common Property Types
  • Finding Help
  • In Summary

Was this helpful?

  1. Component Builder
  2. Configuring Components

Properties

Last updated 2 months ago

Was this helpful?

The Properties Panel is your central hub for configuring and customizing individual Avonni components within the Dynamic Component Builder. It's where you control a component's appearance, behavior, data connections, and interactions.

Location and Behavior

  • Location: The Properties Panel is located on the right-hand side of the Component Builder interface when an Avonni Component is selected.

  • Context-Sensitive: The Properties Panel is dynamic. It changes to display the settings for the currently selected component on the canvas. If you don't have a component selected, the Properties Panel might be blank or show general Dynamic Component settings.


What You Can Do with the Properties Panel

The Properties Panel lets you:

  • Configure Behavior: Define how the component functions, such as setting data limits, enabling sorting/filtering, or controlling visibility.

  • Connect to Data: Specify the component's Data Source (e.g., Avonni Query, Manual Data, Picklist) and map data fields to the component's display elements.

  • Set Component-Specific Options: Each Avonni component has its unique properties. The Properties Panel displays only the relevant options for the selected component.


How to Use the Properties Panel

  1. Select a Component: In the Component Builder canvas, click on the component you want to configure. The Properties Panel will update to show that component's settings.

  2. Find the Property: Browse or search within the Properties Panel to find the specific property you want to modify (e.g., "Label," "Value," "Data Source," "Visible"). Properties are often grouped into logical sections (e.g., "Display," "Data," "Interactions").

  3. Modify the Property: Change the property's value using the provided input field, dropdown, selection list, or other control.

  4. Preview (Optional): Click the "Preview" button to see the effect of your changes.

  5. Save: Remember to save your Dynamic Component to persist your changes.


Common Property Types

While specific properties vary by component, here are some common types of properties you'll encounter:

  • Text Fields: For entering text (e.g., labels, messages, URLs).

  • Dropdown Lists/Picklists: For selecting from a predefined list of options.

  • Checkboxes: For boolean (true/false) settings.

  • Number Fields: For entering numeric values.

  • Color Pickers: For selecting colors.

  • Data Source Selectors: For choosing a Data Source (e.g., Query, Picklist, Manual).

  • Resource Selectors: For linking to Variables, Constants, or Formulas.

  • Textarea: For adding multiple lines of text.


Finding Help

  • Tooltips: Hover your mouse cursor over a property in the Properties Panel. A tooltip might appear, providing a brief description of the property.


In Summary

The Properties Panel is where all specific component settings are. All components settings will be available from there.

Component-Specific Documentation: Each Avonni component has a documentation page that describes its specific properties in detail. Refer to for the most accurate and complete information.

the component's documentation
Location of the Properties Panel