Kanban

Le Kanban Avonni fournit une interface visuelle par glisser-déposer pour gérer les enregistrements Salesforce à travers les étapes d’un flux de travail. Idéal pour la gestion de projet, le suivi des ventes et le service client.

Connectez-vous à vos données

Avant que votre tableau Kanban puisse afficher quelque chose d'utile, il doit savoir où récupérer ses données. Avonni propose des options flexibles pour connecter votre tableau à diverses sources de données :

Mapper les données sur votre Kanban

Une fois que vous avez connecté votre composant Avonni Kanban à une source de données (par ex., une source de données Avonni Query), vous devez mapper champs de vos données aux différents éléments visuels du tableau Kanban. Cela indique au composant quel données afficher et où pour les afficher.

Regroupement des colonnes de votre Kanban

Le Nom du champ de groupe la propriété est la la plus importante paramètre de mappage. Il détermine quel champ de votre source de données sera utilisé pour créer les colonnes de votre tableau Kanban.

• Comment cela fonctionne : Le composant Kanban examine toutes les valeurs uniques dans le champ que vous sélectionnez pour Nom du champ de groupe. Chaque valeur unique devient une colonne distincte sur votre tableau.

• Exemple (Statut de la tâche) : Pour créer un tableau Kanban où les tâches sont regroupées par leur Statut (par ex., « Non commencé », « En cours », « Terminé ») :

  1. Assurez-vous que votre source de données récupère Tâche enregistrements et inclut le Statut .

  2. Sélectionnez le composant Kanban sur la zone de travail.

  3. Dans le panneau Propriétés, trouvez la Nom du champ de groupe .

  4. Cliquez sur le sélecteur de ressource et choisissez le Statut champ de votre source de données.

---

Sous-regroupement à l'intérieur des colonnes

Pour ajouter un second niveau d'organisation (souvent appelé « voies » ou « swimlanes ») à l'intérieur de chaque colonne Kanban, utilisez le Nom du champ de sous-groupe .

Par exemple, pour regrouper les tâches d'abord par Statut puis par Priorité, vous configureriez :

• Nom du champ de groupe sur Statut.

• Nom du champ de sous-groupe sur Priorité.

Cela crée un tableau avec des colonnes de Statut qui sont ensuite divisées en sections horizontales par Priorité.

---

Résumé des données des colonnes

Pour fournir un aperçu rapide des valeurs clés, vous pouvez afficher un total en haut de chaque colonne Kanban. Cette fonctionnalité calcule et affiche automatiquement la somme d'un champ numérique, monétaire ou en pourcentage spécifique pour toutes les cartes de cette colonne.

Étapes de configuration :

1. Assurez-vous que le regroupement est défini : Confirmez que votre Nom du champ de groupe principal est défini (par ex., StageName pour les Opportunités).

2. Trouvez la propriété de synthèse : Dans les propriétés du composant, localisez le Nom du champ à résumer paramètre.

3. Sélectionnez le champ à additionner : Dans la liste déroulante, choisissez le Numérique, Monétaire ou Pourcentage champ que vous souhaitez totaliser pour chaque colonne. Seuls les champs de ces types de données spécifiques seront disponibles à la sélection.

Exemple : additionner les montants des opportunités par étape

Imaginez que votre tableau Kanban affiche des Opportunités regroupées par leur StageName. Vous souhaitez voir le chiffre d'affaires potentiel total dans chaque étape.

• Action : Sélectionnez le PDF Viewer. Nom du champ à résumer propriété, vous sélectionneriez le Montant champ (qui est un champ monétaire).

• Résultat : L'en-tête de chaque colonne StageName (par ex., « Négociation/Examen ») affichera désormais automatiquement le total Montant champ pour toutes les cartes d'Opportunité dans cette colonne. Cela vous donne un aperçu instantané de la valeur de votre pipeline à chaque étape.

---

Configuration du contenu des cartes

Cette section contrôle quelles informations sont affichées sur chaque carte au sein du tableau Kanban.

