Kanban-Vorstand

Sie KanbanBoard zeigt die Einträge einer Tabelle als Karten nebeneinander in Bahnen, eine Bahn für jeden Wert einer Spalte: die Bewertung einer Chance, der Statusgrund einer Aufgabe, das Konto, zu dem ein Datensatz gehört. Jede Bahn wird einzeln durch eine Ansicht, Seite für Seite, mit derselben Abfrage und Sicherheit wie ein Raster gelesen und zeigt ihre Anzahl und Summen in ihrer Kopfzeile an. In einer Editable Tafel bewegt sich eine Karte durch Ziehen von der Tastatur oder durch das Verschieben ins Menü auf eine andere Bahn, und die Bewegung wird sofort gespeichert; mit einer Rangspalte werden die Karten ebenfalls von Hand sortiert. Sie wird im Fluent-UI-Theme gezeichnet.

Spuren

LaneColumn (Reagieren: laneColumn) nennt die Spalte der View-Tabelle, aus der die Lanes stammen. Eine Wahl gibt für jede seiner Optionen eine Spur an, einen Statusgrund für jeden Grund, eine Ja/Nein-Spalte, eine für jeden ihrer beiden Werte, eine Nachschlage, eine für jeden namensgebenden Datensatz, und ein Datum für die Lanes, an denen sie fällt, wie die unten beschriebenen Datumslanes . Jede andere Spalte zeigt eine Nachricht anstelle des Boards. Die Lanes folgen der Reihenfolge von Dataverse und lassen versteckte Optionen weg, und die Farbe einer Option wird als Punkt neben dem Namen ihrer Lane angezeigt. Eine Spalte, die ein Datensatz leer lassen darf, fügt für die Karten ohne Wert, ( Kein Wert), eine letzte Bahn (Kein Wert) hinzu.

Lanes (Reagieren: lanes) wählt aus, welche Bahnen und in welcher Reihenfolge angezeigt werden, nach Schlüssel: Wert 1 einer Option und 0 für Ja und Nein die ID eines Datensatzes oder ein leerer Schlüssel für die Bahn ohne Wert. Die Lanes eines Lookups sind die Datensätze, die die Karte der Ansicht benennen und in einer gruppierten Abfrage gelesen werden; benennen Sie sie stattdessen in LookupLanes (React: lookupLanes), um sie und ihre Reihenfolge zu korrigieren, eine Bahn ohne Karten.

Eine Bahn ohne Karten wird angezeigt, sodass eine Karte darin fallen lassen kann. Stellen ShowEmptyLanes Sie (React: showEmptyLanes) so ein false , dass sie ausgeblendet wird, sobald ihre Zählung bekannt ist. Benutzer können eine Lane auf einen schmalen Streifen ihres Namens und Zählen mit dem Button in der Header zusammenfügen und Lanes im Filtermenü der Toolbar aussortieren, das sie unter Zeigen auflistet.

Datumsspuren

Eine Datumsspalte zeigt Spuren an, wann ihr Datum fällt, gezählt in Tagen der eigenen Zeitzone des Nutzers, wobei die Woche am ersten Tag der Sprache beginnt und jedes Mal erneut berechnet wird, wenn das Board seine Spuren liest. Da keine genannt wird, sind sie überfällig, heute, morgen, diese Woche – von übermorgen bis zum Wochenende, so leer gegen Ende einer Woche – nächste Woche, später und kein Datum.

DateLanes(Reagieren: dateLanes) benennt stattdessen die Spuren in der Datumsreihenfolge. Ein Voreinstellung legt eine Spur vom aktuellen Datum aus: Yesterday, Today und Tomorrow; LastWeek, ThisWeek und NextWeek; LastMonth, ThisMonth und NextMonth; und ; die Quartale und Jahre des Kalenders, wie ThisCalendarQuarter und NextCalendarYear, sowie die fiskalischen ThisFiscalQuarter wie und LastFiscalYear, die auf das Geschäftsjahr der Organisation folgen, wie Dataverse es hält; , vor heute; OverdueEarlier und Later, die alles nehmen, was vor und nach den Bahnen um sie herum liegt; und NoDate. Eine eigene Lane hält exakte Tage, also Tage, die aus den heutigen Perioden gezählt werden, unter einem eigenen Titel: Between, Before und Starting (React: between, und before starting). Ein Preset erhält auch einen eigenen Titel. Probier es in der Close Dates Demo aus.

