Guide de démarrage rapide

Aperçu

Ce tutoriel vous guide dans la création d'un composant "Mes opportunités actives". Vous apprendrez à combiner un Carte, Tableau de données, et réactif Métriques pour afficher une liste filtrée d'opportunités actives et des informations récapitulatives clés. Cela démontre les compétences fondamentales des composants dynamiques Avonni, le tout sans code.

Ce que vous apprendrez

• Glisser-déposer des composants.

• Se connecter aux données Salesforce (Opportunités).

• Création de réactif composants (Métriques qui se mettent à jour en fonction des sélections du Tableau de données).

• Configuration de base des composants.

Cet exemple est destiné à une introduction en douceur. Bien qu'il ne soit pas le plus composant complexe que vous pouvez construire, il démontrera des concepts de base que vous pouvez appliquer pour créer des solutions plus robustes.

---

Étapes guidées

Avant de commencer : installation et configuration

Assurez-vous d'avoir effectué ces étapes avant de créer des composants :

Installer : Installez le package Avonni Experiences Components depuis l'AppExchange.

Licences : Attribuez des licences aux utilisateurs qui construiront ou utiliseront les composants via Configuration > Packages installés.

Autorisations : Attribuez les jeux d'autorisations appropriés :

• Avonni Dynamic Components User : Pour les utilisateurs finaux qui doivent utiliser Dynamic Components.

• Avonni Experience Cloud Components User : Pour les utilisateurs finaux qui doivent utiliser App Builder et les composants Experience Site.

• Avonni Experiences Admin : Pour les concepteurs de composants.

Voir la page d'installation pour plus de détails

Exigence importante

Pour installer avec succès le package Avonni Dynamic Components, veuillez activer la sécurité Lightning Web dans votre organisation.

Étape 1 : Créer un nouveau composant dynamique

Commencez par ouvrir l'application Avonni Components depuis le lanceur d'applications Salesforce. Ensuite, sur la page "Tous les composants", cliquez sur "Nouveau" pour créer un nouveau composant dynamique. Donnez à votre composant un nom descriptif (par ex., "MesOpportunitesActives") et une description facultative.

Étape 2 : Ajouter et personnaliser le composant Carte

• Faites glisser un composant Carte depuis la bibliothèque de composants sur la zone de travail.

• Sélectionnez la Carte et définissez son Titre sur "Mes opportunités actives" dans le panneau Propriétés.

• Facultativement, ajoutez une icône en utilisant la Propriété Nom d'icône ou ajustez le style à l'aide de l'onglet Style,

Étape 3 : Ajouter et configurer le bouton "Nouvelle opportunité"

• Ajoutez un composant Bouton à l'en-tête de la Carte. Dans le panneau Propriétés

• Définissez le libellé du bouton sur "Nouvelle opportunité"

• Choisissez une Variante, et ajoutez éventuellement une icône.

• Ensuite, ajoutez une interaction "Au clic" au bouton. Configurez l'interaction pour Naviguer vers la page d'objet pour créer un enregistrement Opportunité .

Étape 4 : Ajouter et configurer le Tableau de données

• Ajoutez un composant Avonni Data Table à l'intérieur de la Carte, sous l'en-tête.

• Dans le panneau Propriétés, définissez la source de données sur Avonni Query Data Source, et créez une requête pour récupérer enregistrement Opportunité enregistrements.

• Filtrez la requête pour n'afficher que les opportunités actives (par exemple, StageName not in 'Closed Won, Closed Lost').

• Enfin, configurez les Colonnes du Tableau de données pour afficher les champs souhaités. Sélectionnez les champs que vous souhaitez voir, comme le nom, l'étape et le montant.

Étape 5 : Ajouter et configurer le composant Colonnes

• Ajoutez un composant Colonnes depuis la bibliothèque de composants au-dessus du Tableau de données, à l'intérieur dans la Carte. Cela accueillera nos Métriques.

• Cliquez sur le bouton plus trois fois pour créer trois colonnes.

• Ensuite, dans le panneau Propriétés, définissez pour chaque colonne la Taille sur 4 et Alignement horizontal sur x-small pour des largeurs et espaces égaux.

Étape 6 : Ajouter des composants Métrique

• Nous allons ajouter des composants Métrique provisoires dans les trois colonnes que nous avons créées. Trouvez le composant Métrique dans la bibliothèque de composants et faites glisser une instance dans chaque colonne à l'intérieur du composant Colonnes.

