LWC Container

Übersicht

Das LWC-Container Die Komponente ermöglicht es Ihnen, benutzerdefinierte Lightning Web Components (LWC), die von Entwicklern erstellt wurden, direkt in Ihre Avonni Dynamic Component-Leinwand zu integrieren. Diese leistungsstarke Funktion erlaubt es Ihnen, die Flexibilität des No-Code-Seitendesigns mit der spezialisierten Funktionalität individuell codierter LWCs zu kombinieren.

Ihr Hauptzweck ist es:

Daten an LWCs weitergeben: Dynamisch Daten aus den Ressourcen Ihrer Dynamic Component (Variablen, Konstanten, Formeln oder Attribute anderer Avonni-Komponenten) in die öffentlichen @api Eigenschaften Ihres benutzerdefinierten LWC zu senden.
Benutzerdefinierte Funktionalität nutzen: Einzigartige UI-Elemente, komplexe Geschäftslogik oder Integrationen, die in einem LWC entwickelt wurden, in Ihr ansonsten No-Code-Design einbinden.

Die richtige Wahl des LWC-Containers: Avonni Data LWC Container vs. LWC Container

Im Gegensatz zum Data LWC Container-Komponentehat dieser LWC-Container keine integrierten Funktionen für Datenabfragen, Filterung, Suche oder Paginierung. Er ist schlicht ein Container für Ihr LWC; die Datenverarbeitung erfolgt entweder innerhalb des LWC selbst oder wird ihm über Eingabe-Eigenschaften aus der Dynamic Component übergeben.

Wenn Sie Avonnis Datenabfrage- und Suchfunktionen innerhalb Ihres LWC nutzen möchten, sollten Sie stattdessen die Avonni Data LWC Container-Komponente in Betracht ziehen.

Hinzufügen der LWC-Container-Komponente

Suchen Sie in der Komponentenbibliothek (linkes Panel) die Komponente „LWC Container“ und ziehen Sie sie auf Ihre Leinwand.

Konfiguration

Wählen Sie die LWC-Container-Komponente auf der Leinwand aus, um auf ihre Eigenschaften im Eigenschaften-Panel zuzugreifen.

Grundlegende Eigenschaften

API-Name: (Text) Eine eindeutige Kennung für diese LWC-Container-Instanz (z. B. MyCustomLwcHolder).

Auswahl des LWC

Geben Sie die genauen API-Namens des benutzerdefinierten Lightning Web Component (in der Regel von Ihrem Entwickler erstellt), das Sie einbetten möchten. Dieser Name sollte dem Format namespace/componentName (z. B., c/myCustomCardList entsprechen, wenn es sich im Standard-Namespace 'c' befindet, oder yourNamespace/specialDisplay wenn es Teil eines spezifischen Namespaces ist).

Daten an das LWC übergeben (Attribute)

Benutzerdefinierte LWCs erwarten oft Daten, damit sie korrekt funktionieren, wie z. B. ein @api recordId oder @api config. Das LWC-Container ermöglicht Ihnen, Werte aus Ihrer Dynamic Component direkt in diese @api Eigenschaftenzu senden, wodurch das LWC dynamisch und kontextsensitiv wird.

Betrachten Sie die @api Eigenschaften in Ihrem LWC als Eingangsanschlüsseund die Werte aus Ihrer Dynamic Component als Stromquellen oder Datenkabel die eingesteckt werden.

So übergeben Sie Daten

Sie definieren, welche Daten in welchen Eingang Ihres LWC gelangen, mithilfe der Attribute Sektion im Eigenschaften-Panel.

Schritt-für-Schritt-Beispiel

Angenommen, Ihr Entwickler hat Ihnen ein LWC gegeben, das folgendes erwartet:

@api recordId;
@api configOptions;

So füttern Sie es mit den richtigen Daten:

Klicken Sie auf "Input-Eigenschaft hinzufügen" in den Einstellungen des LWC-Containers.
Für jede Eigenschaft:
- LWC-Eigenschaft API-Name: Geben Sie den Namen des @api Eingangs an (z. B. recordId).
- Wert: Wählen Sie die Daten aus, die Sie aus Ihrer Dynamic Component senden möchten. Sie können wählen:
  - Ein Variable (z. B., selectedAccountId)
  - Ein Konstante (z. B., "standard-view")
  - Ein Formel
  - Ein Komponentenattribut (z. B., @MyDataTable.firstSelectedRow.Id)
  - Ein Globale Variable (wie $Component.recordId)

Praxisfall

Szenario: Sie entwerfen eine Seite für Account-Datensätzeund möchten eine benutzerdefinierte Timeline-LWC anzeigen, die die aktuelle recordId und einige Einstellungen benötigt.

So gehen Sie vor:

Name

Wert

Was es macht

recordId

$Component.recordId

Sendet die ID des aktuellen Datensatzes in das LWC

configOptions

{timelineConfigJson} (Variable)

Sendet eine benutzerdefinierte JSON-Zeichenkette, die in einer Text-Variable gespeichert ist

Wenn die Seite geladen wird, erhält das LWC:

die korrekte Account-ID und
eine Reihe von Konfigurationsoptionen für die Anzeige.

Und es funktioniert dynamisch ohne den Code zu ändern

Best Practices

Name muss genau mit dem @api Namen im Code Ihres LWC übereinstimmen (Groß-/Kleinschreibung beachten).
Verwenden Sie den Abgebildeten Wert, um gültige Dynamic Component-Ressourcen (Variablen, Konstanten, Formeln, Komponentenattribute oder globale Variablen) auszuwählen.
Stellen Sie sicher, dass der Datentyp des Werts kompatibel ist mit dem, was das LWC erwartet (z. B. senden Sie keinen Text an einen Boolean-Eingang).
Sie können so viele Eigenschaften weitergeben, wie benötigt, indem Sie mehrere Elemente hinzufügen

Integration benutzerdefinierter Ereignisse

Der LWC-Container unterstützt benutzerdefinierte Ereignisse die Interaktionen auslösen, die im Builder definiert sind, und ermöglicht so eine bidirektionale Kommunikation zwischen Ihrem LWC und der visuellen Leinwand.

So funktioniert es

Im Builder

Wählen Sie den LWC-Container aus.
Gehen Sie zum Interaktionen Panel.
Fügen Sie eine Interaktion hinzu, die durch einen Namen des benutzerdefinierten Ereignisses (z. B., refreshTimeline, showFormModal).
Wählen Sie die Aktion (z. B. navigieren, Modal anzeigen, Datensätze aktualisieren, usw.).

In Ihrem LWC Senden Sie ein Ereignis mit

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

Der Ereignisname muss genau übereinstimmen mit dem im Builder konfigurierten Namen (Groß-/Kleinschreibung beachten).

Was als Nächstes passiert

Der LWC-Container hört auf das Ereignis, fängt es ab und führt die zugeordnete Interaktionaus — keine zusätzliche Einrichtung erforderlich.

Best Practices

Verwenden Sie beschreibende, eindeutige Ereignisnamen, um Konflikte zu vermeiden.
Stellen Sie Namen immer groß-/kleinschreibungssensitiv ein.
Dokumentieren Sie erwartete Ereignisse, damit Builder die richtigen Interaktionen konfigurieren können.

Umgang mit Builder- und Vorschaumodi

Der LWC-Container übergibt automatisch zwei boolesche Attribute an Ihr eingebettetes LWC, die Sie als @api Eigenschaften deklarieren können:

isBuilder (Boolean): Dieses Attribut ist true wenn Ihr LWC innerhalb des Avonni Dynamic Component Builderangezeigt wird. In diesem Modus ist Ihr LWC nicht vollständig interaktiv. Entwickler können dieses Flag verwenden, um:
- Anstelle der vollständigen, komplexen Darstellung einen vereinfachten Platzhalter oder eine Designzeit-Darstellung anzuzeigen.
- Unnötige Datenabfragen, API-Aufrufe oder komplexe Berechnungen zu vermeiden, die während des Designs nicht benötigt werden.
isPreview (Boolean): Dieses Attribut ist true wenn Ihr LWC im Vorschaumodus der Avonni Dynamic Component angezeigt wird (bevor die Dynamic Component veröffentlicht oder live auf einer Salesforce-Seite verwendet wird). Entwickler können dieses Flag verwenden, um:
- Eine vereinfachte oder beispielhafte Datenversion der Komponente anzuzeigen.
- Unbeabsichtigte Live-API-Aufrufe oder Datenbankabfragen während der Vorschau zu vermeiden.

Styling & Sichtbarkeit (für den Container)

Diese Einstellungen gelten für den LWC-Container selbst, nicht für das interne Styling des darin enthaltenen LWC (dies wird von der eigenen CSS des LWC gesteuert).

Margin, Padding: Standard-Avonni-Styleoptionen steuern den Abstand und die Abmessungen des Container-Rahmens.
Sichtbarkeit der Komponente festlegen: Steuert, ob der gesamte LWC-Container (und damit das eingebettete LWC) sichtbar ist. Binden Sie an eine Boolesche Ressource für dynamische Sichtbarkeit.

Beispiele

Anzeigen von Lagerinformationen für ein ausgewähltes Produkt

Szenario: Sie möchten Lagerinformationen für ein Produkt anzeigen, das an anderer Stelle auf der Seite ausgewählt wurde — z. B. aus einer Datentabelle, einem Formularfeld, oder einer berechneten Formel. Ein Entwickler stellt ein benutzerdefiniertes LWC namens productStockViewer bereit, das eine productId über @api.

akzeptiert. Sie werden diese productId dynamisch mit der Attribut-Sektion des LWC-Containers übergeben.

LWC-Konfiguration in Avonni Dynamic Component

In Ihrer Dynamic Component (z. B. auf einer produktbezogenen Seite):

Fügen Sie einen LWC-Container zur Leinwand hinzu.
Legen Sie diese Werte im Eigenschaften-Panel:
- API-Namen: stockViewerContainer
- LWC-Name: c/productStockViewer
Im Attribute Bereich fest und klicken Sie auf Element hinzufügen:
- Name: productId
- Wert:
  - Aus einer Datentabelle: $Component.ProductTable.selectedRow.productId,
  - Oder aus einer Variablen oder Formel, je nach Bedarf.

Beispiel Zuordnungstabelle für Attribute

Name

Wert

Was es macht

productId

$Component.ProductTable.selectedRow.productId

Sendet die ID des ausgewählten Produkts in das benutzerdefinierte LWC

💡 Sie können auch jede andere dynamische Quelle (Formularfeld, Variable, Formel) übergeben.

Vollständiger Code: `productStockViewer` LWC

Dieses Beispiel-LWC:

empfängt reaktiv eine productId über @api,
Simuliert eine asynchrone Lagerabfrage,
Zeigt dynamische Lagerinformationen oder eine Lade-UI an.

✅ productStockViewer.html

