Conteneur de données LWC
Le conteneur Data LWC le composant agit comme un puissant pont. Il combine les fonctionnalités de gestion des données faciles d'Avonni (comme l'interrogation, le filtrage, la recherche et la pagination) avec les capacités d'affichage visuel uniques d'un composant Lightning Web Component (LWC) personnalisé développé par un développeur.
Aperçu
Considérez le conteneur Data LWC comme un « cadre intelligent » pour une image personnalisée. Avonni fournit le cadre innovant :
Il récupère vos données Salesforce en utilisant une source de données Query ou Variable familière.
Il fournit des contrôles intégrés de filtrage, de recherche et de pagination pour ces données.
Le LWC personnalisé (construit par un développeur) agit comme la « image » à l'intérieur du cadre :
Il reçoit les données gérées par le conteneur Avonni.
Il affiche les données dans un format visuel personnalisé qui pourrait ne pas être réalisable avec les composants Avonni standard.
Pourquoi l'utiliser ? (Les avantages)
Tirer parti d'une interface utilisateur personnalisée: Utilisez des composants d'interface utilisateur uniques et hautement spécialisés créés par des développeurs sans que ce développeur ait également à implémenter la logique complexe de récupération, de filtrage, de recherche et de pagination des données. Avonni s'occupe du traitement lourd des données.
Le meilleur des deux mondes: Combinez la configuration de données sans code d'Avonni avec la facilité d'utilisation et les possibilités visuelles illimitées des LWC personnalisés.
Fonctionnalités de données cohérentes: Appliquez les contrôles standard d'Avonni pour le filtrage, la recherche et la pagination à tout LWC personnalisé conçu pour fonctionner avec ce conteneur.
Flexibilité: Intégrez des solutions LWC personnalisées pour des exigences UI de niche tout en utilisant le constructeur Avonni pour la structure globale et la gestion des données.
Ajout du conteneur Data LWC
Glisser-déposer : Trouvez le composant « Data LWC Container » dans la bibliothèque de composants et faites-le glisser sur votre canevas.
Configuration du conteneur Data LWC
Sélectionnez le composant Data LWC Container sur le canevas pour accéder à ses propriétés dans le panneau Propriétés.
Source de données
Cela indique au conteneur quelles données récupérer et gérer.
Source de données: Choisissez comment fournir les données :
Requête: Utilisez une source de données Query d'Avonni pour récupérer des enregistrements directement depuis Salesforce. C'est l'option la plus courante.Variable: Utilisez une ressource Variable (typiquement une variable de collection) qui contient déjà la liste des enregistrements que vous souhaitez afficher.
Connexion LWC
Cela indique au conteneur quel LWC personnalisé utiliser pour l'affichage et comment envoyer les données.
Nom du LWC: (Texte) Le nom d'API exact du composant Lightning Web Component personnalisé (construit par votre développeur) qui affichera les données (par ex.,
c/myCustomCardList,namespace/specialDisplay). Vous obtiendrez ce nom auprès du développeur LWC.Attribut des identifiants d'enregistrement: (Texte) Le nom de la variable spécifique à l'intérieur du LWC personnalisé où Avonni doit envoyer la liste des identifiants d'enregistrements Salesforce. Votre développeur LWC fournira le nom exact de cet attribut.
Attribut des enregistrements: (Texte) Le nom de la variable spécifique à l'intérieur du LWC personnalisé où Avonni doit envoyer les données réelles des enregistrements (la liste des enregistrements récupérés). Votre développeur LWC fournira le nom exact de cet attribut.
Attribut des erreurs: (Texte) Le nom de la variable spécifique à l'intérieur du LWC personnalisé où Avonni doit envoyer toute information d'erreur si la requête échoue. Votre développeur LWC fournira le nom exact de cet attribut.
(Considérez ces paramètres d'attributs comme l'adressage d'un colis – vous avez besoin du nom correct fourni par le développeur LWC afin qu'Avonni sache où déposer les données à l'intérieur de leur composant personnalisé.)
Fonctionnalités standard
Le conteneur fournit ces fonctionnalités Avonni familières et travaille avec les données avant qu'elles ne soient envoyées au LWC personnalisé. Vous pouvez les activer et les configurer comme vous le feriez sur un tableau de données Avonni standard :
En-tête: Personnalisez l'en-tête du conteneur avec un titre, une légende, une icône et des boutons d'action d'en-tête.
Pagination: Activez la pagination pour gérer de grands ensembles de données, en contrôlant les éléments par page et les contrôles de navigation.
Filtre: Configurez les options de filtrage intégrées (horizontal, popover, panneau latéral) basées sur les champs de votre source de données.
Recherche: Activez une barre de recherche pour permettre aux utilisateurs de rechercher dans les données gérées par le conteneur.
Panneau latéral: Configurez le panneau latéral.
Style
Ces paramètres contrôlent l'apparence du conteneur lui-même, pas le LWC personnalisé qu'il contient (le développeur gère le style interne du LWC).
Marge : Espace à l'extérieur du conteneur.
Rembourrage : Espace à l'intérieur du conteneur, autour de l'emplacement où le LWC sera placé.
Bordure : Stylisez la bordure du conteneur.
Taille : Contrôlez les dimensions du conteneur.
Styles de l'en-tête : Personnalisez l'apparence des éléments d'en-tête du conteneur (Titre, Légende, Icône).
Boutons de pagination : Personnalisez les boutons de pagination.
Visibilité
Visible : (Booléen) Contrôle si le composant entier Data LWC Container est visible.
Cas d'utilisation exemple
Imaginez que votre entreprise ait une manière unique de visualiser les tâches de projet – pas sous forme de tableau ou de liste standard, mais sous forme de cartes interactives personnalisées avec des indicateurs de progression spécifiques.
Le développeur crée le LWC: Un développeur construit un LWC personnalisé appelé c__projectTaskCardDisplay, conçu pour recevoir une liste d'enregistrements de tâches et les afficher sous forme de ces cartes spéciales. Le développeur vous indique que le LWC attend les enregistrements dans un attribut nommé taskData et les identifiants d'enregistrements dans un attribut nommé taskIds.
L'administrateur configure le conteneur Data LWC:
Vous ajoutez le Data LWC Container à votre composant dynamique.
Vous définissez la source de données sur une Query récupérant des enregistrements Project_Task__c.
Vous définissez le nom du LWC sur
c/projectTaskCardDisplay.Vous définissez l'attribut Records sur taskData.
Vous définissez l'attribut Record IDs sur taskIds.
Vous activez et configurez la fonctionnalité Filtre au sein du Data LWC Container pour permettre aux utilisateurs de filtrer les tâches par statut.
Vous activez et configurez la pagination.
Résultat: Les utilisateurs voient les cartes de tâches personnalisées créées par le développeur, mais ils peuvent gérer les données affichées à l'intérieur grâce aux contrôles familiers de filtre et de pagination d'Avonni fournis par le conteneur.
Considérations importantes
Considération importante
Nécessite un LWC personnalisé: Ce composant nécessite un composant Lightning Web Component personnalisé séparé développé par un développeur. Le développeur doit concevoir son LWC pour accepter les données (en particulier les listes records et recordIds) via les noms d'attributs que vous configurez.
Défilement: N'implémentez pas de gestion de défilement personnalisée à l'intérieur du LWC que vous placez dans le conteneur. Le Data LWC Container gère le défilement/chargement infini en interne. Un défilement personnalisé dans votre LWC interférera avec cela.
Attributs isBuilder et isPreview: Votre développeur LWC peut utiliser ces attributs (qu'Avonni transmet automatiquement au LWC) pour afficher des espaces réservés ou empêcher le chargement des données lorsque le composant est affiché dans le constructeur de composants ou en mode Aperçu, optimisant ainsi les performances pendant la conception.
En résumé
Le conteneur Data LWC est un composant passerelle qui combine les fonctionnalités d'interrogation, de filtrage, de recherche et de pagination sans code d'Avonni avec les capacités de présentation visuelle uniques d'un composant Lightning Web Component personnalisé développé par un développeur.
Mis à jour
Ce contenu vous a-t-il été utile ?