Conteneur LWC

Aperçu

Le Conteneur LWC le composant vous permet d’intégrer des Lightning Web Components (LWC) personnalisés, développés par des développeurs, directement sur votre canevas Avonni Dynamic Component. Cette fonctionnalité puissante vous permet de combiner la flexibilité de la conception de pages sans code avec la fonctionnalité spécialisée des LWC codés sur mesure.

Son objectif principal est de :

Transmettre des données aux LWC : Envoyer dynamiquement des données provenant des ressources de votre Dynamic Component (Variables, Constantes, Formules ou attributs d’autres composants Avonni) vers les @api propriétés de votre LWC personnalisé.
Exploiter une fonctionnalité personnalisée : Incorporer des éléments d’interface uniques, une logique métier complexe ou des intégrations développées dans un LWC à l’intérieur de votre conception sans code.

Choisir le bon Conteneur LWC : Avonni Data LWC Container vs. LWC Container

Contrairement au composant Data LWC Container, ce LWC Container n’a pas de fonctionnalités intégrées de requête de données, de filtrage, de recherche ou de pagination. C’est simplement un conteneur pour votre LWC, toute gestion des données étant prise en charge soit à l’intérieur du LWC lui-même, soit transmise via des propriétés d’entrée depuis le Dynamic Component.

Si vous souhaitez utiliser les fonctionnalités de requête et de recherche de données d’Avonni dans votre LWC, envisagez d’utiliser le Avonni Data LWC composant Container à la place.

Ajout du composant LWC Container

Depuis la bibliothèque de composants (panneau de gauche), trouvez le composant « LWC Container » et faites-le glisser sur votre canevas.

Configuration

Sélectionnez le composant LWC Container sur le canevas pour accéder à ses propriétés dans le panneau Propriétés.

Propriétés de base

Nom API : (Texte) Un identifiant unique pour cette instance de LWC Container (par ex., MyCustomLwcHolder).

Sélectionner le LWC

Saisissez nom API exact du Lightning Web Component personnalisé (généralement développé par votre développeur) que vous souhaitez intégrer. Ce nom doit suivre le format namespace/nomDuComposant (par ex., c/myCustomCardList si dans l’espace de noms par défaut 'c', ou yourNamespace/specialDisplay s’il fait partie d’un espace de noms spécifique).

Transmission de données au LWC (Attributs)

Les LWC personnalisés attendent souvent des données pour fonctionner correctement, comme un @api recordId ou @api config. Le Conteneur LWC vous permet de envoyer des valeurs depuis votre Dynamic Component directement dans ces @api propriétés, rendant le LWC dynamique et contextuel.

Considérez les @api propriétés de votre LWC comme des prises d’entrée, et les valeurs de votre Dynamic Component comme sources d’alimentation ou câbles de données qui se branchent.

Comment transmettre des données

Vous définissez quelles données vont dans quelle entrée de votre LWC en utilisant la section Attributs dans le panneau Propriétés.

Exemple pas à pas

Supposons que votre développeur vous ait fourni un LWC qui attend

@api recordId;
@api configOptions;

Voici comment lui fournir les bonnes données :

Cliquez sur « Ajouter une propriété d’entrée » dans les paramètres du LWC Container.
Pour chaque propriété :
- Nom API de la propriété LWC: Entrez le nom de l’ @api entrée (par ex., recordId).
- propriété: Choisissez les données à envoyer depuis votre Dynamic Component. Vous pouvez choisir :
  - Une Variable (par ex., selectedAccountId)
  - Une Constante (par ex., "standard-view")
  - Une Formule
  - Une Attribut de composant (par ex., @MyDataTable.firstSelectedRow.Id)
  - Une Variable globale (comme $Component.recordId)

Cas d’usage réel

Scénario: Vous concevez une page pour enregistrements Account, et vous souhaitez afficher un LWC de timeline personnalisé qui a besoin de l’ID courant recordId et quelques paramètres.

Voici ce que vous faites :

Name

propriété

Ce que cela fait

recordId

$Component.recordId

Envoie l’ID de l’enregistrement courant dans le LWC

configOptions

{timelineConfigJson} (Variable)

Envoie une chaîne JSON personnalisée stockée dans une Variable de texte

Maintenant, lorsque la page se charge, le LWC reçoit :

l’ID de Account correct, et
un ensemble d’options de configuration pour l’affichage.

Et il fonctionne de manière dynamique sans modifier le code

Bonnes pratiques

Name doit correspondre exactement au @api nom dans le code de votre LWC (sensible à la casse).
Utilisez la Valeur mappée pour sélectionner des ressources valides du Dynamic Component (Variables, Constantes, Formules, attributs de composant ou variables globales).
Assurez-vous que le type de données est compatible avec ce que le LWC attend (par ex., n’envoyez pas de texte à une entrée booléenne).
Vous pouvez transmettre autant de propriétés que nécessaire en ajoutant plusieurs éléments