Vous pouvez utiliser les boutons copier et coller pour accélérer le processus de création de composants identiques multiples. Cela vous aidera à construire vos composants plus rapidement.

Étape 7 : Configurer le composant Métrique pour afficher des données.

Configurez les composants Métrique pour afficher des réactif totaux basés sur la sélection du Tableau de données. Nous allons configurer une Métrique et répéter pour les autres.

1. Sélectionnez un composant Métrique.

2. Définir source de données sur Avonni Query Data Source. Créez une requête :

   • Objet : enregistrement Opportunité

   • Champs : Sélectionnez seulement sélectionner Montant.

   • Fonction d'agrégation : SOMME

3. Ajoutez un filtre réactif à la requête :

   • Champ : AccountId

   • Opérateur : dans

   • Valeur : !DataTableApiName.selectedRowsKeyValue (remplacez DataTableApiName par le nom API de votre Tableau de données).

4. Définissez le libellé de la Métrique (par ex., "Montant total") et ajustez le format.

5. Répétez pour les autres Métriques, en changeant le libellé et la fonction d'agrégation selon les besoins.

Étape 8 : Styliser le composant métrique

Étape 9 : Activer et ajouter votre composant dynamique à une page

Félicitations ! Vous avez construit votre premier composant dynamique Avonni. Maintenant, activons-le et ajoutons-le à une page Salesforce afin que les utilisateurs puissent le voir.

1. Activer le composant

   • Assurez-vous que votre composant dynamique Avonni est activé. Seuls les composants activés peuvent être ajoutés aux pages.

2. Aller à la page cible

   • Dans Salesforce, accédez à la page d'application ou à la page d'enregistrement spécifique où vous souhaitez afficher votre nouveau composant. Par exemple, vous pouvez ouvrir un enregistrement de compte spécifique sur l'onglet "Comptes".

3. Ouvrir Lightning App Builder

   • Cliquez sur l'icône Configuration (généralement dans le coin supérieur droit de Salesforce).

   • Sélectionnez Modifier la page. Cela ouvre le Lightning App Builder, où vous pouvez personnaliser la mise en page de la page.

4. Trouvez votre composant

   • Regardez le panneau de gauche dans le Lightning App Builder, qui répertorie les composants disponibles.

   • Faites défiler vers le bas jusqu'à la section Personnalisée Votre composant dynamique Avonni sera listé ici.

5. Glisser-déposer

   • Cliquez et faites glisser votre composant dynamique Avonni depuis la liste vers l'emplacement souhaité dans la mise en page. Vous pouvez le placer dans n'importe quelle zone désignée pour les composants.

6. Confirmer la sélection

   • Une fois le composant placé, un panneau de propriétés apparaîtra sur le côté droit de l'App Builder. Sélectionnez le spécifique composant dynamique Avonni que vous souhaitez afficher dans la liste disponible. Cela garantit que le bon composant est chargé, surtout si vous avez plusieurs composants Avonni portant des noms similaires.

7. Enregistrer et activer la page (Important !) :

   • Cliquez sur Enregistrer dans l'App Builder.

Améliorez vos compétences !

Félicitations! Vous avez terminé le démarrage rapide et disposez d'un composant dynamique Avonni fonctionnel. Il est maintenant temps d'explorer l'ensemble des fonctionnalités.

Découvrez nos projets guidés pour devenir un maître constructeur 👇

Avonni Projects

Prochaines étapes :

• Explorez la bibliothèque complète de composants pour voir ce qui est possible

• Rejoignez notre communauté Trailblazer pour voir ce que les autres construisent

Bloqué ou des questions ?

Si vous avez rencontré des problèmes pendant ce tutoriel ou si vous souhaitez présenter ce que vous avez construit :

Rejoignez notre groupe de la communauté Trailblazer où vous pouvez :

• Partager des captures d'écran de votre composant pour obtenir des retours

• Voir des variantes de ce tutoriel que d'autres ont créées

• Poser des questions sur les prochaines étapes de votre parcours d'apprentissage

• Obtenir de l'inspiration pour votre prochain projet de composant dynamique

De nombreux concepteurs partagent leurs premiers composants dans la communauté — c'est un excellent moyen d'obtenir du soutien et d'apprendre d'autres personnes qui sont sur le même chemin !