SharePoint-Spaltenformatierung (JSON) in List Filter Online verwenden

Einführung

Die Spaltenformatierung ist eine Funktion von SharePoint Online, die die Darstellung einer Spalte über eine JSON-Beschreibung verändert: ein Status als farbige Pille, eine Zahl, die je nach Wert eingefärbt wird, eine Person als Link, der eine E-Mail beginnt. Die Beschreibung wird in der Spalte selbst gespeichert, und SharePoint wendet sie in jeder Ansicht der Liste an.

List Filter Online kann diese Beschreibungen berücksichtigen. Ist die Option aktiviert, liest das Webpart das Spaltenformatierungs-JSON jeder Spalte, die eines besitzt, und baut die Zellen der Tabelle daraus auf, sodass die Tabelle auf Ihrer Seite wie die Liste aussieht, aus der sie stammt. Das Webpart implementiert die gebräuchliche Teilmenge der Spaltenformatierungssprache; dieser Artikel führt genau auf, was unterstützt wird, was nicht und was geschieht, wenn ein Format über die Teilmenge hinausgeht.

Spaltenformatierung aktivieren

Bearbeiten Sie die Seite, öffnen Sie den Eigenschaftenbereich des Webparts und erweitern Sie die Gruppe Darstellung. Schalten Sie Spaltenformatierung aus der Liste verwenden ein. Die Option ist standardmäßig ausgeschaltet.

Das JSON selbst wird nicht im Webpart eingegeben. Es stammt aus der Definition der Spalte in der Quellliste – derselben Definition, die SharePoint bearbeitet, wenn Sie in der Liste Spalteneinstellungen → Diese Spalte formatieren öffnen und ein Format speichern. Das Webpart lädt es zusammen mit den übrigen Eigenschaften der Spalten, sodass auch ein Format angewendet wird, das auf einer Spalte einer Liste auf einer anderen Website festgelegt ist. Formate gelten pro Spalte: Jede Spalte mit einem Format wird daraus dargestellt, und die Spalten ohne Format behalten die im Spaltenkonfigurator gewählten Anzeigeformate (siehe KB10258. Spalten in List Filter Online konfigurieren: Beschriftungen, Formate und Anzeigeoptionen).

Wird ein Format auf eine Spalte angewendet, ersetzt es die Zelle vollständig – einschließlich der Option Hyperlink zum Eintrag dieser Spalte. Nehmen Sie einen Link in das Format selbst auf, wenn der Wert anklickbar bleiben soll.

Was unterstützt wird

Elemente

Ein Format ist ein Baum aus Elementen. Jedes Element ist ein Objekt mit den folgenden Schlüsseln:

• elmType – einer der Werte div, span, a, img, button oder p. Jeder andere Wert, mit Ausnahme der unten aufgeführten nicht unterstützten, wird als div dargestellt.
• txtContent – der Text des Elements: eine Zeichenfolge, ein Feldtoken oder ein Ausdruck.
• style – CSS-Eigenschaften des Elements (siehe unten).
• attributes – HTML-Attribute des Elements (siehe unten).
• children – ein Array untergeordneter Elemente, die in ihrer Reihenfolge dargestellt werden.

Schlüssel, die das Webpart nicht kennt, etwa $schema oder debugMode, werden ignoriert.

Stile

Das Objekt style kann die folgenden CSS-Eigenschaften setzen; jeder Wert kann ein Literal oder ein Ausdruck sein:

background, background-color, border, border-top, border-right, border-bottom, border-left, border-color, border-style, border-width, border-radius, box-shadow, color, cursor, direction, display, fill, flex-direction, flex-wrap, align-items, justify-content, font-family, font-size, font-style, font-weight, letter-spacing, line-height, text-align, text-decoration, text-overflow, text-transform, white-space, word-break, overflow, opacity, visibility, padding, padding-top, padding-right, padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left, width, min-width, max-width, height, min-height, max-height.