• Image de couverture (facultative) : Si votre source de données inclut un champ contenant des URL d'image, vous pouvez mapper ce champ à la Image de couverture propriété pour afficher une image sur chaque carte.

• Titre : Sélectionnez le champ de votre source de données qui doit être affiché comme titre de chaque carte. Pour notre exemple de Tâche, vous mapperiez probablement cela sur le Sujet .

Pour configurer le contenu des cartes de notre Kanban Tâche :

1. Sélectionnez le composant Kanban : Cliquez sur le composant Kanban dans la zone de travail.

2. Trouvez la section « Attributs de la carte » : Dans le panneau Propriétés, localisez la section pour configurer les attributs de la carte (cela peut être intitulé « Attributs de la carte », « Affichage de l'élément », ou similaire).

3. Mappez le titre :

   • Cliquez sur le sélecteur de ressource à côté du Titre .

   • Sélectionnez le Sujet champ de votre source de données.

Vous pourriez ajouter des mappages supplémentaires pour d'autres éléments de la carte (par ex., une description, une date d'échéance) si votre source de données inclut ces champs et si le composant Kanban les prend en charge.

Configuration des filtres du tableau Kanban

Le filtrage permet aux utilisateurs de réduire le nombre de cartes affichées sur le tableau Kanban, ce qui facilite la concentration sur des tâches ou catégories spécifiques. La configuration des filtres dans le composant Avonni Kanban se fait en deux étapes : d'abord, vous activez les champs pouvant être utilisés comme filtres, puis vous décidez comment les contrôles de filtre sont présentés à l'utilisateur.

Étape 1 : activer les champs pour le filtrage

Vous devez d'abord spécifier quels champs de votre source de données sont disponibles pour que les utilisateurs puissent filtrer.

1. Sélectionnez le composant Kanban : Cliquez sur le composant Kanban sur votre zone de travail.

2. Accédez à la section Mappages de données : Trouvez les attributs Filtres.

3. Cliquez dans ce champ et sélectionnez tous les champs que vous souhaitez permettre à vos utilisateurs de filtrer, tels que Priorité, Assigné à, ou Date d'échéance.

Seuls les champs que vous sélectionnez à cette étape apparaîtront dans le menu de filtre pour vos utilisateurs finaux

Étape 2 : configurer les options d'affichage des filtres

Une fois que vous avez activé un ou plusieurs champs comme filtrables, vous pouvez ajuster la manière dont les contrôles de filtre sont présentés à l'utilisateur. Ces paramètres se trouvent dans la principale Filtre section du panneau Propriétés du composant Kanban.

Afficher les filtres dans une fenêtre contextuelle

Par défaut, les filtres activés peuvent s'afficher en ligne au-dessus des colonnes Kanban. Si vous avez plusieurs filtres, cela peut occuper un espace d'écran précieux. Pour créer une interface plus propre et compacte, vous pouvez les regrouper dans un seul bouton.

• Paramètre : Afficher en tant que popover (Booléen - Case à cocher)

• Comment cela fonctionne : Activez cette option pour remplacer la rangée de filtres individuels par un seul bouton de filtre. Lorsqu'un utilisateur clique sur ce bouton, une fenêtre contextuelle (également appelée popover) apparaît, contenant tous les contrôles de filtre disponibles.

Rationaliser les choix de filtres de liste de sélection

Pour offrir une expérience plus intelligente et conviviale lors du filtrage par listes de sélection, vous pouvez masquer les options qui ne donneraient aucun résultat.

• Paramètre : Masquer les valeurs vides de la liste de sélection (Booléen - Case à cocher)

• Comment cela fonctionne : Lorsque ceci est activé, tout filtre basé sur un champ de type liste de sélection masquera automatiquement les choix qui ne sont présents dans aucun des enregistrements actuellement chargés sur le tableau Kanban. Cela empêche les utilisateurs de sélectionner une valeur de filtre qui n'afficherait qu'une colonne vide.