Jede Karte landet in einer Bahn, da eine Bahn nicht früher beginnt als die vorherige: nach ThisWeek, ThisMonth hält den Rest des Monats, und eine Bahn der bereits abgedeckten Karten zeigt leer und nimmt keine Karte. Ein Datum, an dem keine Bahn liegt – zwischen zwei Bahnen mit exakten Tagen – stellt ihre Karte auf keine, also beginne Earlier mit und ende mit Later , um jede Karte zu behalten.

Eine Karte, die auf eine andere Datumsspur verschoben wird, erhält den ersten Tag dieser Bahn, behält deren Tageszeit – auch eine Bahn hinter heute, was ein vergangenes Datum angibt – und wenn sie auf kein Datum wechselt, verliert sie ihr Datum. Eine Bahn ohne ersten Tag, wie Überfällig, ein erstes Prior oder eine leere Bahn, nimmt keine Karte. Setzt DateLaneDrop (Reagieren: dateLaneDrop) auf None und die Bahnen nehmen keine Karte voneinander: Sie werden nur angezeigt, wenn Karten fallen.

DateLaneOrder (Reagieren: dateLaneOrder) ordnet die Karten einer Datumsspur an. Rank , der Standard, ordnet sie nach Rangspalte, wie jede andere Bahn: Eine Karte, die innerhalb ihrer Bahn bewegt wird, ändert nur ihren Rang. Date Ordnet sie stattdessen nach Datum, ohne Rangspalte: Eine Karte, die unter eine andere fällt, nimmt den Tag dieser Karte und behält ihre eigene Zeit, und eine oben platzierte Karte nimmt den ersten Tag der Bahn; Karten desselben Tages bleiben in der Reihenfolge ihrer Zeiten. Probier es in der Fälligkeits-Datums-Demo aus.

Zählungen und Summen

Die Kopfzeile jeder Bahn zeigt an, wie viele Karten sie enthält – 5000+ über 5.000 – und die in (React: laneAggregates) genannten LaneAggregates Summen, Durchschnitt, Mindest- oder Mehrheitspunkte einer Zahl, Geld- oder Datumsspalte oder eine Zählung einer beliebigen Spalte, über jede Karte der Lane, nicht nur über die geladenen. LaneAggregateFormats (React: laneAggregateFormats) gibt den Zahlen jeder Spalte ein Format, wie zum Beispiel C0 oder N1. Dies sind die Summen, mit denen das Spielfeld beginnt: Der Totals-Button ermöglicht es den Nutzern, ihre eigenen Spalten zu wählen, die die Karten anzeigen, und eine gespeicherte Ansicht behält sie. Zählungen und Summen werden nach jedem Zug, den das Spielbrett speichert, erneut gelesen.

Spurbegrenzungen

LaneLimits (Reagieren: laneLimits) gibt den Bahnen per Schlüssel die meisten Karten, die sie halten sollten. Der Kopf einer begrenzten Bahn zeigt seinen Count gegen das Limit als 7 / 5, markiert, sobald der Count ihn überschreitet. Der Count ist der aller Karten der Lane, je nachdem, wonach der Nutzer sucht oder filtert. Ein Limit warnt nur, wenn EnforceLaneLimits (Reagieren: enforceLaneLimits) gesetzt ist: Dann nimmt eine volle Bahn keine Karte von einer anderen Seite, wird unter Move to nicht angeboten und hat keinen Hinzufügen-Button. Es ist die Regel des Spielbretts, nicht die des Servers: Halte für jede Möglichkeit, wie ein Datensatz mit einem Interceptor gespeichert wird, ein Limit.

Karten