Eigenschaften außerhalb dieser Liste – etwa position oder z-index, die das Layout der Tabelle beschädigen könnten – werden stillschweigend übersprungen. Ein Wert, der url( enthält, wird ebenfalls übersprungen, sodass sich über Stile keine Hintergrundbilder laden lassen.

Attribute

Andere Attribute, darunter role, aria-*, d und data-interception, werden ignoriert.

Feldtoken

Token können allein stehen ("txtContent": "@currentField") oder in einer längeren Zeichenfolge ("txtContent": "Besitzer: [$Owner.title]"). Eine mehrwertige Spalte (mehrere Personen, Nachschlagewerte oder Ausdrücke) wird als kommagetrennte Liste angezeigt; ein Eigenschaftszugriff wie [$Owner.email] auf eine mehrwertige Spalte liefert die Eigenschaft des ersten Werts. Personen- und Nachschlagewerte werden mit ihrem Namen angezeigt, Datumswerte als lokalisiertes Datum.

Ausdrücke

Ausdrücke können als Operatorbäume – Objekte mit operator und operands – oder als Zeichenfolgen geschrieben werden, die mit = beginnen und die Excel-ähnliche Syntax von SharePoint verwenden. Beide Formen unterstützen denselben Satz von Operationen:

• Arithmetik: + (auch Verkettung von Zeichenfolgen), -, *, /, %;
• Vergleich: ==, !=, >, <, >=, <= – Datumswerte werden anhand ihres Zeitstempels verglichen;
• Logik: &&, ||, !, der Bedingungsoperator ? : (im Baum der Operator ? oder : mit drei Operanden) und die Funktion if(Bedingung, wennWahr, wennFalsch);
• Umwandlung: toString(), Number(), Date();
• Zahlen: abs(), floor(), ceiling();
• Zeichenfolgen: toLowerCase(), toUpperCase(), indexOf(), substring(), length().

In =-Zeichenfolgen werden Zeichenfolgenliterale in einfachen oder doppelten Anführungszeichen geschrieben, Zahlen als Ziffern, Wahrheitswerte als true und false; Klammern gruppieren Teilausdrücke, und Feldtoken werden direkt verwendet: =if([$Priority] == 'High', '#a4262c', '#323130').

Was nicht unterstützt wird

Das Webpart implementiert die folgenden Teile der Spaltenformatierungssprache nicht:

• forEach – das Wiederholen eines Elements für jeden Wert einer mehrwertigen Spalte;
• customRowAction – Schaltflächen, die einen Flow starten, einen Bereich öffnen oder einen Feldwert setzen;
• elmType: "filepreview" – Dokumentvorschauen;
• elmType: "svg" und path – eingebettete Vektorgrafiken;
• die Token @rowIndex, @window, @thumbnail, @currentWeb und weitere oben nicht aufgeführte Token;
• die oben nicht aufgeführten Operatoren und Funktionen, etwa toLocaleString(), toLocaleDateString(), startsWith(), padStart(), replace(), split(), join(), getDate(), addDays(), getUserImage(), cos() und sin().

Ein Format, das forEach, customRowAction, filepreview, svg, einen unbekannten Operator oder eine unbekannte Funktion, ein unbekanntes @-Token oder einen Syntaxfehler in einem =-Ausdruck enthält, kann nicht dargestellt werden. In diesem Fall gibt das Webpart das Format auf und stellt die Spalte mit ihrer Standarddarstellung dar – dem im Spaltenkonfigurator gewählten Format –, genau so, als wäre die Option für diese Spalte ausgeschaltet. Die übrigen Spalten sind nicht betroffen. Unbekannte Attribute und Stileigenschaften werden dagegen einfach übersprungen, und der Rest des Formats wird angewendet.

Beispiele

Die folgenden Formate bleiben innerhalb der unterstützten Teilmenge.

Eine Statuspille. Der Auswahlwert wird auf einem abgerundeten Hintergrund angezeigt, dessen Farbe vom Wert abhängt:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "display": "inline-block",
    "padding": "2px 10px",
    "border-radius": "12px",
    "font-weight": "600",
    "color": "#ffffff",
    "background-color": "=if(@currentField == 'Approved', '#107c10', if(@currentField == 'Rejected', '#a4262c', '#8a8886'))"
  }
}

Eine nach ihrem Wert eingefärbte Zahl, als Operatorbaum geschrieben. Beträge über 1000 werden rot und fett dargestellt:

{
  "elmType": "span",
  "txtContent": "@currentField",
  "style": {
    "color": {
      "operator": "?",
      "operands": [
        { "operator": ">", "operands": [ { "operator": "Number()", "operands": [ "@currentField" ] }, 1000 ] },
        "#a4262c",
        "#107c10"
      ]
    },
    "font-weight": "=if(Number(@currentField) > 1000, '700', '400')"
  }
}

Ein Link mit Symbol. Die Person in der Spalte „Zugewiesen an" wird als E-Mail-Link mit einem Briefumschlagsymbol dargestellt; das Format wird auf der Spalte „Zugewiesen an" selbst festgelegt und verwendet die Eigenschaften des Personenwerts:

{
  "elmType": "a",
  "attributes": {
    "href": "='mailto:' + @currentField.email",
    "title": "=@currentField.title",
    "iconName": "Mail",
    "target": "_blank"
  },
  "txtContent": "@currentField.title",
  "style": {
    "color": "#0078d4",
    "text-decoration": "none"
  }
}

Leistung

Das JSON einer Spalte wird einmal geparst – beim ersten Darstellen einer Zelle dieser Spalte –, und der geparste Baum wird für alle übrigen Zellen der Spalte und für alle späteren Elementseiten wiederverwendet. Pro Zelle werden nur die Token und Ausdrücke ausgewertet. Das Aktivieren der Option verlängert die Zeit, bis die Tabelle erscheint, daher auch auf langen Seiten kaum.

Verwandte Artikel