Intégration d’événements personnalisés

Le LWC Container prend en charge événements personnalisés qui déclenchent interactions définies dans le Builder, permettant une communication bidirectionnelle entre votre LWC et le canevas visuel.

Comment ça marche

Dans le Builder

Sélectionnez le LWC Container.
Allez au Interactions panneau.
Ajoutez une interaction déclenchée par un Nom d’événement personnalisé (par ex., refreshTimeline, showFormModal).
Choisissez l’action (par ex., naviguer, afficher une fenêtre modale, mettre à jour des enregistrements, etc.).

Dans votre LWC Déclenchez un événement en utilisant

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

Le nom de l’événement doit correspondre exactement à celui configuré dans le Builder (sensible à la casse).

Ce qui se passe ensuite

Le LWC Container écoute l’événement, le capture et exécute l’ interaction mappée—aucune configuration supplémentaire requise.

Bonnes pratiques

Utilisez des noms d’événements descriptifs et uniques
pour éviter les conflits. Faites toujours correspondre les noms.
en respectant la casse

Documentez les événements attendus afin que les builders puissent configurer les interactions appropriées.

Gestion des modes Builder et Preview @api Le LWC Container transmet automatiquement deux attributs booléens à votre LWC intégré, que vous pouvez déclarer comme

propriétés : isBuilder (Boolean) : Cet attribut est vrai lorsque votre LWC est affiché dans leAvonni Dynamic Component Builder
- . Dans ce mode, votre LWC n’est pas entièrement interactif. Les développeurs peuvent utiliser ce indicateur pour :
- Afficher un espace réservé simplifié ou une représentation au moment de la conception au lieu de rendre un contenu complet et complexe.
Éviter des récupérations de données inutiles, des requêtes API ou des calculs complexes non nécessaires pendant la conception. isBuilder (Boolean) : Cet attribut est isPreview lorsque votre LWC est affiché en mode Preview du Avonni Dynamic Component
- (avant que le Dynamic Component soit publié ou utilisé en direct sur une page Salesforce). Les développeurs peuvent utiliser ce indicateur pour :
- Afficher une version simplifiée ou avec des données d’exemple du composant.

Éviter d’effectuer des appels API en direct ou des requêtes de base de données non intentionnels pendant la prévisualisation.

Style & Visibilité (pour le Conteneur)

Ces paramètres s’appliquent au Conteneur LWC lui-même, pas au style interne du LWC qu’il contient (qui est contrôlé par le CSS du LWC). Marge, Rembourrage :
Définir la visibilité du composant: Les options de style standard d’Avonni contrôlent l’espacement et les dimensions du cadre du conteneur.

: La valeur maximale.

Contrôle si l’ensemble du LWC Container (et donc le LWC intégré) est visible. Liez à une ressource booléenne pour une visibilité dynamique.

ScénarioAffichage des informations de stock pour un produit sélectionné : Vous souhaitez afficher des informations de stock pour un produit sélectionné ailleurs sur la page — par exemple depuis untableau de données , unchamp de formulaire , ou uneformule calculée . Un développeur fournit un LWC personnalisé appelé productStockViewer qui accepte un productId @api.

via qui accepte un Vous transmettrez ce

de manière dynamique en utilisant la section Attributs du LWC Container.

Configuration du LWC dans Avonni Dynamic Component

Dans votre Dynamic Component (par ex., sur une page liée au Produit) : Ajoutez un LWC Container
au canevas. Définissez ces valeurs dans le:
- par le véritable: panneau Propriétés
- stockViewerContainer: Nom LWC
Sélectionnez le PDF Viewer. Attributs c/productStockViewer section, cliquez sur:
- Name: qui accepte un
- propriété:
  - Ajouter un élément Depuis un tableau de données :,
  - $Component.ProductTable.selectedRow.productId

Ou depuis une variable ou une formule selon les besoins.

Name

propriété

Ce que cela fait

qui accepte un

Depuis un tableau de données :

Tableau d’exemple de mappage d’attributs

Envoie l’ID du produit sélectionné dans le LWC personnalisé

💡 Vous pouvez également transmettre toute autre source dynamique (champ de formulaire, variable, formule). `. Un développeur fournit un LWC personnalisé appelé` Code complet :

LWC

Ce LWC d’exemple : qui accepte un productId @api,
Reçoit de manière réactive un
Simule une recherche de stock asynchrone,

✅ Affiche des informations de stock dynamiques ou une interface de chargement.