Eine Karte zeigt die erste Spalte der Ansicht als Titel und die anderen Spalten der Ansicht unter ihren Titeln, wie es die Karten eines Rasters tun, wobei die Spalte Bahn und die Rangspalte ausgelassen werden. CardImageColumn (React:) cardImageColumnfügt neben dem Titel eine Bildspalte als Avatar hinzu. Jede Bahn lädt PageSize (React:) pageSizeKarten nach und nach, standardmäßig 20, mit Laden mehr am Fuß. In den Einstellungen ändern Nutzer die Felder, die die Karten anzeigen, wie die Karten sortiert sind und wie viele jede Bahn lädt.

Ziehe die Karten auf deine eigene Weise mit CardTemplate (Reagieren: cardRenderer). Es erhält den Rekord und die Bahn jeder Karte;Field , Label und DisplayValue (Reagieren: field, label und displayValue) zeigt eine Spalte wie die Standardkarte, und MoveToAsync OpenAsync und (Reagieren: open und moveTo) öffne den Datensatz und verschiebe die Karte, wo CanOpen und CanMove sie dürfen. Ein Klick auf die Karte öffnet trotzdem den Datensatz, und das Menü "Verschieben zu" befindet sich neben deinem Inhalt. Die Spalten, die eine Vorlage anzeigt, müssen die der Ansicht sein, daher liest das Spielbrett sie mit jeder Karte.

Wenn die Tabelle des Boards eine Seite für seine Datensätze hat (siehe Record Pages) und das Board keine Form (React: form), verlinkt der Titel der Karte darauf und das Öffnen der Karte dorthin geht; ShowRecordLinks (React: showRecordLinks) schaltet das aus. Andernfalls öffnet ein Klicken auf eine Karte ihren Datensatz in einem Dialog in der Mitte oder, mit FormLocation (React: formLocation), in einem Seitenfeld links oder rechts. Die Form ist KanbanDefaultForm – die Spalten der Ansicht der Tabelle des Spielfelds und der Lane-Spalte, jeweils mit dem Editor, den sein Typ annimmt – oder Ihre eigene Komponente von Editoren in Form (React: form). Der Datensatz wird gelesen, während eine Datensatzseite ihn liest, über denselben Tabellenzugriff und dieselbe Spaltensicherheit, und kann nur in einem Editable Board von einem Benutzer geändert werden, der ihn ändern kann.

Karten bewegen

Auf einem Editable Spielbrett (React: editable), bewegen Nutzer eine Karte auf eine andere Bahn, indem sie sie von der Tastatur oder durch das Menü "Verschieben zu" auf der Karte ziehen. Die Karte bewegt sich sofort, und das Spielbrett speichert das, was sich geändert hat: die Spalte der Bahn – aus einem Statusgrund, allein aus dem Grund, da der Server den Zustand des Datensatzes mitbewegt – und den Rang der Karte, auf dem das Spielbrett eine Karte speichert. Ein Save, der fehlschlägt, legt die Karte zurück und sagt das.

Eine Karte bewegt sich nur dort, wo der Nutzer sie ändern kann: Schreibe auf ihren Datensatz, über den Tabellenzugriff des Portals und auf die Lane-Spalte, die eine sein muss, die ein Update setzen kann und deren Sicherheit nicht gilt. Karten in der richtigen Reihenfolge zu platzieren erfordert auch Schreiben in der Rangspalte. Eine Karte, die der Benutzer nicht bewegen kann, bleibt dort, wo sie ist, ohne Verschieben ins Menü.

Status-Reason-Lades folgen ihren Zuständen und den Zustandsänderungen, die die Tabelle erlaubt, mit denen der Server registriert wird AddStateTransitions (siehe RecordContext). Opportunities, Cases, Quotes und Orders haben sie standardmäßig: Eine Karte wird nicht von einer Lane übernommen, die ihr Datensatz nicht erreichen kann, und Move to listet nur die Lades auf, die sie erreichen kann. Eine Statusänderung, die ein Update vornimmt – eine Gelegenheit wieder geöffnet, ein Fall abgebrochen oder wieder aktiviert, ein Quote aktiviert, ein Auftrag wird abgegeben – bittet den Benutzer, sie zuerst zu bestätigen, und eine Aktion, die Dataverse mit einer eigenen Aktion ausführt, öffnet den Schließen-Dialog, wie unten beschrieben Closed Records . Die Karten eines geschlossenen Status werden nicht untereinander in eine andere Reihenfolge gelegt. Eine Tabelle ohne Übergänge bewegt sich frei: Eine Aufgabe, die auf Abgeschlossen verschoben wurde, wird abgeschlossen und wieder zurück, wieder geöffnet.

