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.