# 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 des sites Experience.

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 les champs affichés sur les cartes et les valeurs de liste de sélection qui définissent les colonnes. Configurez tout dans Experience Builder sans code.

Parfait 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 tout endroit où les utilisateurs du portail ont besoin d'une gestion visuelle des flux de travail.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUTzhoKQdk4TpwMrX10vt%2F2024-04-22_20-46-23.png?alt=media&#x26;token=21e0f18e-eb2b-426b-b646-901755482f9c" alt=""><figcaption></figcaption></figure>

## **Se connecter aux données Salesforce**

Cette étape essentielle de configuration de votre composant Avonni Kanban établit la connexion entre votre tableau Kanban et les données pertinentes de votre environnement Salesforce.&#x20;

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FYBXNVnP2WbYWrsJCqbpK%2F2024-04-22_20-35-17.png?alt=media&#x26;token=ed325976-c447-48c4-b2b6-73cabf0e4199" alt=""><figcaption></figcaption></figure>

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 sur votre tableau Kanban.
* **Filtrage optionnel :** Si vous souhaitez n'afficher qu'un sous-ensemble de données de l'objet sélectionné, utilisez la fonction 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 (optionnel) :** 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 « Trier par » et une direction (ascendante ou descendante) pour déterminer l'ordre d'apparition des cartes Kanban.
* **Champs supplémentaires :** Si vous avez besoin d'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 ». Cela est particulièrement utile pour les champs que vous souhaitez rendre consultables via 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, facilitant la visualisation et la gestion d'éléments de travail spécifiques.

## **Configuration des mappages de données** <a href="#data-mappings-configuration" id="data-mappings-configuration"></a>

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 sont correctement affichées 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 également la façon dont les utilisateurs interagissent avec le tableau Kanban. Par exemple, mapper un champ « Statut » aux colonnes Kanban permet aux utilisateurs de glisser-déposer des cartes pour mettre à jour le statut directement dans le tableau.

### **Comment cela fonctionne**

1. **Sélectionnez un champ Salesforce** à partir de votre source de données configurée.
2. **Mappez-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

## Actions et interactions des é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 au sein d'une carte Kanban.
* **Utilisations courantes :** Naviguer vers une page de détail d'enregistrement, ouvrir un site externe ou déclencher un Flow 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 initier un processus.

<table><thead><tr><th width="228">Type d'interaction</th><th>Description</th></tr></thead><tbody><tr><td><a href="../panneau-des-proprietes/interactions/afficher-un-toast"><strong>Afficher un toast</strong></a></td><td>Affiche une brève notification pop-up à l'écran, fournissant un retour ou une information rapide après le clic sur un marqueur de carte.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/naviguer"><strong>Naviguer</strong></a></td><td>Redirige l'utilisateur vers une autre page de votre site ou une URL, le guidant vers des informations plus détaillées sur l'élément cliqué.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/ouvrir-une-fenetre-dalerte"><strong>Ouvrir une alerte modale</strong></a></td><td>Ouvre une fenêtre modale avec un message d'alerte, présentant des informations importantes ou des avertissements concernant l'élément sélectionné.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/ouvrir-une-confirmation"><strong>Ouvrir une confirmation</strong></a></td><td>Déclenche une boîte de dialogue de confirmation, utilisée pour des actions nécessitant une confirmation supplémentaire de l'utilisateur, comme la participation à un événement.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/ouvrir-la-boite-de-dialogue-flow"><strong>Ouvrir un dialogue Flow</strong></a></td><td>Ouvre une boîte de dialogue qui exécute un Flow Salesforce, initiant des workflows ou des processus liés à l'élément cliqué.</td></tr></tbody></table>

## Apparence / Style

### **Taille**

* **Largeur :** Contrôle la largeur horizontale globale du tableau Kanban.
* **Hauteur :** Contrôle la hauteur verticale globale du tableau Kanban.
* **Débordement :** Dicte la manière dont 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. solide, 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 de fond de la section d'en-tête du Kanban.
* **Rembourrage (haut, bas, gauche) :** Contrôle l'espacement interne de l'en-tête.
* **Marge inférieure :** Crée de l'espace entre l'en-tête et les colonnes en dessous.

### **Bordure de l'en-tête**

* **Couleur, taille, style, rayon de la bordure :** Personnalisez l'apparence d'une bordure au sein de 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, poids de la police, style de police :** Contrôlent l'apparence du titre de l'en-tête et de tout texte de légende.

### **Avatar de l'en-tête**

* **Couleur de fond/couleur de premier plan :** Définissez les couleurs de l'élément avatar.
* **Utilitaire de couleur de premier plan :** Permet probablement d'utiliser des classes d'utilité 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 de fond du chemin :** Couleur de la zone de fond où le chemin de progression de la colonne est affiché.
* **Texte de synthèse/Attributs de police :** Contrôlent l'apparence de tout texte de synthèse dans l'en-tête de colonne.

### **Dimensionnement des colonnes**

* **Largeur minimale/Maximale :** Définit la largeur minimale et maximale autorisée pour les colonnes, influençant leur redimensionnement.

### **Carte**

* **Couleurs de fond :** Couleurs pour les états normal, survol et focus.
* **Couleurs de bordure :** Couleurs pour les états normal et focus.
* **Titre/Description/Informations Texte & Attributs de police :** Contrôlent l'apparence des différents éléments de texte au sein d'une carte.
* **Limitation de ligne :** Limite le nombre de lignes affichées pour les titres/descriptions afin d'éviter le débordement.

### **Notes importantes**

* **Spécificité :** Les attributs de style exacts peuvent varier légèrement en fonction de 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
