Tableau Kanban

Il KanbanBoard affiche les enregistrements d’une table sous forme de cartes dans des couloirs côte à côte, une voie pour chaque valeur d’une colonne : la note d’une opportunité, la raison de statut d’une tâche, le compte auquel appartient un enregistrement. Chaque voie est lue seule via une vue, une page à la fois, avec la même requête et la même sécurité qu’une grille, et affiche son nombre et ses totaux dans son en-tête. Dans un Editable plateau, une carte se déplace vers une autre voie en la faisant glisser, depuis le clavier ou via son menu Déplacer vers le menu, et le déplacement est sauvegardé immédiatement ; avec une colonne de rang, les cartes sont également rangées à la main. Elle est tirée dans votre thème Fluent UI.

Voies

LaneColumn (Réagir : laneColumn) nomme la colonne de la table de la vue dont proviennent les voies. Un choix donne une voie pour chacune de ses options, une raison de statut pour chaque raison, une colonne Oui/Non, une pour chacune de ses deux valeurs, une recherche pour chaque enregistrement nommé, et une date des voies où elle tombe, comme le décrit les lanes de date ci-dessous. Toute autre colonne affiche un message à la place du tableau. Les voies suivent l’ordre de Dataverse et laissent d’autres options cachées, et la couleur d’une option apparaît sous forme de point à côté du nom de sa voie. Une colonne qu’un enregistrement peut laisser vide ajoute une dernière voie, (Aucune valeur), pour les cartes sans valeur.

Lanes (Réagir : lanes) choisit quelles voies sont affichées, et dans quel ordre, par clé : la valeur d’une option, 1 et 0 pour Oui et Non, l’identifiant d’un enregistrement, ou une clé vide pour la voie sans valeur. Les voies d’une recherche sont les enregistrements nommés par les cartes de la vue, lues dans une requête groupée ; nomme-les dans LookupLanes (Réagir : lookupLanes) à la place pour les fixer ainsi que leur ordre, une voie sans cartes incluses.

Une voie sans cartes est affichée, donc une carte peut y être déposée. Réglez ShowEmptyLanes (Réagir : showEmptyLanes) pour false la cacher une fois son nombre connu. Les utilisateurs peuvent réduire une voie à une bande étroite de son nom et compter avec le bouton de son en-tête, et masquer les lanes dans le menu Filtre de la barre d’outils, qui les liste sous Afficher.

Voies de rendez-vous

Une colonne de date indique les voies de la date de sa tombée, comptées en jours du fuseau horaire de l’utilisateur, la semaine commençant le premier jour de leur langue, et calculées à nouveau à chaque lecture de ses voies par le tableau. Sans nom, elles sont en retard, Aujourd’hui, Demain, Cette semaine — du sur-demain jusqu’à la fin de la semaine, donc vides vers la fin de la semaine — La semaine suivante, Plus tard et Pas de date.

DateLanes(Réagir : dateLanes) nomme les voies à la place, dans l’ordre des dates. Un préréglage établit une voie à partir de la date actuelle : Yesterday, Today et Tomorrow; LastWeek, ThisWeek et NextWeek; ThisMonth LastMonth; et NextMonth; les trimestres et années du calendrier, tels que ThisCalendarQuarter et NextCalendarYear, et les fiscaux, tels que ThisFiscalQuarter et LastFiscalYear, qui suivent l’exercice fiscal de l’organisation tel que Dataverse le conserve ; Overdue, avant aujourd’hui ; Earlier et Later, qui prennent tout ce qui tombe avant et après les voies autour d’eux ; et NoDate. Une voie à vous contient les jours exacts, ou les jours comptés à partir des périodes d’aujourd’hui, sous un titre à part : Between, Before et Starting (Réagir : between, before et starting). Un préréglage prend aussi un titre propre. Essayez-le sur la démo des dates de clôture.

Chaque carte tombe dans une voie, car une voie ne commence pas avant l’endroit où la précédente se termine : listée après ThisWeek, ThisMonth tient le reste du mois, et une voie que c’est déjà couverte par celles d’avant montre vide et ne prend aucune carte. Une date qu’aucune voie ne tient — entre deux voies de jours exacts — met sa carte sur aucune, donc commencer avec Earlier et terminer avec Later pour garder toutes les cartes.

