LWC Container

Overview

The LWC Container component allows you to 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.

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.

Choosing the Right LWC Container: Avonni Data LWC Container vs. LWC Container

Unlike the Data LWC Container component, this LWC Container does not have built-in data querying, filtering, searching, or pagination features. It's simply a container for your LWC, with any data handling being managed either within the LWC itself or passed to it through input properties from the Dynamic Component.

If you want to use Avonni's data query and search features within your LWC, consider using the Avonni Data LWC Container component instead.

Adding the LWC Container Component

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).

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)

Custom LWCs often expect data to work correctly, like an @api recordId or @api config. The LWC Container lets you send values from your Dynamic Component directly into those @api properties, making the LWC dynamic and context-aware.

Think of the @api properties in your LWC as input sockets, and the values from your Dynamic Component as power sources or data cables that plug in.

How to Pass Data

You define which data goes into which input of your LWC using the Attributes section in the Properties Panel.

Step-by-Step Example

Let’s say your developer gave you an LWC that expects

@api recordId;
@api configOptions;

Here’s how to feed it the right data:

Click "Add Input Property" in the LWC Container’s settings.
For each property:
- LWC Property API Name: Enter the name of the @api input (e.g., recordId).
- Value: Choose the data to send from your Dynamic Component. You can pick:
  - A Variable (e.g., selectedAccountId)
  - A Constant (e.g., "standard-view")
  - A Formula
  - A Component attribute (e.g., @MyDataTable.firstSelectedRow.Id)
  - A Global variable (like $Component.recordId)

Real-Life Use Case

Scenario: You’re designing a page for Account records, and you want to show a custom timeline LWC that needs the current recordId and some settings.

Here’s what you do:

Name

Value

What It Does

recordId

$Component.recordId

Sends the current record’s ID into the LWC

configOptions

{timelineConfigJson} (Variable)

Sends a custom JSON string stored in a Text Variable

Now, when the page loads, the LWC receives:

the correct Account ID, and
a set of config options for display.

And it works dynamically without modifying the code

Best Practices

Name must exactly match the @api name in your LWC’s code (case-sensitive).
Use the Mapped Value to select valid Dynamic Component resources (Variables, Constants, Formulas, component attributes, or global variables).
Ensure the value's data type is compatible with what the LWC expects (e.g., don't send text to a boolean input).
You can pass as many properties as needed by adding multiple items

Custom Event Integration

The LWC Container supports custom events that trigger interactions defined in the Builder, allowing two-way communication between your LWC and the visual canvas.

How It Works

In the Builder

Select the LWC Container.
Go to the Interactions panel.
Add an interaction triggered by a Custom Event name (e.g., refreshTimeline, showFormModal).
Choose the action (e.g., navigate, show modal, update records, etc.).

In Your LWC Dispatch an event using

this.dispatchEvent(new CustomEvent('myCustomEventName'));

The event name must exactly match the one configured in the Builder (case-sensitive).

What Happens Next

The LWC Container listens for the event, catches it, and executes the mapped interaction—no additional setup required.

Best Practices

Use descriptive, unique event names to avoid conflicts.
Always match names case-sensitively.
Document expected events so builders can configure the right interactions.

Handling Builder and Preview Modes

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.

Examples

Displaying Stock Information for a Selected Product

Scenario: You want to display stock information for a product selected elsewhere in the page—like from a data table, a form field, or a calculated formula. A developer provides a custom LWC called productStockViewer that accepts a productId via @api.

You’ll pass this productId dynamically using the LWC Container’s Attributes section.

LWC Configuration in Avonni Dynamic Component

In your Dynamic Component (e.g., on a Product-related page):

Add an LWC Container to the canvas.
Set these values in the Properties Panel:
- API Name: stockViewerContainer
- LWC Name: c/productStockViewer
In the Attributes section, click Add Item:
- Name: productId
- Value:
  - From a data table: $Component.ProductTable.selectedRow.productId,
  - Or from a variable or formula as needed.

Example Attribute Mapping Table

Name

Value

What It Does

productId

$Component.ProductTable.selectedRow.productId

Sends the selected product’s ID into the custom LWC

💡 You can also pass any other dynamic source (form field, variable, formula).

Full Code: `productStockViewer` LWC

This example LWC:

Reactively receives a productId via @api,
Simulates an async stock lookup,
Shows dynamic stock info or loading UI.

✅ productStockViewer.html

<template>
    <lightning-card title="Stock Info" icon-name="utility:info">
        <div class="slds-p-around_medium">
            <template if:true={productId}>
                <p>Product ID: <strong>{productId}</strong></p>
                <template if:true={stock}>
                    <p>📦 Stock: <strong>{stock}</strong></p>
                </template>
                <template if:false={stock}>
                    <p>⏳ Loading stock data...</p>
                </template>
            </template>
            <template if:false={productId}>
                <p>No product selected</p>
            </template>
        </div>
    </lightning-card>
</template>

✅ productStockViewer.js

import { LightningElement, api } from 'lwc';

export default class ProductStockViewer extends LightningElement {
    _productId;
    stock = null;

    @api
    set productId(value) {
        this._productId = value;
        this.stock = null;
        if (value) {
            this.fetchStockData(value);
        }
    }

    get productId() {
        return this._productId;
    }

    fetchStockData(productId) {
        // Simulated async call (replace with real API if needed)
        setTimeout(() => {
            this.stock = Math.floor(Math.random() * 100);
        }, 1000);
    }
}

✅ productStockViewer.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Custom LWC Using `@api` Inputs and Interactions

This example shows a minimal custom LWC that uses:

@api isBuilder and @api isPreview to control design/preview behavior,
@api value to receive dynamic content,
A custom event (showtoast) to trigger Avonni interactions.

customLwcComponent.js

import { LightningElement, api } from 'lwc';

export default class LwcComponent extends LightningElement {
    @api isBuilder;
    @api isPreview;
    @api value;

    handleButtonClick() {
        this.dispatchEvent(new CustomEvent('showtoast'));
    }
}

customLwcComponent.html

<template>
    <div lwc:if={isBuilder} class="slds-text-align_center slds-text-title_caps slds-p-around_large">
        This is a placeholder for the builder mode.
    </div>
    <div lwc:elseif={isPreview} class="slds-text-align_center slds-text-title_caps slds-p-around_large">
        This is a placeholder for the preview mode.
    </div>
    <div lwc:else class="slds-box slds-theme_shade">
        <div class="slds-text-heading_small slds-p-bottom_small">
            LWC Custom Component
        </div>
        <p class="slds-text-title_caps">Custom Value Attribute:</p>
        <p class="slds-p-bottom_small">{value}</p>
        <lightning-button
            label="Dispatch Custom Event 'showtoast'"
            onclick={handleButtonClick}
        ></lightning-button>
    </div>
</template>

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.

Last updated 1 month ago

Was this helpful?

Overview

Choosing the Right LWC Container: Avonni Data LWC Container vs. LWC Container

Adding the LWC Container Component

Configuration

Basic Properties

Selecting the LWC

Passing Data to the LWC (Attributes)

How to Pass Data

Real-Life Use Case

Best Practices

Custom Event Integration

How It Works

What Happens Next

Best Practices

Handling Builder and Preview Modes

Styling & Visibility (for the Container)

Examples

Displaying Stock Information for a Selected Product

LWC Configuration in Avonni Dynamic Component

Example Attribute Mapping Table

Full Code: productStockViewer LWC

Custom LWC Using @api Inputs and Interactions

Important Considerations

In Summary

Full Code: `productStockViewer` LWC

Custom LWC Using `@api` Inputs and Interactions