Karten hinzufügen

Jede Lane-Header in einem Editable Board hat einen Hinzufügen-Button, der einen neuen Datensatz öffnet, der bereits in dieser Lane ist, in der Form des Boards: die Seite Form (React: form) oder KanbanDefaultForm. Er wird nur für Nutzer angezeigt, die die Tabellen-Records erstellen und die Lane-Spalte setzen dürfen, und niemals in einer Lane mit geschlossenen Records, da ein offener Datensatz erstellt wird. Nach dem Speichern erscheint die Karte am oberen Rand ihrer Lane. Schalte sie mit AllowNew (React: allowNew) aus. Handle PrepareNewRecord (React: prepareNewRecord) aus, um dem neuen Datensatz vor dem Öffnen der Form mehr Werte zu geben: Er erhält den Datensatz, den bereits vorhandenen Wert der Lane und die Lane. Eine Symbolleiste kann auch eine Karte hinzufügen: CanCreate und NewAsync auf ( KanbanBoardContext React: canCreate and newCard) wird angegeben, ob eine Bahn eine neue Karte nimmt und ihre Form öffnet – ohne benannte Bahn, in der ersten, die eine nimmt.

Abschlussrekorde

Auf einem Board aus Statusgründen öffnet eine Karte, die in eine Spur gelegt wird, in die Dataverse Datensätze mit einer eigenen Aktion schließt – eine Chance gewonnen oder verloren, ein Fall gelöst, ein Angebot gewonnen oder geschlossen, eine Bestellung erfüllt oder storniert – einen Dialog für den Statusgrund, die Startspur und die Schlussliste: den tatsächlichen Umsatz und das Abschlussdatum einer gewonnenen Gelegenheit; das Schließungsdatum einer verlorenen Chance und den Konkurrenten, an den der Nutzer Konkurrenten wählen kann; die Auflösung und abrechenbare Zeit eines Falls; das Schließungsdatum eines Angebots oder Auftrags; und eine Beschreibung. Bestätigt wird der Datensatz über Dataverse's eigene Nachricht geschlossen, wie zum Beispiel WinOpportunity oder CloseIncident; storniert, die Karte wird zurückgeführt. Zurück in eine offene Spur gezogen, wird eine Chance wieder geöffnet und ein Fall wieder aktiviert, sobald der Nutzer bestätigt hat. Versuchen Sie es in der Pipeline-Demo. Der gleiche Dialog befindet sich hinter den Schließen-Buttons im Formular eines Datensatzes, zum Beispiel WinOpportunityButton: siehe RecordContext.

Ein Abschluss wird als Änderung des Status des Datensatzes bewertet: Der Benutzer muss erlaubt sein, den Datensatz und seine Statusspalten zu ändern und auf den von ihm benannten Konkurrenten zu zeigen. Dataverse legt das Schließen unter dem Datensatz als eigenständige Aktivität ab (opportunityclose, incidentresolution, quoteclose, orderclose), die keinen Tabellenzugriff von Ihnen benötigt. Der Anwendungsbenutzer des Portals benötigt AppendTo in der Tabelle des Datensatzes, Erstellen und Anhängen bei Aktivitäten sowie für eine Gelegenheit AppendTo bei Konkurrenten: siehe Dataverse Connection.

Karten in die richtige Reihenfolge legen

Nennen Sie ein RankColumn (Reagieren: rankColumn) und die Nutzer ordnen die Karten jeder Bahn nach Hand an. Eine Bahn wird nach Rang sortiert, dann nach Sortierung der Ansicht, und eine Karte, die zwischen zwei anderen gefallen ist, erhält einen Rang zwischen ihren. Normalerweise ist dieser Rang alles, was ein Drop schreibt. Karten ohne Rang sortieren zuerst und werden nacheinander gewertet, wenn eine Karte unter ihnen oder knapp darunter liegt; eine Bahn, deren Reihen keinen Platz mehr zwischen zwei Karten haben, wird neu gewertet, in der angegebenen Reihenfolge. Diese Ränge werden mit dem Zug in einer Transaktion gespeichert. Eine Bahn mit mehr als 5.000 Karten kann nicht nach der Hand geordnet werden, noch kann eine Karte fallen gelassen werden, wo sie eine Rangfolge hätte, die der Nutzer nicht ändern darf. Ohne Rangspalte folgt eine Bahn der Sortierung der Ansicht, und eine Karte bewegt sich nur auf eine andere Bahn.

