> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/data-lwc-container.md). # 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. ### 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:
QueryRetrieve records directly from Salesforce. This is the most common option.
VariableUse 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`. {% hint style="info" %} 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. {% endhint %} ### 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 First and Last buttons are available with the Variable data source. ### Filter The Filter section lets users narrow the records based on the fields you mapped under **Filters**. * **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. * **Is Closed**: 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](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) 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. {% tabs %} {% tab title="Margin" %} Controls the outer spacing around the container. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="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. {% endtab %} {% tab title="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. {% endtab %} {% tab title="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. {% endtab %} {% tab title="Header" %} Styles the optional header banner above the LWC. * **Background Color:** Set the header background color. * **Padding (Top / Right / Bottom / Left) and Margin Bottom:** Adjust spacing around the header content. {% endtab %} {% tab title="Header Border" %} Customizes the header's border. * **Color / Size / Style / Radius:** Style the header border. * **Bottom Border Color / Size / Style (Is Joined):** Style the bottom border used when **Is Joined** is enabled. {% endtab %} {% tab title="Header Title" %} Styles the header title text. * **Color:** Set the title text color. * **Font Size / Font Style / Font Weight:** Control the title typography. {% endtab %} {% tab title="Header Caption" %} Styles the header caption text. * **Color:** Set the caption text color. * **Font Size / Font Style / Font Weight:** Control the caption typography. {% endtab %} {% tab title="Header Avatar" %} Styles the avatar shown in the header. * **Background Color / Foreground Color:** Set the avatar's colors. * **Border Radius:** Control the roundness of the avatar corners. {% endtab %} {% tab title="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. {% endtab %} {% tab title="Footer" %} Styles the footer area of the container. * **Background Color:** Set the footer background color. * **Border Color / Size / Style / Radius:** Style the footer border. {% endtab %} {% tab title="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. {% endtab %} {% endtabs %} ## 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 {% hint style="warning" %} * **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. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/data-lwc-container.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.