Data LWC Container

The Data LWC Container wraps a custom Lightning Web Component (LWC) and feeds it Salesforce records, pairing Avonni's no-code data handling — querying, filtering, searching, sorting, and pagination — with the unique visual display of an LWC built by a developer. Use it when you need a bespoke UI that standard Avonni components can't produce, without rebuilding the data plumbing.

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.

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, 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 key fields in an attribute named taskKeyFields.
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 Name to taskData.
• You map the Fields you want passed to the LWC.
• You enable and configure the Filter feature to let users filter tasks by status.
• You enable and configure Pagination.

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

Configuration

To configure the Data LWC Container, select it on the canvas. The Edit Data LWC Container panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

The Properties tab: the data source switch, the Content section where you name the LWC, and the beginning of Header. The sections below it are collapsed by default.

Data Source

Before the container can feed your custom LWC, you must tell it where to get the records it should manage. Choose the source that matches your data:

Query

Retrieve records directly from Salesforce. This is the most common option.

Variable

Use a Variable resource (typically a record collection) that already contains the records you want to display. Useful for data that changes based on user interactions or other component logic.

Data Mapping

The Data Mappings section tells the container which fields to retrieve and pass to your custom LWC, and how each record is identified.

• Fields: The SObject field API names to retrieve and hand off to the embedded LWC as record properties. This is required.
• Filters: The object fields to expose as user filters (multi-select).
• Search Fields: The fields the search input will search across. The Show Search toggle (in the Search section) must be enabled for the search bar to appear.
• Key Field: The unique identifier field for each record. Defaults to Id. This is required.
• Sort By: The field used to sort records. Requires: Variable data source.
• No Results Message: A custom message displayed when no records match the current filters or search.

Content

This section connects the container to your custom LWC and controls the loading state.

• LWC Name: The exact API name of the custom Lightning Web Component that will display the data, including its namespace (e.g. c/accountsList, namespace/specialDisplay). You will get this name from the LWC developer. This is required.
• LWC Attributes: Additional key-value attributes to pass to the embedded LWC, beyond the records it receives automatically.
• Hide Loading Spinner: Hides the built-in loading spinner. Combine it with the Is Loading Attribute Name below to render your own loading state inside the LWC.

The following are Advanced Options — they let your developer override the default attribute names Avonni uses to deliver data and state flags into the LWC. Leave them blank to use the defaults shown.

• Records Attribute Name: Name of the LWC attribute that receives the records array. Defaults to records.
• Record Key Fields Attribute Name: Name of the LWC attribute that receives the record key fields array. Defaults to recordKeyFields.
• Error Message Attribute Name: Name of the LWC attribute that receives error messages. If left blank, an error replaces the LWC with an illustration.
• Is Builder Attribute Name: Name of the LWC attribute that receives the isBuilder flag (true while in builder mode). Defaults to isBuilder.
• Is Loading Attribute Name: Name of the LWC attribute that receives the isLoading flag (true while data is loading). Defaults to isLoading.
• Is Preview Attribute Name: Name of the LWC attribute that receives the isPreview flag (true in preview mode). Defaults to isPreview.

Think of the attribute-name settings like addressing a package — you need the correct name provided by the LWC developer so Avonni knows where to deliver the data and flags inside their custom component.

Header

The Header section controls the optional banner shown above your custom LWC.

• Title: The title displayed in the header.
• Caption: A short caption displayed above the title.
• Avatar: Display an avatar in the header. Set an Image, a Fallback Icon Name, or Initials, and adjust the avatar Size and Variant (Circle or Square) under Advanced Options.
• Help Text: Add help text content shown as a hoverable icon in the header.
• Is Joined: Gives the header a square, shadowless bottom border so it sits flush with the component below, appearing as one continuous element.
• Show Number of Items: Displays a counter of the records currently in the container next to the title.
• Actions: Add interactive buttons to the header and trigger behavior from the Interactions tab. Use Visible Actions Buttons to set how many actions show as buttons before the rest overflow into a dropdown menu, and toggle Hide Actions or Disable Actions as needed.

Pagination

The Pagination section splits large datasets into manageable pages.

• Show Pagination: Displays pagination controls at the bottom of the container. When off, records load as needed (infinite scroll) if the container height is fixed.
• Number of Items per Page: How many records to show per page when pagination is on, or how many to load at once when the height is fixed. Must be between 1 and 500; defaults to 100.
• Pagination Buttons: Customize the icons and labels for the pagination buttons (First, Last, Next, Previous) and their Alignment (Left, Right, Center, or Fill). The Last button is available with the Variable data source.

Filter

The Filter section controls how the filter menu is presented to end-users. Filter fields are enabled in the Data Mappings section.

