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
  • Overview
  • Why Use It? (The Benefits)
  • Adding the Data LWC Container
  • Configuring the Data LWC Container
  • Data Source
  • LWC Connection
  • Standard Features
  • Styling
  • Visibility
  • Example Use Case
  • Important Considerations
  • In Summary

Was this helpful?

  1. Components

Data LWC Container

The Data LWC Container component acts as a powerful bridge. It combines Avonni's easy-to-use data-handling features (like querying, filtering, searching, and pagination) with the unique visual display capabilities of a custom Lightning Web Component (LWC) built by a developer.

Overview

Think of the Data LWC Container like a "smart frame" for a custom picture. Avonni provides the innovative frame:

  • It fetches your Salesforce data using a familiar Query or Variable Data Source.

  • It provides built-in Filtering, Searching, and Pagination controls for that data.

The custom LWC (built by a developer) acts as the "picture" inside the frame:

  • It receives the data managed by the Avonni container.

  • It displays data in a custom visual format that might not be achievable with standard Avonni components.

Why Use It? (The Benefits)

  • Leverage Custom UI: Use unique, highly specialized UI components built by developers without needing that developer also to build complex data fetching, filtering, searching, and pagination logic. Avonni handles the data-heavy lifting.

  • Best of Both Worlds: Combine Avonni's no-code data configuration with ease of use and the limitless visual possibilities of custom LWCs.

  • Consistent Data Features: Apply standard Avonni filtering, search, and pagination controls to any custom LWC designed to work with this container.

  • Flexibility: Incorporate custom LWC solutions for niche UI requirements while using the Avonni builder for the overall structure and data management.

Adding the Data LWC Container

Drag and Drop: Find the "Data LWC Container" component from the Component Library and drag it onto your canvas.

Configuring the Data LWC Container

Select the Data LWC Container component on the canvas to access its properties in the Properties Panel.

Data Source

This tells the container what data to fetch and manage.

  • Data Source: Choose how to provide the data:

    • Query: Use an Avonni Query Data Source to retrieve records directly from Salesforce. This is the most common option.

    • Variable: Use a Variable resource (typically a collection variable) that already contains the list of records you want to display.

LWC Connection

This tells the container which custom LWC to use for display and how to send the data.

  • LWC Name: (Text) The exact API name of the custom Lightning Web Component (built by your developer) that will display the data (e.g., c/myCustomCardList, namespace/specialDisplay). You will get this name from the LWC developer.

  • Record IDs Attribute: (Text) The name of the specific variable inside the custom LWC where Avonni should send the list of Salesforce Record IDs. Your LWC developer will provide the exact name of this attribute.

  • Records Attribute: (Text) The name of the specific variable inside the custom LWC where Avonni should send the actual record data (the list of records retrieved). Your LWC developer will provide the exact name of this attribute.

  • Errors Attribute: (Text) The name of the specific variable inside the custom LWC where Avonni should send any error information if the query fails. Your LWC developer will provide the exact name of this attribute.

(Think of these attribute settings like addressing a package – you need the correct name provided by the LWC developer so Avonni knows where to deliver the data inside their custom component.)

Standard Features

The container provides these familiar Avonni features and work with the data before it's sent to the custom LWC. You can enable and configure them just like you would on a standard Avonni Data Table:

  • Header: Customize the container's header with a title, caption, icon, and header action buttons.

  • Pagination: Enable pagination to handle large datasets, controlling items per page and navigation controls.

  • Filter: Configure built-in filtering options (horizontal, popover, side panel) based on fields in your data source.

  • Search: Enable a search bar to allow users to search the data managed by the container.

  • Side panel: Configure side panel.

Styling

These settings control the appearance of the container itself, not the custom LWC inside it (the developer handles the LWC's internal styling).

  • Margin: Space outside the container.

  • Padding: Space inside the container, around where the LWC will be placed.

  • Border: Style the container's border.

  • Size: Control the container's dimensions.

  • Header Styles: Customize the appearance of the container's header elements (Title, Caption, Icon).

  • Pagination Buttons: Customize the pagination buttons.

Visibility

  • Visible: (Boolean) Controls whether the entire Data LWC Container component is visible.

Example Use Case

Imagine your company has a unique way they want to visualize project tasks – not as a standard table or list, but as custom interactive cards with specific progress indicators.

  1. Developer Creates LWC: A developer builds a custom LWC called c__projectTaskCardDisplay, which is designed to receive a list of task records and display them as these special cards. The developer tells you the LWC expects the records in an attribute named taskData and the record IDs in an attribute named taskIds.

  2. Admin Configures Data LWC Container:

  • You add the Data LWC Container to your Dynamic Component.

  • You set the Data Source to a Query retrieving Project_Task__c records.

  • You set LWC Name to c/projectTaskCardDisplay.

  • You set Records Attribute to taskData.

  • You set Record IDs Attribute to taskIds.

  • You enable and configure the Filter feature within the Data LWC Container to allow users to filter tasks by status.

  • You enable and configure Pagination.

Result: Users see the custom task cards created by the developer, but they can manage the data shown within them using the familiar Avonni filter and pagination controls provided by the container.

Important Considerations

Important Consideration

  • Requires a Custom LWC: This component requires a separate custom Lightning Web Component to be built by a developer. The developer must design their LWC to accept the data (specifically the records and recordIds lists) via the attribute names you configure.

  • Scrolling: Do not implement custom scroll handling within the LWC you place inside the container. The Data LWC Container manages infinite scrolling/loading internally. Custom scrolling in your LWC will interfere with this.

  • isBuilder and isPreview Attributes: Your LWC developer can use these attributes (which Avonni automatically passes to the LWC) to display placeholders or prevent data loading when the component is viewed inside the Component Builder or in Preview mode, optimizing performance during design time.

In Summary

The Data LWC Container is a bridge component that combines Avonni's no-code data querying, filtering, search, and pagination features with the unique visual presentation capabilities of a custom Lightning Web Component built by a developer.

Last updated 2 months ago

Was this helpful?