Die Rangspalte ist eine Dezimalspalte der Tabelle des Spielbretts, deren Reichweite negative Zahlen zulässt, da eine Karte, die über der ersten liegt, darunterliegt. Ihre Genauigkeit bestimmt, wie oft eine Bahn neu gewertet wird: Karten beginnen eine Million auseinander, und jeder Wurf zwischen zwei Hälften des Raums zwischen ihnen bekommt etwa fünfzig Drops an einer Stelle, bevor ihre Bahn erneut gewertet wird, und eine von keiner etwa zwanzig.

Selbst speichern von Bewegungen

Handle SaveChange (React: onCardMove), um einen Zug auf deine eigene Weise zu speichern, anstelle des Bretts: durch einen eigenen Service, nachdem du den Nutzer gefragt hast, oder gar nicht. Es erhält ein KanbanCardMove: die Karten Record, die Bahnen, in denen sie kam From und ging To, sie Index ist da und das Rank, das Update das Spielfeld schrieb, und die OtherUpdates die in dieselbe Transaktion gehören, danach geschrieben – die Ränge anderer Karten oder, bei einer Karte, die eine geschlossene Bahn verlässt, ihren eigenen Rang, sobald ihr Status sie wieder geöffnet hat – und für eine Karte, die in eine Bahn gelegt wird, die sie schließt, bestätigte Close der Nutzer (React: close), um sie zu senden. Kehre zurück, true um die Karte dort zu behalten, wo sie abgeworfen wurde, oder false um sie zurückzulegen. Das Board liest nach einem Zug, den es nicht gespeichert hat, wieder nichts mehr, sodass eine Seite einen Zug nur auf der Seite behalten kann.

Tastatur-, Touchscreen- und Bildschirmleser

Jede Karte, die sich bewegen kann, hat eine ... Taste mit einem Menü "Bewegen zu" der Bahnen, zu denen sie gehen kann, die von der Tastatur aus genauso funktioniert, per Touch und mit einem Bildschirmleser. Eine Karte kann auch direkt von der Tastatur bewegt werden: fokussieren, Leertaste drücken, um sie aufzuheben, die Pfeiltasten, um sie auf eine andere Bahn oder an einen anderen Ort zu bringen, und erneut Leerstelle, um sie abzulegen. Auf einem Touchscreen wird eine Karte an ihrem Griff gezogen, sodass die Bahnen weiterhin unter einem Finger scrollen. Bildschirmleser hören jeden Zug – Karte in die Bahn verschoben – und einen Zug, der fehlschlägt.

Werkzeugleiste

Die Werkzeugleiste ist als Raster angelegt: der View-Picker links – oder der Title (React: title), wenn es nur eine Ansicht gibt – und rechts deine eigenen Steuerungen, Totalen, das Suchfeld, Filter, Aktualisieren und Einstellungen. Füge deine Steuerung mit ToolbarItems (React: die Unterseiten des Boards) hinzu. A KanbanBoardButton erhält die Tafel beim Anklicken: seine Tabelle, die angezeigte Ansicht, die Spuren in ihrer Reihenfolge und RefreshAsync (React: refresh) um jede Bahn erneut zu lesen.

Ansichten, Suche und Filter

Eine Tafel zeigt die Datensätze einer Ansicht an – eine von Dataverse oder eine, die die Seite definiert – und ihre Tabelle ist die der Ansicht. DefaultViewId (React: defaultViewId) ist die Ansicht, auf der sie geöffnet wird, und ViewIds (React: viewIds) die anderen Ansichten, die der Viewpicker anbietet, derselben Tabelle. Das Suchfeld findet Karten, während eine Rastersuche Zeilen findet: vom Anfang des Suchwerts einer Suchspalte oder irgendwo nach einer führenden *Ansicht. Es schaut in die Spalten, die die Karten zeigen, nennt sie in seinem Tooltip und markiert die Übereinstimmungen auf den Karten. Schalten Sie es mit AllowSearch (React: allowSearch) aus.