• Type: Where the filters appear — Horizontal (above the data), Popover (behind a clickable icon), or Panel (a side panel).
• Use Record Picklist Values: When filtering a picklist field, derives the filter options from the picklist values present in the records rather than the field's full defined value set.
• Use Cascading Filter Values: As a user applies a filter, the available options in the other filters narrow to reflect only the matching records. When on, Use Record Picklist Values is ignored and options always come from the records.
• Hide Filter By Text: Hides the free-text filter input.

Search

The Search section adds a search bar for the records managed by the container.

• Show Search: Makes the records searchable and reveals the search bar. Pair it with the Search Fields mapping to control which fields are searched.
• Placeholder: The placeholder text shown in the search bar. Defaults to "Search".
• Position: Where the search bar sits — Left (default), Right, Center, Fill, or Panel.

Sort

• Show Sorted By Value: Displays the current sort field label to the user.
• Sorted Direction: Sets the sort order — Ascending (default) or Descending. Available with the Variable data source.

Side Panel

When search or user filters are configured to use a panel, the Side Panel section controls how that panel behaves.

• Position: The side the panel slides out from — Left (default) or Right.
• Closed by Default: Whether the panel starts collapsed when the screen first loads.
• Hide Toggle Button: Hides the button users would otherwise use to open and close the panel.
• Reset Button Label: The label of the button that clears the applied filters.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Interactions

Interactions define what happens when users interact with the Data LWC Container. Configure them from the Interactions tab of the Edit Data LWC Container panel.

Item Click

Fires when a user clicks a record inside the custom LWC. For this to fire, the embedded LWC must dispatch an itemclick custom event with the record Id under event.detail.value. Use this to navigate to a record page, open an edit form, or trigger any flow logic tied to the selected record.

Header Action Click

Fires when a user clicks one of the header action buttons. Use the targetName output to identify which action was clicked and branch your flow logic accordingly.

Styling

The Data LWC Container offers styling options for the container itself — not the custom LWC inside it, whose internal styling the developer handles. Configure them from the Style tab of the Edit Data LWC Container panel.

Margin

Controls the outer spacing around the container.

• Top / Right / Bottom / Left: Adjust the space on each side.

Padding

Controls the inner spacing between the container's border and where the LWC is placed.

• Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Border

Customizes the border surrounding the container.

• Color: Set the border color.
• Size: Adjust the border thickness.
• Style: Choose a border style (e.g. solid, dashed, dotted).
• Radius: Control the roundness of the corners.

Size

Controls the container's dimensions.

• Width / Height: Set the container's size.
• Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
• Overflow: Control how content that exceeds the bounds is handled.

Header

Styles the optional header banner above the LWC.

• Header: Background Color; Padding (Top / Right / Bottom / Left) and Margin Bottom.
• Border: Color / Size / Style / Radius; Bottom Border Color / Size / Style (Is Joined).
• Title: Color; Font Size / Font Style / Font Weight.
• Caption: Color; Font Size / Font Style / Font Weight.
• Avatar: Background Color / Foreground Color; Border Radius.

Pagination Buttons

Customizes the pagination controls (when pagination is enabled).

• Background Color (default / active / hover / disabled): Set the button background colors per state.
• Text/Icon Color (default / active / hover / disabled): Set the button text and icon colors per state.
• Color Border (default / active / hover / disabled): Set the button border colors per state.
• Border Size / Border Style: Adjust the button border thickness and style.
• Active Button Background Color (default / active / hover): Set the active page button background colors.
• Active Button Text/Icon Color (default / active / hover): Set the active page button text and icon colors.
• Active Button Color Border (default / active / hover): Set the active page button border colors.

Footer

Styles the footer area of the container.

• Background Color: Set the footer background color.
• Border Color / Size / Style / Radius: Style the footer border.

Show More Button

Customizes the "Show More" button used when records load on demand.

• Background Color (default / active / hover): Set the button background colors per state.
• Text Color (default / active / hover): Set the button text colors per state.
• Border Color (default / active / hover): Set the button border colors per state.
• Border Size / Border Radius: Adjust the button border thickness and roundness.
• Block Start / Block End / Inline Start / Inline End: Set the spacing around the button.

Output Variables

The Data LWC Container exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Item Click

When a user clicks a record inside the embedded LWC, this variable updates with the clicked record's data.

Output variable	Type	What it returns
Clicked Item sObject	Record (SObject)	The full Salesforce record associated with the item the user clicked. Requires the embedded LWC to dispatch an itemclick event with the record Id under event.detail.value.

Example: When a user clicks a project task card in the embedded LWC, use Clicked Item sObject to open an edit form pre-populated with that task's fields.

Header Actions

Output variable	Type	What it returns
Clicked Header Action Name	Text (String)	The name of the header action button the user clicked. Use it to branch logic when multiple actions are configured.

Others

Output variable	Type	What it returns
Number of Items	Number	The total number of records currently displayed in the container.

Key Considerations

• 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 records and record key fields 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.