> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-kanban.md). # AX - Kanban ## Aperçu **AX - Kanban** est un composant Experience Cloud qui affiche des enregistrements Salesforce sous forme de cartes déplaçables organisées en colonnes de flux de travail sur les pages Experience Sites. Utilisez-le pour permettre aux utilisateurs du portail de visualiser et de gérer des flux de travail—comme les statuts des cas de support, les phases de projet ou les étapes d’approbation. Les utilisateurs déplacent les cartes entre les colonnes pour mettre à jour les valeurs des enregistrements, tandis que vous contrôlez quels champs apparaissent sur les cartes et quelles valeurs de liste de sélection définissent les colonnes. Configurez tout dans Experience Builder sans code. Idéal pour les portails de support client affichant l’avancement des cas, les portails partenaires gérant les étapes des affaires, les espaces de collaboration de projet, ou partout où les utilisateurs du portail ont besoin d’une gestion visuelle des flux de travail.
{% hint style="info" %} **Voir dans un projet réel** [Tableau des annonces](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/listings-board): Un tableau des annonces par étape, une ligne par agent, totaux par colonne. {% endhint %} ## Démarrage Utilisez ce tutoriel simple pour apprendre les bases du composant Kanban et commencer à créer vos cas d’usage. {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} ## Configuration ### Source de données Cette étape essentielle de la configuration de votre composant Avonni Kanban établit la connexion entre votre tableau Kanban et les données pertinentes de votre environnement Salesforce.
Voici comment cela fonctionne : * **Sélection de l’objet :** Commencez par choisir l’objet Salesforce spécifique (par ex. Comptes, Opportunités, objets personnalisés, etc.) qui contient les données que votre tableau Kanban doit afficher. * **Filtrage facultatif :** Si vous souhaitez n’afficher qu’un sous-ensemble des données de l’objet sélectionné, utilisez la fonction de filtrage pour définir des conditions spécifiques. Par exemple, vous pourriez filtrer pour afficher uniquement les opportunités « Ouvertes » ou les comptes d’une certaine région. * **Regroupement (facultatif) :** Regroupez vos données pour organiser efficacement votre tableau Kanban. Par exemple, regrouper les opportunités par « Étape » peut créer des colonnes pour « Prospection », « Négociation », etc. * **Tri :** Sélectionnez un champ et une direction « Trier par » (croissant ou décroissant) pour déterminer l’ordre d’affichage des cartes Kanban. * **Champs supplémentaires :** Si vous devez inclure des champs dans votre Kanban qui ne sont pas directement utilisés pour l’affichage ou les interactions, ajoutez-les dans la section « Champs supplémentaires ». C’est particulièrement utile pour les champs que vous souhaitez rendre recherchables dans la barre de recherche du Kanban. #### **Points clés** * Le choix de la bonne source de données garantit que votre Kanban affiche les informations les plus pertinentes pour vos utilisateurs. * Le filtrage et le regroupement simplifient le tableau, facilitant la visualisation et la gestion d’éléments de travail spécifiques. ### Mappage des données La section « Mappages de données » établit une connexion précise entre vos données Salesforce et les éléments visuels de votre tableau Kanban. Voici pourquoi c’est crucial : * **Affichage précis :** Les mappages de données garantissent que les informations extraites des champs Salesforce s’affichent correctement sur les cartes Kanban et dans les colonnes du tableau. Par exemple, vous pouvez associer le champ Salesforce « Opportunity Name » au titre de chaque carte Kanban. * **Fonctionnalité :** Les mappages contrôlent aussi la manière dont les utilisateurs interagissent avec le tableau Kanban. Par exemple, associer un champ « Statut » aux colonnes Kanban permet aux utilisateurs de glisser-déposer des cartes pour mettre à jour directement le statut dans le tableau. #### **Comment cela fonctionne** 1. **Sélectionnez un champ Salesforce** depuis votre source de données configurée. 2. **Associez-le à un attribut Kanban** tel que le titre de la carte, la description, le nom de la colonne, etc. 3. **Répétez ce processus** pour tous les champs essentiels que vous souhaitez inclure sur le tableau Kanban ### Paramètres du tableau et des cartes **Masquer l’en-tête de colonne** masque les en-têtes de colonne, **Surligner au clic** surligne la carte cliquée, et **Lecture seule** désactive le glisser-déposer et les modifications en ligne. L’en-tête prend en charge un **Nom de l’icône d’en-tête** et **Taille de l’icône**, une légende, et **L’en-tête est joint** pour s’aligner parfaitement avec le tableau en dessous. **Attributs de regroupement** contrôlent la manière dont les enregistrements sont regroupés en colonnes — état réduit, masquage du groupe indéfini, affichage des sous-groupes vides et libellé du groupe indéfini. **Direction de l’ordre des colonnes** définit l’ordre des colonnes (`par défaut`, `asc`, `desc`, ou `personnalisé`), et **Attributs de synthèse** configurent un résumé par colonne (par exemple la somme d’un champ). **Attributs de l’avatar**, **Attributs de l’image**, et **Attributs de disposition des champs** stylisent l’avatar, l’image et la disposition des champs de chaque carte. ## Interactions Cette section vous permet de personnaliser la manière dont les utilisateurs interagissent avec vos cartes Kanban, rendant le tableau plus dynamique et réactif. ### **Lien vers** * Définissez ce qui se passe lorsqu’un utilisateur clique sur un lien spécifique dans une carte Kanban. * **Utilisations courantes :** Accéder à une page de détail d’enregistrement, ouvrir un site web externe ou déclencher un flux Salesforce. ### **Au clic** * Déterminez les actions qui se produisent lorsqu’un utilisateur clique n’importe où sur une carte Kanban. * **Utilisations courantes :** Développez la carte pour plus de détails, ouvrez une fenêtre modale ou lancez un processus.
Type d’interactionDescription
Afficher un toastAffiche une brève notification contextuelle à l’écran, fournissant un retour rapide ou une information après le clic sur un repère de carte.
NaviguerRedirige l’utilisateur vers une autre page de votre site ou URL, en l’orientant vers des informations plus détaillées sur l’emplacement cliqué.
Ouvrir la modale d’alerteOuvre une fenêtre modale contenant un message d’alerte, présentant des informations importantes ou des avertissements concernant l’emplacement sélectionné.
Ouvrir la confirmationDéclenche une boîte de dialogue de confirmation, utilisée pour les actions qui nécessitent une confirmation supplémentaire de l’utilisateur, comme la participation à un événement.
Ouvrir la boîte de dialogue du fluxOuvre une boîte de dialogue qui exécute un flux Salesforce, lançant des workflows ou des processus liés à l’emplacement cliqué.
## Style {% tabs %} {% tab title="Taille" %} * **Largeur :** Contrôle la largeur horizontale totale du tableau Kanban. * **Hauteur :** Contrôle la hauteur verticale totale du tableau Kanban. * **Débordement :** Détermine la façon dont le contenu est géré s’il dépasse les dimensions du tableau (les options peuvent inclure « visible », « hidden » ou « scroll »). {% endtab %} {% tab title="Bordure" %} * **Taille :** Épaisseur de la bordure autour de l’ensemble du tableau Kanban. * **Style :** Apparence de la bordure (par ex. solide, pointillée). * **Couleur :** Couleur de la bordure. * **Rayon :** Degré d’arrondi des coins du tableau. {% endtab %} {% tab title="En-tête" %} * **Couleur d’arrière-plan :** Définit la couleur d’arrière-plan de la section d’en-tête du Kanban. * **Rembourrage (haut, bas, gauche) :** Contrôle l’espacement interne dans l’en-tête. * **Marge inférieure :** Crée un espace entre l’en-tête et les colonnes en dessous. {% endtab %} {% tab title="Bordure de l’en-tête" %} * **Couleur, taille, style, rayon de la bordure :** Personnalisez l’apparence d’une bordure dans l’en-tête (probablement pour la séparer visuellement). * **Bordure inférieure (est jointe) :** Ces attributs contrôlent probablement si la bordure inférieure se fond visuellement avec les en-têtes de colonne. {% endtab %} {% tab title="Titre/légende de l’en-tête" %} * **Couleur, taille de police, graisse, style :** Contrôlez l’apparence du titre de l’en-tête et de tout texte de légende. {% endtab %} {% tab title="Avatar de l’en-tête" %} * **Couleur d’arrière-plan/au premier plan :** Définissez les couleurs de l’élément avatar. * **Utilitaire de couleur au premier plan :** Permet probablement d’utiliser des classes utilitaires de couleur prédéfinies. * **Rayon de bordure :** Contrôle le degré d’arrondi de l’élément avatar. {% endtab %} {% tab title="En-tête de colonne" %} * **Couleur d’arrière-plan du chemin :** Couleur de la zone d’arrière-plan où s’affiche le chemin de progression de la colonne. * **Attributs du texte/de la police du résumé :** Contrôlez l’apparence de tout texte récapitulatif dans l’en-tête de colonne. {% endtab %} {% tab title="Dimensionnement des colonnes" %} * **Largeur min./max. :** Définissez la largeur minimale et maximale autorisée pour les colonnes, ce qui influence leur redimensionnement. {% endtab %} {% tab title="Carte" %} * **Couleurs d’arrière-plan :** Couleurs pour les états normal, survol et focus. * **Couleurs de bordure :** Couleurs pour les états normal et focus. * **Attributs du titre/de la description/du texte d’information et de la police :** Contrôlez l’apparence de divers éléments de texte dans une carte. * **Limitation du nombre de lignes :** Limite le nombre de lignes affichées pour les titres/descriptions afin d’éviter le débordement. {% endtab %} {% endtabs %} ### **Notes importantes** * **Spécificité :** Les attributs de style exacts peuvent varier légèrement selon l’implémentation d’Avonni. * **Hiérarchie visuelle :** Utilisez ces attributs de manière stratégique pour créer une hiérarchie visuelle claire et guider le regard de l’utilisateur ## Cas d’usage ### Exemple 1 : Kanban des opportunités partenaires {% @arcade/embed url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Offrez à vos partenaires une vue claire et interactive de leur pipeline commercial, directement dans votre portail Experience Cloud. Grâce à un tableau Kanban en glisser-déposer, les utilisateurs partenaires peuvent visualiser, gérer et faire avancer leurs opportunités sans jamais quitter le portail. *** #### **Ce que vous obtiendrez** * **Visibilité renforcée pour les partenaires :** Offrez aux utilisateurs partenaires une vue d’ensemble visuelle en temps réel de leur pipeline d’opportunités organisé par étape * **Gestion intuitive du pipeline :** Activez la fonctionnalité de glisser-déposer afin que les partenaires puissent mettre à jour les étapes des opportunités sans effort * **Aperçu instantané des affaires :** Affichez les détails clés comme le nom du compte, le montant de l’affaire et la date de clôture directement sur chaque carte *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant Kanban** * Faites glisser le composant AX Kanban dans votre canevas Experience Cloud Builder {% endstep %} {% step %} #### **Configurez la source de données** * Définissez le nom d’API de l’objet sur `Opportunity` {% endstep %} {% step %} #### **Configurez les mappages de données** * Définissez le champ clé sur `Id` * Définissez le nom du champ de regroupement sur `StageName` * Définissez le type d’enregistrement sur `Master` * Définissez le nom du champ de synthèse sur `Amount` {% endstep %} {% step %} #### **Personnalisez les cartes** * Définissez le titre sur `Name` * Définissez la description sur `Account.Name` * Définissez la date de début sur `CreatedDate` * Définissez la date d’échéance sur `CloseDate` * Ajouter `Amount` comme champ affiché {% endstep %} {% step %} #### **Personnalisez l’en-tête** * Définissez le titre de l’en-tête sur `Kanban des opportunités` * Définissez l’icône de l’en-tête sur `standard:opportunity` {% endstep %} {% step %} #### **Prévisualisez votre tableau** * Examinez la mise en page dans Experience Cloud Builder pour confirmer que votre configuration s’affiche et fonctionne comme prévu {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/59111ebd858236012ade75015f49a0677a319c34" %} [AX - Onglets](/experience-cloud/experience-cloud-fr/experience-components/ax-tabs.md) {% endcontent-ref %} ### Exemple 2 : Kanban des statuts de cas {% @arcade/embed url="" flowId="XXPy9vrTjP5P3hbCqwTg" %} Offrez à vos clients une visibilité sur leur parcours de support grâce à un tableau Kanban dédié dans votre portail de support. En affichant les cas organisés par statut, les clients peuvent suivre l’avancement en un coup d’œil, ce qui réduit la nécessité de relancer pour obtenir des mises à jour et crée une expérience de support plus fluide et plus transparente. *** #### **Ce que vous obtiendrez** * **Transparence pour les clients :** Permettez aux clients de suivre le statut de chaque cas soumis dans une vue de tableau claire et organisée * **Réduction des appels entrants sur le statut :** Affichez l’avancement de manière proactive afin que les clients passent moins de temps à demander des mises à jour * **Satisfaction accrue du support :** Offrez une expérience soignée et intuitive qui renforce la confiance envers votre équipe de support *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant Kanban** * Faites glisser le composant AX Kanban dans votre canevas Experience Cloud Builder {% endstep %} {% step %} #### **Configurez la source de données** * Définissez le nom d’API de l’objet sur `Cas` {% endstep %} {% step %} #### **Configurez les mappages de données** * Définissez le champ clé sur `Id` * Définissez le nom du champ de regroupement sur `Statut` {% endstep %} {% step %} #### **Personnalisez les cartes** * Définissez le titre sur `Numéro` * Définissez la description sur `Contact.Name` * Définissez la date de début sur `CreatedDate` {% endstep %} {% step %} #### **Personnalisez l’en-tête** * Définissez la variante sur `Chemin` * Définissez le titre de l’en-tête sur `Kanban des cas` * Définissez l’icône de l’en-tête sur `standard:case` {% endstep %} {% step %} #### **Prévisualisez votre tableau** * Examinez la mise en page dans Experience Cloud Builder pour confirmer que votre configuration s’affiche et fonctionne comme prévu {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-kanban.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.