# AX - Kanban ## Vue d’ensemble **AX - Kanban** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme de cartes déplaçables, organisées en colonnes de workflow sur les pages des sites Experience. Utilisez-le pour permettre aux utilisateurs du portail de visualiser et de gérer des workflows — comme les statuts des demandes 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 les champs qui apparaissent sur les cartes et les valeurs de liste de sélection qui définissent les colonnes. Configurez tout dans Experience Builder sans code. Idéal pour les portails de support client affichant l’avancement des dossiers, les portails partenaires gérant les étapes des opportunités, les espaces de collaboration de projet, ou tout autre cas où les utilisateurs du portail ont besoin d’une gestion visuelle des workflows.
*** ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Kanban et commencer à créer vos cas d’usage. {% @arcade/embed flowId="SKeLCf1CoTnJZHTYhLOF" url="" %} *** ## Se connecter aux données Salesforce 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 vous souhaitez afficher dans votre tableau Kanban. * **Filtrage facultatif :** Si vous souhaitez afficher uniquement un sous-ensemble des données de l’objet sélectionné, utilisez la fonctionnalité de filtrage pour définir des conditions spécifiques. Par exemple, vous pouvez filtrer pour n’afficher que 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 telles que « Prospection », « Négociation », etc. * **Tri :** Sélectionnez un champ « Trier par » et un sens (croissant ou décroissant) pour déterminer l’ordre d’affichage des cartes Kanban. * **Champs supplémentaires :** Si vous devez inclure dans votre Kanban des champs 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** * Choisir 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, ce qui facilite la visualisation et la gestion d’éléments de travail spécifiques. *** ## Configuration des mappages de 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 récupérées depuis les champs Salesforce s’affichent correctement sur les cartes Kanban et dans les colonnes du tableau. Par exemple, vous pouvez mapper le champ Salesforce « Nom de l’opportunité » 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, mapper un champ « Statut » aux colonnes Kanban permet aux utilisateurs de glisser-déposer les cartes pour mettre à jour le statut directement dans le tableau. ### **Comment ça 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 dans le tableau Kanban *** ## Actions et interactions sur les éléments 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 :** Naviguer vers une page de détails d’un 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évelopper la carte pour plus de détails, ouvrir une fenêtre modale ou lancer un processus.
Type d’interactionDescription
Afficher un toastAffiche une brève notification contextuelle à l’écran, fournissant un retour rapide ou une information après avoir cliqué sur un marqueur 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 une fenêtre modale d’alerteOuvre une fenêtre modale avec 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 nécessitant une confirmation supplémentaire de l’utilisateur, comme la présence à un événement.
Ouvrir la boîte de dialogue FlowOuvre une boîte de dialogue qui exécute un flux Salesforce, en lançant des workflows ou des processus liés à l’emplacement cliqué.
*** ## Apparence de style ### **Taille** * **Largeur :** Contrôle la largeur horizontale globale du tableau Kanban. * **Hauteur :** Contrôle la hauteur verticale globale du tableau Kanban. * **Débordement :** Détermine comment le contenu est géré s’il dépasse les dimensions du tableau (les options peuvent inclure « visible », « hidden » ou « scroll »). ### **Bordure** * **Taille :** Épaisseur de la bordure autour de l’ensemble du tableau Kanban. * **Style :** Apparence de la bordure (par ex. pleine, en pointillés). * **Couleur :** Couleur de la bordure. * **Rayon :** Degré d’arrondi des coins du tableau. ### **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. * **Marge intérieure (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. ### **Bordure de l’en-tête** * **Couleur, taille, style, rayon de la bordure :** Personnalise 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. ### **Titre/légende de l’en-tête** * **Couleur, taille de police, graisse, style de police :** Contrôlez l’apparence du titre de l’en-tête et de tout texte de légende. ### **Avatar de l’en-tête** * **Couleur d’arrière-plan/premier plan :** Définissez les couleurs de l’élément avatar. * **Utilitaire de couleur de 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. ### **En-tête de colonne** * **Couleur d’arrière-plan du chemin :** Couleur de la zone d’arrière-plan où le chemin de progression de la colonne est affiché. * **Texte récapitulatif/attributs de police :** Contrôlez l’apparence de tout texte récapitulatif dans l’en-tête de colonne. ### **Dimensionnement des colonnes** * **Largeur min/max :** Définissez la largeur minimale et maximale autorisée pour les colonnes, ce qui influence leur redimensionnement. ### **Carte** * **Couleurs d’arrière-plan :** Couleurs pour les états normal, survol et focus. * **Couleurs de bordure :** Couleurs pour les états normal et focus. * **Titre/description/texte d’information et attributs de police :** Contrôlez l’apparence des différents éléments de texte dans une carte. * **Limite de lignes :** Limite le nombre de lignes affichées pour les titres/descriptions afin d’éviter tout débordement. ### **Remarques 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 *** ## Exemples de cas d’usage ### Exemple 1 : Kanban d’opportunités partenaires {% @arcade/embed flowId="JQJEWO5OUQQf4fSb0GfD" url="" %} Offrez à vos partenaires une vue claire et interactive de leur pipeline commercial, directement dans votre portail Experience Cloud. Avec 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 allez obtenir** * **Visibilité renforcée pour les partenaires :** Offrez aux utilisateurs partenaires une vue d’ensemble visuelle et en temps réel de leur pipeline d’opportunités organisé par étape * **Gestion intuitive du pipeline :** Permettez la fonctionnalité de glisser-déposer afin que les partenaires puissent mettre à jour les étapes des opportunités sans effort * **Compréhension des opportunités en un coup d’œil :** Affichez directement sur chaque carte des détails clés comme le nom du compte, le montant de l’affaire et la date de clôture *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajouter le composant Kanban** * Faites glisser le composant AX Kanban sur le canevas de votre Experience Cloud Builder {% endstep %} {% step %} #### **Configurer la source de données** * Définissez le nom de l’API de l’objet sur `Opportunité` {% endstep %} {% step %} #### **Configurer 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 %} #### **Personnaliser 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 %} #### **Personnaliser 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** * Vérifiez la mise en page dans Experience Cloud Builder pour confirmer que votre configuration a l’apparence et le comportement attendus {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="ax-onglets" %} [ax-onglets](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-onglets) {% endcontent-ref %} ### Exemple 2 : Kanban du statut des cas {% @arcade/embed flowId="XXPy9vrTjP5P3hbCqwTg" url="" %} 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 le besoin de relancer pour obtenir des mises à jour et crée une expérience de support plus fluide et plus transparente. *** #### **Ce que vous allez obtenir** * **Transparence côté client :** Permettez aux clients de suivre le statut de chaque dossier soumis dans une vue de tableau claire et organisée * **Réduction des appels entrants pour demander le statut :** Montrez proactivement l’avancement afin que les clients passent moins de temps à chercher des mises à jour * **Amélioration de la satisfaction du support :** Offrez une expérience soignée et intuitive qui renforce la confiance dans votre équipe de support *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajouter le composant Kanban** * Faites glisser le composant AX Kanban sur le canevas de votre Experience Cloud Builder {% endstep %} {% step %} #### **Configurer la source de données** * Définissez le nom de l’API de l’objet sur `Cas` {% endstep %} {% step %} #### **Configurer les mappages de données** * Définissez le champ clé sur `Id` * Définissez le nom du champ de regroupement sur `Statut` {% endstep %} {% step %} #### **Personnaliser 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 %} #### **Personnaliser 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** * Vérifiez la mise en page dans Experience Cloud Builder pour confirmer que votre configuration a l’apparence et le comportement attendus {% endstep %} {% endstepper %}