Mit AllowFiltering (React: allowFiltering) bietet das Filtermenü der Symbolleiste Bearbeiten-Filter an, das Dialog, das die Filter-Schaltfläche eines Rasters öffnet, deren Filter die eigene Ansicht ersetzen, bis der Benutzer eine andere Ansicht auswählt. Sie ist standardmäßig deaktiviert, da der Benutzer alle Filter der Ansicht entfernen kann.

Mit AllowSavedViews (React: allowSavedViews), kann ein angemeldeter Nutzer das Spielbrett so speichern, wie er es arrangiert hat – die Ansicht mit seinen Filtern, den Feldern und der Sortierung der Karten, die Gesamtwerte der Lanes, die Karten, die jede Bahn lädt, und die eingeklappten oder versteckten Lanes – als eigene Ansicht wählen und seine Standardansicht wählen und die nicht verwendeten Karten aus dem Filtermenü ausblenden. Ohne ( SavedViewsKey React: savedViewsKey) teilt ein Board seine Ansichten mit den Rastern, Kalendern und Tafeln seiner Tabelle, die keine haben, wobei jedes sein eigenes Layout behält. Wie Ansichten gespeichert, geändert und geteilt werden, findet sich auf der Seite Gespeicherte Ansichten .

Eine Seite kann eigene Ansichten im Code mit CustomViewDefinitions (React: customViewDefinitions), den Ansichtsdefinitionen des Gitters definieren. Sie werden im Picker neben ViewIds angeboten, ohne dort aufgeführt zu sein, können eine benennen, DefaultViewId und ein Board kann diese allein haben. Jede wird von ihrem eigenen FetchXML innerhalb des Tabellenzugriffs des Benutzers gelesen und legt das Board so an: Es PageSize sind die Karten, die eine Lane lädt, eine Hidden Spalte und DisplayLabel versteckt oder betitelt ihr Kartenfeld, und es Aggregates sind die Summen der Lanes. Erstellen Sie die Liste einmal in einem Feld: Eine neue Liste startet das Board erneut.

Seinen Platz in der URL behalten

Bennen Sie einen Abfrageparameter in PersistedStateQueryParameter (React: persistedStateQueryParameter), und das Board behält die Ansicht ausgewählt und die Lanes dort eingeklappt, sodass ein Nachladen oder ein geteilter Link sie so öffnet, wie sie gelassen wurde. Worauf sie ohnehin geöffnet wäre, wird ausgelassen. Auch die Suche bleibt mit IncludeSearchInPersistedState; sie wird standardmäßig weggelassen, da das, wonach Nutzer suchen, sensibel sein kann. Jede Änderung ersetzt den Browser-History-Eintrag, und beide Stapel schreiben denselben Wert, sodass ein Link auf dem einen das gleiche Board auf dem anderen öffnet.

Thematisierung

Das Spielfeld wird mit den eigenen Steuerungen und Design-Tokens von Fluent UI gezeichnet, also folgt es deinem Thema, hell oder dunkel, und deiner Akzentfarbe, und der Punkt einer Spur übernimmt seine Option-Farbe aus Dataverse. Die Bahnen sind 280 Pixel breit, nebeneinander, und scrollen seitlich, wenn sie nicht passen; auf einem Handy nimmt jede den Großteil des Bildschirms ein und klickt ein Height . (React: height) legt die Höhe des Spielfelds fest, die Symbolleiste ist enthalten – standardmäßig 600 Pixel – und jede Bahn scrollt ihre Karten darin. Um es neu zu gestalten, tragen das Spielfeld, seine Bahnen und seine Karten eigene Klassen, darunter ppp-kanban, ppp-kanban-lane, ppp-kanban-lane-header und ppp-kanban-card; Class und Style (React: className und style) fügen Sie eigene hinzu.