En combinant ces paramètres, vous pouvez créer une expérience de filtrage robuste, influente et adaptée qui permet aux utilisateurs de trouver rapidement l'information exacte dont ils ont besoin sur le tableau Kanban.

Ajouter des actions et des interactions

Pour transformer votre tableau Kanban d'un simple affichage visuel en un outil fonctionnel et interactif, vous pouvez configurer Actions et InteractionsLes actions sont les éléments cliquables (comme des boutons), et les interactions définissent ce qui se passe lorsqu'un utilisateur agit (par exemple cliquer sur un bouton ou faire glisser une carte).

Vous pouvez les configurer dans la Interactions section des propriétés du composant Kanban.

Actions au niveau de la carte

Cela vous permet d'ajouter des boutons d'action spécifiques ou un menu d'options à chaque carte du tableau.

Comment cela fonctionne :

1. Définir les actions de la carte : D'abord, dans la Attributs de la carte section des propriétés du Kanban, vous ajoutez vos éléments d'action. Pour chacun, vous définirez un Étiquette (par ex., « Voir les détails », « Modifier ») et un Name (par ex., view_details, edit_record). Ceux-ci apparaîtront comme des boutons ou un menu sur chaque carte.

2. Configurer l'interaction : Ensuite, sélectionnez le composant Kanban et allez dans la Interactions section. Ajoutez la logique à l' On Item Action Click événement. Ici, vous configurerez des conditions pour vérifier quelle action Name a été cliquée puis déclencher la réponse appropriée (comme Maps vers la page de l'enregistrement ou Ouvrir la boîte de dialogue Flow pour lancer un écran de modification).

Automatisation par glisser-déposer

C'est l'une des fonctionnalités les plus puissantes et les plus économes en temps du tableau Kanban. Par défaut, lorsqu'un utilisateur déplace une carte vers une nouvelle colonne, le composant Kanban tente automatiquement de mettre à jour le champ de regroupement de l'enregistrement (par ex., en changeant le Statut ou StageName pour correspondre à la valeur de la nouvelle colonne).

Le On Item Drop l'interaction vous permet de définir actions automatisées supplémentaires qui devraient se déclencher que l'utilisateur ait réussi à capturer une ou plusieurs images et confirmé l'action (par ex. : clique sur "Terminé" ou "Enregistrer" dans l'interface caméra, surtout si une fois que cette mise à jour réussie par glisser-déposer est terminée.

• Cet événement déclenche généralement Se déclenche au moment où un utilisateur dépose avec succès une carte dans une nouvelle colonne et après que la mise à jour de l'enregistrement sous-jacent a été traitée.

• Cas d'utilisation courants (À quoi ça sert) :

  • Fournir un retour à l'utilisateur : Utilisez une interaction Afficher Toast interaction pour confirmer immédiatement le changement (par ex., « Étape de l'opportunité mise à jour en 'Négociation'. »).

  • Actualiser d'autres composants : Utilisez Actualiser toutes les requêtes pour mettre à jour d'autres composants sur la même page (comme des graphiques ou un tableau de données) qui résument les données affichées dans le Kanban.

  • Enregistrer des activités : Déclencher un Flow pour créer un enregistrement d'Activité complété sur l'enregistrement parent, indiquant que son statut a été modifié via le tableau Kanban.

Astuce sur la mise à jour de l'enregistrement

Vous n'avez pas besoin de configurer une interaction pour mettre à jour le statut de l'enregistrement — le Kanban le fait pour vous. Utilisez l' On Item Drop interaction pour construire des automatisations secondaires robustes qui devraient se produire comme résultat d'un utilisateur déplaçant une carte

Actions au niveau du tableau (On Header Action Click)

Celles-ci concernent des actions qui s'appliquent à l'ensemble du tableau Kanban, pas à une carte spécifique.

