LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • 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
        • How to Conditionally Color Data Table Cells
      • 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 Features
      • Copy and Paste
      • Debug Panel
      • Keyboard Shortcut
      • Undo / Redo
  • 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
    • File Upload
    • Flow
    • 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
  • Combobox Tutorial Examples
  • Setting Up Your Container
  • 1. Drag the Container and drag other components inside
  • 2. Customize the Container
  • Why Use the Container Component?
  • Organization and Structure
  • Styling and Layout
  • Flexibility and Reusability
  • Inherited Visibility

Was this helpful?

  1. Components

Container

The Container component is a versatile building block for your Dynamic Components. Think of it as a foundation for organizing and styling other components.

Last updated 2 months ago

Was this helpful?

Combobox Tutorial Examples


Setting Up Your Container

1. Drag the Container and drag other components inside

The Container component has a single slot where you can drag and drop any other Avonni Dynamic Component. This allows you to create complex layouts and group related components together. For example, you could drag multiple components into a Container to create a section with a specific background color or image.

2. Customize the Container

  • Variant: Choose a visual style for the container:

    • Standard: A basic container with no additional styling.

    • Box: Adds a subtle border and padding.

    • Card: Creates a card-like container with a shadow effect.

  • Background Image: Upload an image for the container's background.

  • Overlay Color: Add a semi-transparent overlay color to the background image to enhance readability or create a specific visual effect.

Why Use the Container Component?

The container component is an excellent component block for creating well-structured and visually appealing layouts for Avonni Dynamic Components. It acts as a wrapper for other components, providing several key benefits:

Organization and Structure

  • Grouping: Logically group related components together. This improves the organization of your Dynamic Component and makes it easier to understand and maintain.

  • Visual Hierarchy: Create a clear visual hierarchy by grouping elements within containers. This helps users understand the relationships between different parts of your UI.

Styling and Layout

  • Consistent Styling: Apply styles (colors, borders, padding, etc.) to the Container, which will be applied to all components within the container. This ensures visual consistency and saves you from having to style each component individually.

  • Layout Control: Control the layout of the contained components. You can often set properties on the Container to control alignment, spacing, and other layout aspects.

  • Background and Borders: Easily add background colors or borders around a group of components.

Flexibility and Reusability

  • Easy Movement/Duplication: Move or duplicate an entire group of components simply by dragging or copying the Container. This is much easier than moving each component individually.

  • Component Nesting: You can even nest Containers within other Containers, creating complex and hierarchical layouts.

Inherited Visibility

In essence, the Container component provides a powerful way to group, style, organize, and control the visibility of multiple components, leading to more maintainable and visually appealing Dynamic Components.

Simplified Visibility Control: A crucial feature of the Container is that it of its contained components. If you set the Container's Visible property to false (or bind it to a condition that evaluates to false), all components inside the Container will be hidden, regardless of their individual Visible settings. This simplifies managing the visibility of entire sections of your UI.

controls the visibility
How to place another component inside the container
User Activity Report