<template>
    <lightning-card title="Stock Info" icon-name="utility:info">
        <div class="slds-p-around_medium">
            <template if:true={productId}>
                <p>Produkt-ID: <strong>{productId}</strong></p>
                <template if:true={stock}>
                    <p>📦 Lagerbestand: <strong>{stock}</strong></p>
                </template>
                <template if:false={stock}>
                    <p>⏳ Lade Lagerdaten...</p>
                </template>
            </template>
            <template if:false={productId}>
                <p>Kein Produkt ausgewählt</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) {
        // Simulierter asynchroner Aufruf (bei Bedarf durch echte API ersetzen)
        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>

Benutzerdefiniertes LWC mit `@api` Eingaben und Interaktionen

Dieses Beispiel zeigt ein minimales benutzerdefiniertes LWC, das verwendet:

@api isBuilder und @api isPreview um das Verhalten im Design-/Vorschaumodus zu steuern,
@api value um dynamische Inhalte zu empfangen,
Ein benutzerdefiniertes Ereignis (showtoast) um Avonni-Interaktionen auszulösen.

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">
        Dies ist ein Platzhalter für den Builder-Modus.
    </div>
    <div lwc:elseif={isPreview} class="slds-text-align_center slds-text-title_caps slds-p-around_large">
        Dies ist ein Platzhalter für den Vorschaumodus.
    </div>
    <div lwc:else class="slds-box slds-theme_shade">
        <div class="slds-text-heading_small slds-p-bottom_small">
            LWC-Benutzerkomponente
        </div>
        <p class="slds-text-title_caps">Attribut für benutzerdefinierten Wert:</p>
        <p class="slds-p-bottom_small">{value}</p>
        <lightning-button
            label="Sende benutzerdefiniertes Ereignis 'showtoast'"
            onclick={handleButtonClick}
        ></lightning-button>
    </div>
</template>

Wichtige Überlegungen

Abhängigkeit vom Entwickler: Diese Komponente setzt voraus, dass bereits ein benutzerdefiniertes LWC entwickelt wurde oder von jemandem mit LWC-Coding-Fähigkeiten entwickelt wird.
Datenfluss: Hauptsächlich dazu gedacht, Daten an in das LWC zu übergeben. Wenn das LWC Daten nach außen an die Dynamic Component kommunizieren muss, damit andere Avonni-Komponenten darauf reagieren können, müsste der LWC-Entwickler standardmäßige JavaScript CustomEvents dispatchen, und Sie müssten entsprechende Ereignis-Listener oder Interaktionen konfigurieren, falls der LWC-Container oder die übergeordnete Dynamic Component dies unterstützt (diese Möglichkeit kann variieren).
LWC-Leistung: Die Performance des eingebetteten LWC liegt in der Verantwortung des LWC-Entwicklers.
Styling-Bereich: Der LWC-Container stylt seinen Rahmen. Das eigene CSS des LWC steuert das interne Erscheinungsbild des eingebetteten LWC.

Zusammenfassung

Die LWC-Container-Komponente ist der Schlüssel zur nahtlosen Integration benutzerdefinierter Lightning Web Components in Ihre No-Code-Avonni Dynamic Component-Layouts. Sie ermöglicht es Ihnen, spezialisierte LWC-Funktionalität zu nutzen und gleichzeitig einen visuellen und deklarativen Ansatz für das gesamte Seitendesign und den Datenfluss aus der Dynamic Component beizubehalten.

Zuletzt aktualisiert vor 4 Monaten

War das hilfreich?

Übersicht

Die richtige Wahl des LWC-Containers: Avonni Data LWC Container vs. LWC Container

Hinzufügen der LWC-Container-Komponente

Konfiguration

Grundlegende Eigenschaften

Auswahl des LWC

Daten an das LWC übergeben (Attribute)

So übergeben Sie Daten

Praxisfall

Best Practices

Integration benutzerdefinierter Ereignisse

So funktioniert es

Was als Nächstes passiert

Best Practices

Umgang mit Builder- und Vorschaumodi

Styling & Sichtbarkeit (für den Container)

Beispiele

Anzeigen von Lagerinformationen für ein ausgewähltes Produkt

LWC-Konfiguration in Avonni Dynamic Component

Beispiel Zuordnungstabelle für Attribute

Vollständiger Code: productStockViewer LWC

Benutzerdefiniertes LWC mit @api Eingaben und Interaktionen

Wichtige Überlegungen

Zusammenfassung

Vollständiger Code: `productStockViewer` LWC

Benutzerdefiniertes LWC mit `@api` Eingaben und Interaktionen