Une carte déplacée vers une autre voie de date reçoit le premier jour de cette voie, en gardant son heure — une voie en retard aujourd’hui aussi, ce qui lui donne une date passée — et déplacée à Sans date, elle perd sa date. Une voie sans premier jour, comme En retard, une première Avant ou une voie vide, ne prend aucune carte. Placez DateLaneDrop (Réaction : dateLaneDrop) à None et les voies ne prennent aucune carte les unes des autres : elles n’apparaissent que lorsque les cartes tombent.

DateLaneOrder (Réaction : dateLaneOrder) ordonne les cartes d’une voie de date. Rank , par défaut, les ordonne par colonne de rang, comme toutes les autres lanes : une carte déplacée dans sa voie change uniquement de rang. Date les ordonne par date, sans colonne de rang : une carte déposée en dessous d’une autre prend le jour de cette carte, gardant son propre temps, et une carte déposée en haut prend le premier jour de la lane ; les cartes du même jour restent dans l’ordre de leurs temps. Essayez lors de la démo des dates d’échéance.

Comptages et totaux

L’en-tête de chaque voie indique combien de cartes elle contient — 5000+ au-delà de 5 000 — et les totaux nommés dans LaneAggregates (Réagir : laneAggregates: : la somme, la moyenne, le plus petit ou la majeure partie d’un nombre, de la colonne argent ou de la date, ou le compte de n’importe quelle colonne, sur chaque carte de la voie, pas seulement celles chargées. LaneAggregateFormats (Réagir : laneAggregateFormats) donne un format aux chiffres de chaque colonne, tel que C0 ou N1. Voici les totaux avec lesquels le plateau commence : le bouton Totaux permet aux utilisateurs de choisir leurs propres colonnes affichées par les cartes, et une vue enregistrée les conserve. Les comptes et totaux sont lus à nouveau après chaque coup sauvegardé par le plateau.

Limites des voies

LaneLimits (Réagir : laneLimits) donne aux voies, par clé, le plus grand nombre de cartes qu’elles devraient posséder. L’en-tête d’une voie limitée affiche son compte par rapport à sa limite, comme 7/5, marqué une fois le compte passé. Le compte correspond à toutes les cartes de la voie, quelle que l’utilisateur recherche ou filtre. Une limite ne prévient que sauf si EnforceLaneLimits (Réagir : enforceLaneLimits) est défini : alors une voie pleine ne prend aucune carte d’une autre, n’est pas proposée sous Déplacer à, et n’a pas de bouton Ajouter. C’est la règle du plateau, pas celle du serveur : maintenir une limite pour chaque façon dont un enregistrement est sauvegardé avec un intercepteur.

Cartes

Une carte affiche la première colonne de la vue comme titre et les autres colonnes de la vue sous leurs titres, comme le font les cartes d’une grille, en omettant la colonne de la voie et la colonne de rang. CardImageColumn (Réagir : cardImageColumn) ajoute une colonne image en avatar à côté du titre. Chaque voie charge PageSize (Réagir : pageSize) cartes à la fois, 20 par défaut, avec Charger plus à son bas. Depuis les Paramètres, les utilisateurs changent les champs affichés par les cartes, la façon dont les cartes d’une voie sont triées et combien chaque voie charge.

Tirez les cartes à votre manière avec CardTemplate (Réagir : cardRenderer). On lui remet l’enregistrement et la voie de chaque carte ; Field , Label et DisplayValue (Réagir : field, label et displayValue) affichent une colonne comme la carte par défaut, et OpenAsync et MoveToAsync (Réagir : open et moveTo) ouvrent l’enregistrement et déplacent la carte, où CanOpen et CanMove disent qu’ils le peuvent. Un clic sur la carte ouvre toujours son enregistrement, et son menu Déplacer vers se trouve à côté de votre contenu. Les colonnes qu’un modèle affiche doivent être celles de la vue, donc le tableau les lise avec chaque carte.

Lorsque la table du tableau a une page enregistrée pour ses enregistrements (voir Pages d’enregistrement) et que le tableau n’a pas Form de (Réagir : form), le titre d’une carte y est lié, et ouvrir la carte y mène ; ShowRecordLinks (Réagir : showRecordLinks) désactive ce message. Sinon, cliquer sur une carte ouvre son enregistrement dans un dialogue au centre ou, avec FormLocation (Réagir : formLocation), dans un panneau latéral à gauche ou à droite. La forme est KanbanDefaultForm — les colonnes de la vue de la table du tableau et de la colonne de la voie, chacune avec l’éditeur que prend son type — ou votre propre composant d’éditeurs dans Form (Réagir : form). L’enregistrement est lu comme une page d’enregistrement le lit, via le même accès à la table et la sécurité des colonnes, et ne peut être modifié que dans un Editable tableau, par un utilisateur qui peut le modifier.

Cartes à déplacer

Dans un Editable plateau (Réagir : editable), les utilisateurs déplacent une carte vers une autre voie en la faisant glisser, depuis le clavier ou via le menu Déplacer vers le menu sur la carte. La carte bouge en même temps, et le plateau sauvegarde ce qui a changé : la colonne de la voie — pour une raison de statut, la seule raison, car le serveur déplace l’état du record avec elle — et le rang de la carte, où le plateau en conserve une. Une sauvegarde qui échoue remet la carte en place et le dit.

Une carte ne bouge que là où l’utilisateur peut la modifier : Écrire sur son enregistrement, via l’accès à la table du portail, et sur sa colonne de voie, qui doit être une option qu’une mise à jour peut activer et que la sécurité de la colonne ne retient pas. Mettre les cartes dans l’ordre nécessite aussi Write sur la colonne de rang. Une carte que l’utilisateur ne peut pas déplacer reste à sa place, sans menu Déplacer vers le menu.

Les lignes de raison de statut suivent leurs états, et les changements d’état autorisés par la table, avec lesquels le serveur s’enregistre AddStateTransitions (voir RecordContext). Les opportunités, cas, citations et ordres les ont par défaut : une carte n’est pas prise par une voie que son enregistrement ne peut pas atteindre depuis la sienne, et Déplacer vers ne liste que les voies qu’elle peut. Un changement de statut effectué par une mise à jour — une opportunité rouverte, un cas annulé ou réactivé, un devis activé, une commande soumise — demande à l’utilisateur de le confirmer en premier, et une action faite par Dataverse ouvre la boîte de dialogue de fermeture, comme le décrit les enregistrements de clôture ci-dessous. Les cartes d’un statut fermé ne sont pas placées dans un autre ordre entre elles. Une table sans transitions se déplace librement : une tâche déplacée à Terminée est terminée, puis reculée, ouverte.

Ajout de cartes

L’en-tête de chaque voie dans un Editable tableau possède un bouton Ajouter qui ouvre un nouvel enregistrement déjà présent dans cette voie, sous la forme du tableau : celui de Form la page (Réagir : form) ou KanbanDefaultForm. Il ne s’affiche qu’aux utilisateurs qui peuvent créer les enregistrements de la table et définir sa colonne de lane, et jamais dans une voie d’enregistrements fermés, car un enregistrement est créé ouvert. Une fois enregistrée, la carte apparaît en haut de sa voie. Désactivez-la avec AllowNew (Réagir : allowNew). Handle PrepareNewRecord (Réagir : prepareNewRecord) pour donner plus de valeurs au nouvel enregistrement avant l’ouverture de son formulaire : il reçoit l’enregistrement, la valeur de la voie déjà présente, et la voie. Un bouton de barre d’outils peut aussi ajouter une carte : CanCreate et sur (KanbanBoardContextReact : canCreate et newCard) indiquer si une voie prend une nouvelle carte et ouvre sa forme — sans qu’aucune voie ne soit nommée, dans la première qui NewAsync en prend une.

Records de clôture

Sur un tableau par raison de statut, une carte déposée dans une voie que Dataverse ferme les enregistrements avec une action propre — Gagné ou Perdu d’une opportunité, Résolu d’un cas, Gagné ou Fermé d’un devis, Accompli ou Annulé d’une commande — ouvre un dialogue pour la raison de statut, la voie de départ, et ce que la clôture enregistre : le revenu réel et la date de clôture d’une opportunité gagnée ; la date de clôture d’une voie perdue, et le concurrent auquel elle a été perdue où l’utilisateur peut choisir des concurrents ; la résolution et le temps facturable d’un cas ; la date de clôture d’un devis ou d’une commande ; et une description. Confirmé, le dossier est fermé via le message propre de Dataverse, tel que WinOpportunity ou CloseIncident; annulé, la carte revient. Une opportunité est ramenée dans une voie ouverte, une opportunité est rouverte et un cas réactivé une fois que l’utilisateur a confirmé. Essayez sur la démo Pipeline. Le même dialogue se trouve derrière les boutons de fermeture sur le formulaire d’un enregistrement, comme WinOpportunityButton: voir RecordContext.

Une clôture est jugée comme un changement de statut de l’enregistrement : l’utilisateur doit être autorisé à modifier l’enregistrement et ses colonnes de statut, et à pointer vers le concurrent qu’il nomme. Dataverse enregistre la clôture sous l’enregistrement comme une activité à part entière (opportunityclose, incidentresolution, quoteclose, orderclose), qui ne nécessite pas d’accès à la table de votre part. L’utilisateur de l’application du portail a besoin d’AppendTo sur la table de l’enregistrement, Créer et Annexe sur les activités, et pour une opportunité AppendTo sur les concurrents : voir Dataverse Connection.

Mettre les cartes dans l’ordre

Nommer un RankColumn (Réagir : rankColumn) et les utilisateurs classent les cartes de chaque voie par main. Une voie est triée par rang, puis par tri de la vue, et une carte déposée entre deux autres reçoit un rang entre les leurs. Généralement, ce rang est tout ce qu’un drop écrit. Les cartes sans rang trient en premier, et sont classées à tour de rôle lorsqu’une carte est déposée parmi elles ou juste en dessous ; une voie dont les rangs n’ont plus de place entre deux cartes est classée à nouveau, dans l’ordre affiché. Ces rangs sont sauvegardés avec le déplacement, lors d’une transaction. Une ligne de plus de 5 000 cartes ne peut pas être classée à la main, ni une carte là où elle serait rangée par l’utilisateur ne peut pas changer. Sans colonne de rang, une voie suit le tri de la vue, et une carte ne se déplace qu’à une autre voie.

La colonne de rang est une colonne décimale du tableau du plateau dont la portée permet de donner des nombres négatifs, puisqu’une carte tombée au-dessus de la première est classée en dessous. Sa précision détermine à quelle fréquence une ligne est classée à neuf : chaque chute entre deux moitiés fait passer la pièce entre elles, donc une colonne de dix valeurs décimales nécessite environ cinquante chutes en un endroit avant que sa voie ne soit à nouveau classée, et une de nulle part d’environ vingt points.

Sauvegarder soi-même

Gérer SaveChange (Réagir : onCardMove) pour sauvegarder un coup à votre façon, à la place du plateau : via un service à vous, après avoir demandé à l’utilisateur, ou pas du tout. On lui donne KanbanCardMoveun : les cartes Recordde la carte, les voies où elle est venue From et Torepart, il est Index là et son Rank, le Update plateau écrirait, et le OtherUpdates qui appartient à la même transaction, écrit après — les rangs des autres cartes, ou, pour une carte quittant une voie fermée, son propre rang une fois que son statut l’a rouverte — et, pour une carte déposée dans une voie qui la ferme, le Close (Réaction : close) confirmé par l’utilisateur, à envoyer après lui. Revenir true pour garder la carte là où elle a été déposée, ou false pour la remettre. Le tableau ne lit plus rien après un coup qu’il n’a pas sauvegardé, donc une page peut garder un mouvement uniquement sur la page.

Clavier, lecteurs tactiles et d’écran

Chaque carte qui peut se déplacer possède un ... bouton avec un menu Aller vers les voies où elle peut aller, qui fonctionne de la même manière depuis le clavier, par tactile et avec un lecteur d’écran. Une carte peut aussi être déplacée directement depuis le clavier : la focaliser, appuyer sur Espace pour la ramasser, les flèches pour la transporter vers une autre voie ou un autre endroit dans son propre cas, et encore Espace pour la poser. Sur un écran tactile, une carte est traînée par sa prise, donc les voies défilent toujours sous un doigt. Les lecteurs d’écran entendent chaque mouvement — la carte déplacée vers la voie — et un mouvement qui échoue.

Barre d’outils

La barre d’outils est disposée comme une grille : le sélecteur de vue à gauche — ou le Title (Réagir : title), lorsqu’il n’y a qu’une seule vue — et à droite vos propres contrôles, Totains, la boîte de recherche, le Filtre, Rafraîchir et les Paramètres. Ajoutez vos contrôles avec ToolbarItems (Réagir : les enfants du plateau). Un joueur reçoit le tableau lorsqu’on KanbanBoardButton clique : son tableau, la vue qu’il affiche, ses voies dans leur ordre, et RefreshAsync (Réagir : refresh) pour relire chaque voie.

Vues, recherches et filtres

Un tableau affiche les enregistrements d’une vue — l’une de Dataverse ou celle définie par la page — et sa table correspond à celle de la vue. DefaultViewId (Réagir : defaultViewId) est la vue sur laquelle elle s’ouvre, et ViewIds (Réagir : viewIds) les autres que propose le sélectionneur de vues, de la même table. La boîte de recherche trouve les cartes car la recherche d’une grille trouve des lignes : à partir du début de la valeur d’une colonne de recherche, ou n’importe où après un début *de . Elle regarde dans les colonnes affichées par les cartes, les nomme dans son infobulle, et marque les correspondances sur les cartes. Désactivez-la avec AllowSearch (Réagir : allowSearch).

Avec AllowFiltering (Réagir : allowFiltering), le menu Filtre de la barre d’outils propose des filtres Modifier, le bouton Filtre d’une grille s’ouvre, dont les filtres remplacent ceux de la vue jusqu’à ce que l’utilisateur choisisse une autre vue. Il est désactivé par défaut, car l’utilisateur peut retirer tous les filtres de la vue.

Avec AllowSavedViews (Réagir : allowSavedViews), un utilisateur connecté peut enregistrer le plateau tel qu’il l’a organisé — la vue avec ses filtres, les champs et le tri des cartes, les totaux des couloirs, les cartes que chaque voie charge, et les voies repliées ou cachées — en tant que vue à part entière, et choisir sa vue par défaut et masquer celles qu’il n’utilise pas, depuis le menu Filtre. Sans SavedViewsKey (Réagir : savedViewsKey), un plateau partage ses vues avec les grilles, calendriers et tableaux de son tableau qui n’en ont pas, chacun conservant sa propre configuration. La façon dont les vues sont sauvegardés, modifiées et partagées se trouve sur la page Vues Sauvegardées .

Une page peut définir ses propres vues en code avec CustomViewDefinitions (Réagir : customViewDefinitions), les définitions de vues de la grille. Elles sont proposées dans le sélecteur à côté ViewIds sans y être listées, DefaultViewId on peut en nommer une, et un plateau peut les avoir seules. Chacune est lue par son propre FetchXML, dans l’accès de table de l’utilisateur, et dispose le plateau comme indiqué : ce PageSize sont les cartes qu’une voie charge, celles d’une Hidden colonne et DisplayLabel cacher ou renommer son champ de cartes, et ce Aggregates sont les totaux des voies. Construisez la liste une fois, dans un champ : une nouvelle liste relance le plateau.

Conserver sa place dans l’URL

Nommer un paramètre de requête dans PersistedStateQueryParameter (React : persistedStateQueryParameter), et le tableau garde la vue choisie et les voies s’y sont effondrées, donc un rechargement ou un lien partagé l’ouvre comme il a été laissé. Ce sur quoi il s’ouvrirait de toute façon est laissé de côté. La recherche est aussi gardée avec IncludeSearchInPersistedState; elle est laissée de côté par défaut, car ce que les utilisateurs recherchent peut être sensible. Chaque changement remplace l’entrée historique du navigateur, et les deux piles écrivent la même valeur, donc un lien créé sur l’un ouvre le même tableau sur l’autre.

Thèmes

Le plateau est dessiné avec les contrôles et jetons de design propres à Fluent UI, il suit donc votre thème, clair ou sombre, et votre couleur d’accent, et le point d’une voie prend la couleur de son option de Dataverse. Les pistes font 280 pixels de large, côte à côte, et défilent latéralement quand elles ne rentrent pas ; sur un téléphone, chacune prend la majeure partie de l’écran et s’enclenche en place. Height (Réagir : height) règle la hauteur du plateau, barre d’outils incluse — 600 pixels par défaut — et chaque voie fait défiler ses cartes à l’intérieur. Pour restyler, le plateau, ses couloirs et ses cartes portent leurs propres classes, parmi lesquelles ppp-kanban, ppp-kanban-lane, ppp-kanban-lane-header et ppp-kanban-card; Class et Style (Réagir : className et style) ajoutent les vôtres.