LWC Container

Overview

The LWC Container component allows you to seamlessly integrate custom Lightning Web Components (LWCs), built by developers, directly onto your Avonni Dynamic Component canvas. This powerful feature enables you to combine the flexibility of no-code page design with the specialized functionality of custom-coded LWCs.

Think of the LWC Container as a bridge that lets your visually built Dynamic Component host and interact with LWCs developed using code.

Its primary purpose is to:

• Pass Data to LWCs: Dynamically send data from your Dynamic Component's resources (Variables, Constants, Formulas, or attributes of other Avonni components) into the public @api properties of your custom LWC.

• Leverage Custom Functionality: Incorporate unique UI elements, complex business logic, or integrations built within an LWC into your otherwise no-code design.

Key Distinction

Unlike the Data LWC Container component, this LWC Container does not have its own built-in Avonni Query Data Source, filtering, search, or pagination features. It's a pure container for an LWC, and any data handling for the LWC is either self-contained within that LWC or provided to it via input properties from the Dynamic Component.

Why Use the LWC Container?

The LWC Container integrates custom Lightning Web Components into your Avonni Dynamic Component layouts. You can reuse existing LWCs or build new ones for specialized UI or logic, then place them within a visually designed page. It allows you to combine the speed of no-code for overall structure with the power of pro-code for specific complex parts, all while being able to dynamically pass data from Dynamic Component resources into your LWCs.

Adding the LWC Container Component

Drag and Drop: From the Component Library (left panel), find the "LWC Container" component and drag it onto your canvas.

Configuration

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

Basic Properties

• API Name: (Text) A unique identifier for this LWC Container instance (e.g., MyCustomLwcHolder).

• Title: (Text, Optional) A title that can be displayed for the container with a visible frame or header.

Selecting the LWC

• Enter the exact API name of the custom Lightning Web Component (typically built by your developer) you want to embed. This name should follow the format namespace/componentName (e.g., c/myCustomCardList if in the default 'c' namespace, or yourNamespace/specialDisplay if part of a specific namespace).

Passing Data to the LWC (Attributes)

This is where you map data from your Dynamic Component to the public @api properties defined within your custom LWC. For each piece of data you want to pass:

1. Click "Add Input Property" (or similar).

2. LWC Property API Name: (Text) Enter the exact API name of the public @api property as defined in your custom LWC's JavaScript file by your developer (e.g., recordId, configOptions, displayTitle).

3. Value: (Resource Selector) Click the resource selector icon ({ }) to choose the value from your Dynamic Component that you want to pass to this LWC property. This can be:

   • A Variable resource.

   • A Constant resource.

   • A Formula resource.

   • An attribute from another component on the canvas (e.g., @MyDataTable.firstSelectedRow.Id).

   • A Global Variable (e.g., $Component.recordId).

4. Data Type: (Select) Choose the data type of the value being passed (Text, Number, Boolean, etc.) to ensure compatibility with the LWC's property.

(Collaboration Note: You'll need to coordinate with the LWC developer to know the exact @api property names and their expected data types in the custom LWC.)

Handling Builder and Preview Modes (Using isBuilder and isPreview Attributes)

The LWC Container automatically passes two boolean attributes to your embedded LWC, which you can declare as @api properties:

• isBuilder (Boolean): This attribute is true when your LWC is displayed within the Avonni Dynamic Component Builder. In this mode, your LWC is not fully interactive. Developers can use this flag to:

  • Display a simplified placeholder or design-time representation instead of rendering full, complex content.

  • Prevent unnecessary data fetching, API requests, or complex calculations not needed during design.

• isPreview (Boolean): This attribute is true when your LWC is displayed in the Avonni Dynamic Component's Preview mode (before the Dynamic Component is published or used live on a Salesforce page). Developers can use this flag to:

  • Show a simplified or sample data version of the component.

  • Avoid making unintended live API calls or database queries during preview.

Styling & Visibility (for the Container)

These settings apply to the LWC Container itself, not the internal styling of the LWC it holds (which is controlled by the LWC's own CSS).

• Margin, Padding: Standard Avonni styling options control the spacing and dimensions of the container frame.

• Set Component Visibility: Controls whether the entire LWC Container (and thus the embedded LWC) is visible. Bind to a Boolean resource for dynamic visibility.

Example Use Case

Scenario: A developer has built a highly specialized LWC (c/interactiveTimelineViewer) that displays a custom timeline based on a recordId and some JSON configuration string. You want to use this LWC on an Account record page within a Dynamic Component.

1. In your Dynamic Component (Target Object: Account):
2. Add LWC Container: Drag the LWC Container onto the canvas.

3. Configure LWC Container:

   • API Name: timelineLwcContainer

   • LWC Name: c/interactiveTimelineViewer

   • Input Properties:

     • Add Property 1:

       • LWC Property API Name: recordId

       • Value: (Using resource selector) $Component.recordId

     • Add Property 2:

       • LWC Property API Name: configOptions

       • Value: (Using resource selector) Select a Text Variable or Constant resource named timelineConfigJson that holds your JSON configuration string.

4. Result: The c/interactiveTimelineViewer LWC will load within your Dynamic Component, receiving the current Account's ID and the specified configuration, and render its custom timeline.

Important Considerations

• Developer Dependency: This component relies on having a custom LWC already developed or developed by someone with LWC coding skills.

• Data Flow: Primarily designed to pass data into the LWC. If the LWC needs to communicate data back out to the Dynamic Component for other Avonni components to react to, the LWC developer would need to dispatch standard JavaScript CustomEvents, and you would need to configure appropriate event listeners or interactions if the LWC Container or parent Dynamic Component supports this (this capability may vary).

• LWC Performance: The performance of the embedded LWC is the responsibility of the LWC developer.

• Styling Scope: The LWC Container styles its frame. That LWC's own CSS controls the internal appearance of the embedded LWC.

In Summary

The LWC Container component is key to seamlessly integrating custom-coded Lightning Web Components into your no-code Avonni Dynamic Component layouts. It empowers you to leverage specialized LWC functionality while maintaining a visual and declarative approach for overall page design and data flow from the Dynamic Component.