<template>
    productStockViewer.html
        <lightning-card title="Stock Info" icon-name="utility:info">
            <div class="slds-p-around_medium">
                <template if:true={productId}>
                <p>ID Produit : <strong>{productId}</strong></p>
                    <template if:true={stock}>
                </template>
                <p>📦 Stock : <strong>{stock}</strong></p>
                    <template if:false={stock}>
                </template>
            </template>
            <p>⏳ Chargement des données de stock...</p>
                <template if:false={productId}>
            </template>
        <p>Aucun produit sélectionné</p>
    </div>
</template>

✅ </lightning-card>

productStockViewer.js

import { LightningElement, api } from 'lwc';
    export default class ProductStockViewer extends LightningElement {
    _productId;

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

    this.fetchStockData(value);
        }
    }

    get productId() {
        return this._productId;
        }
            fetchStockData(productId) {
        }, 1000);
    }
}

✅ // Appel asynchrone simulé (remplacez par une API réelle si nécessaire)

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> `@api` <target>lightning__RecordPage</target>

<target>lightning__AppPage</target>

<target>lightning__HomePage</target> et </targets> </LightningComponentBundle>
LWC personnalisé utilisant Entrées et interactions
Cet exemple montre un LWC personnalisé minimal qui utilise :@api isBuilder@api isPreview

pour contrôler le comportement en mode conception/prévisualisation,

productStockViewer.js

@api value
    pour recevoir du contenu dynamique,
    Un événement personnalisé (
    showtoast

    ) pour déclencher des interactions Avonni.
        customLwcComponent.js
    }
}

export default class LwcComponent extends LightningElement {

<template>
    @api isBuilder;
        @api isPreview;
    <p>Aucun produit sélectionné</p>
    @api value;
        handleButtonClick() {
    <p>Aucun produit sélectionné</p>
    this.dispatchEvent(new CustomEvent('showtoast'));
        }
            customLwcComponent.html
        <p>Aucun produit sélectionné</p>
        <div lwc:if={isBuilder} class="slds-text-align_center slds-text-title_caps slds-p-around_large">
        Ceci est un espace réservé pour le mode builder.
        <div lwc:elseif={isPreview} class="slds-text-align_center slds-text-title_caps slds-p-around_large">
            Ceci est un espace réservé pour le mode preview.
            <div lwc:else class="slds-box slds-theme_shade">
        <div class="slds-text-heading_small slds-p-bottom_small">
    <p>Aucun produit sélectionné</p>
</template>

variable sera mise à jour, et vous pourrez utiliser ces valeurs pour filtrer un Data Table.

Composant personnalisé LWC <p class="slds-text-title_caps">Attribut de valeur personnalisée :</p>
<p class="slds-p-bottom_small">{value}</p> <lightning-button dans label="Déclencher l’événement personnalisé 'showtoast'" onclick={handleButtonClick} ></lightning-button>
Dépendance du développeur : Ce composant repose sur l’existence d’un LWC personnalisé déjà développé ou développé par une personne ayant des compétences en codage LWC.
Flux de données : Conçu principalement pour transmettre des données

En résumé

au LWC. Si le LWC doit communiquer des données

Mis à jour il y a 6 mois

Ce contenu vous a-t-il été utile ?

Bonjour

Aperçu

Choisir le bon Conteneur LWC : Avonni Data LWC Container vs. LWC Container

Ajout du composant LWC Container

Configuration

Propriétés de base

Sélectionner le LWC

Transmission de données au LWC (Attributs)

Comment transmettre des données

Cas d’usage réel

Bonnes pratiques

Intégration d’événements personnalisés

Comment ça marche

Ce qui se passe ensuite

Bonnes pratiques

Documentez les événements attendus afin que les builders puissent configurer les interactions appropriées.

Éviter d’effectuer des appels API en direct ou des requêtes de base de données non intentionnels pendant la prévisualisation.

: La valeur maximale.

Contrôle si l’ensemble du LWC Container (et donc le LWC intégré) est visible. Liez à une ressource booléenne pour une visibilité dynamique.

de manière dynamique en utilisant la section Attributs du LWC Container.

Ou depuis une variable ou une formule selon les besoins.

💡 Vous pouvez également transmettre toute autre source dynamique (champ de formulaire, variable, formule). . Un développeur fournit un LWC personnalisé appelé Code complet :

<targets> @api <target>lightning__RecordPage</target>

variable sera mise à jour, et vous pourrez utiliser ces valeurs pour filtrer un Data Table.

En résumé

💡 Vous pouvez également transmettre toute autre source dynamique (champ de formulaire, variable, formule). `. Un développeur fournit un LWC personnalisé appelé` Code complet :

<targets> `@api` <target>lightning__RecordPage</target>