• Comment cela fonctionne : Vous ajoutez d'abord des boutons à la En-tête section de l'en-tête du Kanban (par ex., « Nouvelle tâche », « Actualiser »). Ensuite, vous utilisez l' On Header Action Click interaction pour définir ce que fait chacun de ces boutons, comme lancer un Flow pour créer un nouvel enregistrement ou actualiser la source de données pour l'ensemble du Kanban.

En combinant ces différents types d'interactions, vous pouvez créer un outil très efficace et dynamique qui permet aux utilisateurs non seulement de visualiser leur travail mais aussi d'agir directement dessus.

Prise en charge des règles de validation

Il est crucial de savoir que le composant Avonni Kanban respecte vos règles de validation Salesforce existantes.

• Comment cela fonctionne : Lorsqu'un utilisateur déplace une carte vers une nouvelle colonne, le composant tente de mettre à jour l'enregistrement correspondant. Si cette mise à jour enfreint une règle de validation que vous avez configurée dans la configuration Salesforce (par ex., une règle indiquant qu'un champ spécifique doit être rempli avant de passer à une étape particulière), le déplacement sera empêché.

• Retour utilisateur : L'utilisateur verra un message d'erreur, généralement celui que vous avez défini dans la règle de validation Salesforce elle-même, expliquant pourquoi le déplacement n'est pas autorisé. Cela garantit que des changements d'état invalides ne peuvent pas être effectués et que vos données restent cohérentes, le tout directement depuis l'interface Kanban.

Personnaliser votre tableau Kanban

Après avoir connecté votre source de données et défini les regroupements de colonnes, vous pouvez personnaliser la disposition, l'apparence et la fonctionnalité du tableau Kanban. Tous les paramètres se trouvent dans la Définissez ces valeurs dans le lorsque le composant Kanban est sélectionné.

Disposition générale et variante

Cette section contrôle le style d'affichage fondamental de votre tableau Kanban.

• Variante : Choisissez la disposition principale de votre tableau :

  • Base (Par défaut) La disposition Kanban traditionnelle présente des colonnes verticales représentant différentes étapes ou catégories (par ex., « À faire », « En cours », « Terminé »).

  • Chemin: Affiche les étapes sous forme de chemin horizontal en forme de chevrons. C'est excellent pour visualiser la progression linéaire des éléments à travers un processus défini.

• Masquer l'en-tête de la colonne : (Booléen) Pour un aspect plus minimal, activez cette option pour masquer les en-têtes en haut de chaque colonne.

Configuration de l'en-tête

L'en-tête se situe en haut de votre tableau Kanban et fournit un espace pour un titre et des actions au niveau du tableau.

• Titre, légende et icône : Donnez à votre tableau Kanban un Titre clair (par ex., « Tâches du projet »), une Légende facultative pour plus de contexte, et une Nom de l'icône icône pour représenter visuellement l'objectif du tableau.

• Actions d'en-tête : Vous pouvez ajouter des boutons personnalisés à l'en-tête pour déclencher des actions liées à l'ensemble du tableau, comme créer un nouvel élément (par ex., un bouton « Nouvelle tâche » lançant un Flow), actualiser les données, ou exporter des informations.

Affichage des cartes (Attributs des champs)

Contrôlez quelles informations sont affichées sur chaque carte Kanban.

• Ajout de champs : Dans les propriétés du composant, vous pouvez sélectionner quels champs de votre source de données apparaissent sur les cartes. Cela vous permet d'afficher plus de détails que seulement un titre, comme un propriétaire, une date d'échéance ou une priorité.

• Affichage du libellé du champ (Variante): Contrôlez comment les libellés pour ces champs supplémentaires sont affichés sur la carte (par ex., Standard avec le libellé au-dessus de la valeur, ou Libellé masqué pour une vue plus compacte).

Ordre des colonnes

Par défaut, les colonnes apparaissent souvent par ordre alphabétique ou dans l'ordre défini par votre champ de liste de sélection. Vous pouvez remplacer cela avec le Ordre des colonnes .

• Options :

  • Ascendant / Descendant: Trier les colonnes par ordre alphabétique (A-Z ou Z-A).

  • Personnalisé: Cette option puissante vous permet de définir un ordre spécifique non alphabétique pour vos colonnes (par ex., « Backlog », « En cours », « Revue », « Terminé »). Lorsque vous sélectionnez Personnalisé, une interface apparaît, vous permettant de faire glisser les valeurs de colonne dans la séquence souhaitée et de masquer les colonnes que vous ne voulez pas afficher.

Fonctionnalité du tableau

Ces paramètres contrôlent les principales fonctionnalités interactives du tableau Kanban.

• Activer la recherche : (Booléen) Ajoute une zone de recherche à votre tableau Kanban, permettant aux utilisateurs de trouver rapidement des cartes spécifiques en filtrant selon leur terme de recherche.

• Lecture seule : (Booléen) Si activé, cela verrouille le tableau, empêchant les utilisateurs de faire glisser et déposer des cartes pour changer leur statut ou position. Ceci est utile pour créer un affichage en lecture seule.

En utilisant ces options de personnalisation, vous pouvez adapter le composant Avonni Kanban pour créer un outil hautement visuel, fonctionnel et convivial qui correspond parfaitement à votre processus spécifique et aux besoins des utilisateurs.

Style

Vous pouvez peaufiner presque tous les aspects visuels du tableau Avonni Kanban pour l'adapter à votre image de marque et améliorer la lisibilité des données. La plupart des options de style sont configurées à l'aide du Panneau de style ou au sein du Définissez ces valeurs dans ledu composant, vous permettant de créer et d'appliquer des styles réutilisables aux différentes parties du composant.

Disposition générale et espacement

Ces paramètres affectent l'ensemble du conteneur du composant Kanban, contrôlant sa position et son espacement général.

• Marge : Ajustez l'espace en dehors la bordure du tableau Kanban pour séparer, en le distinguant des autres composants sur la page.

• Rembourrage : Contrôlez l'espace à l'intérieur la bordure principale du tableau Kanban, entre le bord et son contenu (comme l'en-tête et les colonnes).

• Taille : Définissez le largeur et hauteur globale du composant pour l'adapter à la mise en page de votre page.

Style de l'en-tête

Personnalisez la zone d'en-tête principale qui se trouve au-dessus des colonnes pour la mettre en valeur.

• Arrière-plan et bordures : Changez la couleur d'arrière-plan de la section d'en-tête ou ajustez ses bordures.

• Style du titre et de la légende : Contrôlez la taille de police, poids de la police (graisse), et couleur du texte pour le titre et la légende afin de créer une hiérarchie visuelle.

• Style de l'icône : Personnalisez la taille et la couleur de l'icône d'en-tête.

Style des colonnes

Contrôlez l'apparence des colonnes individuelles (par ex., « À faire », « En cours », « Terminé »).

• En-tête de colonne : Personnalisez la police, la couleur et l'arrière-plan de l'en-tête de chaque colonne pour les rendre distinctes.

• Corps de colonne : Définir une couleur d'arrière-plan pour la zone où les cartes sont placées dans chaque colonne.

• Bordures : Ajustez le style et la couleur des bordures qui séparent les colonnes.

• Largeur : Définissez la largeur des colonnes pour gérer combien sont visibles à la fois.

Style des cartes

Personnalisez l'apparence des cartes individuelles qui représentent vos enregistrements Salesforce.

• Arrière-plan et bordures : Changez la couleur d'arrière-plan, couleur de la bordure, style de la bordure, et rayon des coins (pour les coins arrondis) de chaque carte.

• Texte : Ajustez les styles de police pour les différents champs affichés sur les cartes afin de mettre en évidence les informations importantes.

En combinant ces options de style, vous pouvez transformer un tableau Kanban standard en un outil visuellement attrayant qui est à la fois très fonctionnel et parfaitement aligné avec le design de votre application