Anpassen von SharePoint mithilfe von SpaltenformatierungenUse column formatting to customize SharePoint

Mithilfe von Spaltenformatierungen können Sie anpassen, wie Felder in SharePoint-Listen und SharePoint-Bibliotheken angezeigt werden.You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. Dazu erstellen Sie ein JSON-Objekt. Es beschreibt die Elemente, die bei der Aufnahme eines Felds in eine Listenansicht angezeigt werden, sowie die Formatvorlagen, die auf diese Elemente angewendet werden sollen.To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. Spaltenformatierungen haben keine Auswirkungen auf die Daten in einem Listenelement oder einer Datei. Sie ändern nur, wie das Element oder die Datei visuell dargestellt werden, wenn der Benutzer durch die Liste navigiert.The column formatting does not change the data in the list item or file; it only changes how it’s displayed to users who browse the list. Jeder Benutzer mit Berechtigungen zur Erstellung und Verwaltung von Listenansichten kann Spaltenformatierungen definieren, um die Darstellung von Ansichtsfeldern zu konfigurieren.Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.

Eine Liste mit den Feldern „Title“, „Effort“, „Assigned To“ und „Status“ ohne jegliche Anpassungen könnte beispielsweise so aussehen:For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:

SharePoint-Liste mit vier unformatierten Spalten

Eine Liste, in der die Felder Effort, Assigned To und Status mithilfe von Spaltenformatierungen angepasst wurden, könnte so aussehen:A list with the appearance of the Effort, Assigned To, and Status fields customized via column formatting might look like this:

SharePoint-Liste mit drei formatierten Spalten

Tipp

Beispiele aus diesem Artikel und zahlreiche weitere Beispiele der Community stehen im GitHub-Repository für Open-Source-Definitionen von Spaltenformatierungen zur Verfügung.Samples demonstrated in this article and numerous other community samples are available from a GitHub repository dedicated for open-sourced column formatting definitions. Sie finden diese Beispiele im Repository sp-dev-column-formatting unter SharePoint GitHub-Organisation.You can find these samples from the sp-dev-column-formatting repository at SharePoint GitHub organization.

Was unterscheidet Spaltenformatierungen und den Field Customizer?How is column formatting different than the Field Customizer?

Sowohl mithilfe von Spaltenformatierungen als auch mithilfe der Erweiterung SharePoint Framework Field Customizer können Sie anpassen, wie Felder in SharePoint-Listen visuell dargestellt werden.Both column formatting and SharePoint Framework Field Customizer extensions enable you to customize how fields in SharePoint lists are displayed. Der Field Customizer ist leistungsfähiger, da Sie mit seiner Hilfe beliebigen Code zur Steuerung der Felddarstellung programmieren können.The Field Customizer is more powerful because you can use it to write any code that you want to control how a field is displayed.

Spaltenformatierungen lassen sich einfacher und großflächiger anwenden.Column formatting is more easily and broadly applied. Sie sind jedoch weniger flexibel, da sie statt benutzerdefiniertem Code nur einige vordefinierte Elemente und Attribute unterstützen.However, it is less flexible, because it does not allow for custom code; it only allows for certain predefined elements and attributes.

In der folgenden Tabelle haben wir Spaltenformatierungen und den Field Customizer verglichen.The following table compares column formatting and the Field Customizer.

FeldtypField type SpaltenformatierungenColumn formatting Field CustomizerField Customizer
Bedingte Formatierungen auf Basis von Elementwerten und WertebereichenConditional formatting based on item values and value ranges UnterstütztSupported UnterstütztSupported
AktionslinksAction links Unterstützung für statische Links, die keine Skripts startenSupport for static hyperlinks that do not launch script Unterstützung für alle Links, einschließlich Links, die benutzerdefinierte Skripts aufrufenSupport for any hyperlink, including those that invoke custom script
DatenvisualisierungenData visualizations Unterstützung für einfache Visualisierungen, die in HTML und CSS ausgedrückt werden könnenSupport for simple visualizations that can be expressed using HTML and CSS Unterstützung für zufällige DatenvisualisierungenSupport for arbitrary data visualizations

Falls Sie Ihr Szenario mithilfe von Spaltenformatierungen umsetzen können, sind sie die Option der Wahl, da ihr Einsatz schneller und unkomplizierter ist als die Arbeit mit dem Field Customizer.If you can accomplish your scenario by using column formatting, it’s typically quicker and easier to do that than to use a Field Customizer. Jeder Benutzer mit Berechtigungen zur Erstellung und Verwaltung von Listenansichten kann Spaltenformatierungen nutzen, um Anpassungen zu erstellen und zu veröffentlichen.Anyone who can create and manage views in a list can use column formatting to create and publish customizations. Der Field Customizer ist für komplexere Szenarien gedacht, für die keine Spaltenformatierungen unterstützt werden.Use a Field Customizer for more advanced scenarios that column formatting does not support.

Erste Schritte mit SpaltenformatierungenGet started with column formatting

Öffnen Sie das Dropdownmenü unter einer Spalte, um den Bereich für die Spaltenformatierung zu öffnen.To open the column formatting pane, open the drop-down menu under a column. Klicken Sie unter Spalteneinstellungen auf Format this column.Under Column Settings, choose Format this column.

Sofern noch kein anderer Benutzer Spaltenformatierungen auf die ausgewählte Spalte angewendet hat, sieht der Bereich wie der Screenshot unten aus.If no one has used column formatting on the column you selected, the pane will look like the following.

Bereich zur Spaltenformatierung mit Platz zum Einfügen von JSON-Code zur Spaltenformatierung sowie Optionen zum Speichern, Abbrechen und Aufrufen einer Vorschau

Auf Felder ohne Formatierung werden die Standardeinstellungen für das Rendering angewendet.A field with no formatting specified uses the default rendering. Geben Sie den JSON-Code für die Spaltenformatierung in das Feld ein, um die Spalte zu formatieren.To format a column, enter the column formatting JSON in the box.

Eine Vorschau der Formatierung können Sie über Vorschau aufrufen.To preview the formatting, select Preview. Zum Übernehmen der Änderungen klicken Sie auf Speichern.To commit your changes, select Save. Sobald Sie gespeichert haben, ist die angewendete Anpassung für jeden Benutzer sichtbar, der die Liste aufruft.When you save, anyone who views the list will see the customization that you applied.

Am einfachsten können Sie Spalten formatieren, wenn Sie ein Beispiel als Grundlage übernehmen und an Ihr spezifisches Feld anpassen.The easiest way to use column formatting is to start from an example and edit it to apply to your specific field. In den folgenden Abschnitten finden Sie Beispiele, die Sie kopieren, einfügen und gemäß Ihren Szenarien bearbeiten können.The following sections contain examples that you can copy, paste, and edit for your scenarios. Es stehen auch verschiedene Beispiele im SharePoint/sp-dev-column-formatting-Repository zur Verfügung.There are also several samples available in the SharePoint/sp-dev-column-formatting repository.

Anzeigen von Feldwerten (einfach)Display field values (basic)

Die einfachste Spaltenformatierung ist eine Formatierung, die den Wert des Felds in einem Element des Typs <div /> platziert.The simplest column formatting is one that places the value of the field inside a <div /> element. Dieses Beispiel lässt sich auf Zahlenfelder, Textfelder, Auswahlfelder und Datumsfelder anwenden.This example works for number, text, choice, and date fields:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField"
}

Bei einigen Feldtypen ist zum Abrufen der Werte etwas mehr Code erforderlich.Some field types require a bit of extra work to retrieve their values. Personenfelder werden im System als Objekte dargestellt. Dabei ist der Anzeigename der Person in der Eigenschaft title des Objekts enthalten.Person fields are represented in the system as objects, and a person’s display name is contained within that object’s title property. Hier sehen Sie dasselbe Beispiel wie oben, angepasst für Personenfelder:This is the same example, modified to work with the person field:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title"
}

Nachschlagefelder werden ebenfalls als Objekte dargestellt. Der Anzeigetext wird in der Eigenschaft lookupValue gespeichert.Lookup fields are also represented as objects; the display text is stored in the lookupValue property. Dieses Beispiel kann auf Nachschlagefelder angewendet werden:This example works with a lookup field:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.lookupValue"
}

Anwenden bedingter FormatierungApply conditional formatting

Mithilfe von Spaltenformatierungen können Sie Formatvorlagen, Klassen und Symbole auf Felder anwenden, basierend auf dem in den betreffenden Feldern jeweils enthaltenen Wert.You can use column formatting to apply styles, classes, and icons to fields, depending on the value inside those fields.

Bedingte Formatierung auf Basis eines Zahlenbereichs (einfach)Conditional formatting based on a number range (basic)

Die Abbildung unten ist ein Beispiel für eine auf einen Zahlenbereich angewendete bedingte Formatierung.The following image shows an example of conditional formatting applied to a number range.

Schweregradwarnung von 70 auf orangefarbenem Hintergrund

In diesem Beispiel wird mithilfe einer Excel-Formatvorlage des bedingten Ausdrucks (=if) eine Klasse (sp-field-severity--warning) auf das übergeordnete Element des Typs <div /> angewendet, sobald der Wert im aktuellen Feld kleiner oder gleich 70 ist.This example uses an Excel-style conditional expression (=if) to apply a class (sp-field-severity--warning) to the parent <div /> element when the value in the current field is less than or equal to 70. Das Feld wird also farblich hervorgehoben, sobald sein Wert kleiner oder gleich 70 ist, und normal dargestellt bei einem Wert größer als 70.This causes the field to be highlighted when the value is less than or equal to 70, and appear normally if it's greater than 70.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= 70,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Bedingte Formatierung auf Basis eines Werts in einem Text- oder Auswahlfeld (komplex)Conditional formatting based on the value in a text or choice field (advanced)

Die Abbildung unten ist ein Beispiel für eine auf ein Text- oder Auswahlfeld angewendete bedingte Formatierung.The following image shows an example of conditional formatting applied to a text or choice field:

Feld „Status“ mit „Done“ auf grünem Hintergrund, „Blocked“ auf rotem Hintergrund und „In review“ auf orangefarbenem Hintergrund

Eine bedingte Formatierung lässt sich auf Text- oder Auswahlfelder mit einem festgelegten Satz von Werten anwenden.You can apply conditional formatting to text or choice fields that might contain a fixed set of values. Im folgenden Beispiel werden unterschiedliche Klassen angewendet, je nachdem, ob das Feld den Wert „Done“, In „Review“, „Has Issues“ oder einen anderen Wert aufweist.The following example applies different classes depending on whether the value of the field is Done, In Review, Has Issues, or another value. Konkret wird hier basierend auf dem Feldwert eine CSS-Klasse (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) auf das Element des Typs <div /> angewendet.This example applies a CSS class (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) to the <div /> based on the field's value. Anschließend wird ein Element des Typs <span /> mit einem Attribut IconName ausgegeben.It then outputs a <span /> element with an IconName attribute. Dieses Attribut wendet automatisch eine weitere CSS-Klasse auf das Element des Typs <span /> an, die innerhalb des Elements ein Office UI Fabric-Symbol anzeigt.This attribute automatically applies another CSS class to that <span /> that shows an Office UI Fabric icon inside that element. Abschließend wird ein weiteres Element des Typs <span /> ausgegeben, das den Wert des Felds enthält.Finally, another <span /> element is output that contains the value inside the field.

Dieses Muster ist nützlich, wenn Sie unterschiedlichen Werten jeweils eine andere Dringlichkeitsstufe oder einen anderen Schweregrad zuordnen möchten.This pattern is useful when you want different values to map to different levels of urgency or severity. Sie können das Beispiel unten bearbeiten, indem Sie eigene Feldwerte angeben und die Formatvorlagen und Symbole definieren, die diesen Werten zugeordnet werden sollen.You can start from this example and edit it to specify your own field values and the styles and icons that should map to those values.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Anwenden von Formatierungen auf Basis von DatumsbereichenApply formatting based on date ranges

Termine und wichtige Projektzeitachsen werden häufig anhand von Datumsangaben nachverfolgt. Ein gängiges Szenario ist dabei die Anwendung von Formatierungen auf Basis des Werts in einem Datum/Uhrzeit-Feld.Because dates are often used to track deadlines and key project timelines, a common scenario is to apply formatting based on the value in a date/time field. Nutzen Sie die unten beschriebenen Muster, um Formatierungen basierend auf dem Wert eines Datum/Uhrzeit-Felds anzuwenden.To apply formatting based on the value in a date/time field, apply the following patterns.

Formatieren eines Elements, sobald der Wert einer Datumsspalte ein Datum vor oder nach dem aktuellen Datum ist (komplex)Formatting an item when a date column is before or after today's date (advanced)

Die folgende Abbildung zeigt ein Feld, auf das eine bedingte Datumsformatierung angewendet wurde:The following image shows a field with conditional date formatting applied:

Feld „Status“ mit dem Text „Overdue“ in Rot

Bei diesem Beispiel wird das aktuelle Feld rot gefärbt, wenn der Wert des Felds „DueDate“ vor dem aktuellen Datum/der aktuellen Uhrzeit liegt.This example colors the current field red when the value inside an item's DueDate is before the current date/time. Im Gegensatz zu einigen der vorherigen Beispiele ist die Formatierung des Felds also abhängig vom Wert eines anderen Felds.Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Wie Sie sehen, wird zur Referenzierung des Felds „DueDate“ die Syntax [$FieldName] verwendet.Note that DueDate is referenced using the [$FieldName] syntax. Dabei ist „FieldName“ der interne Name des Feldes.FieldName is assumed to be the internal name of the field. Außerdem wird in diesem Beispiel ein besonderer Wert gesetzt, der speziell in Datum/Uhrzeit-Feldern verwendet werden kann: @now, der auf das aktuelle Datum/die aktuelle Uhrzeit auflöst und ausgewertet wird, sobald der Benutzer die Listenansicht lädt.This example also takes advantage of a special value that can be used in date/time fields - @now, which resolves to the current date/time, evaluated when the user loads the list view.

Hinweis

Wenn Leerzeichen im Feldnamen vorhanden sind, werden diese als _x0020_ definiert.If you have spaces in the field name, those are defined as _x0020_. Beispielsweise sollte ein Feld mit dem Namen „DueDate“ als $Due_x0020_Date angegeben werden.For example, a field named "Due Date" should be referenced as $Due_x0020_Date.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#ff0000', '')"
  }
}

Formatieren von Elementen auf Basis zufälliger Datumsangaben (komplex)Formatting items based on arbitrary dates (advanced)

Mithilfe des Musters im folgenden Beispiel können Sie den Wert eines Datum/Uhrzeit-Felds mit einem anderen Datum als dem im Wert @now definierten Datum vergleichen.To compare the value of a date/time field against a date that's not @now, follow the pattern in the following example. Das Beispiel unten färbt das aktuelle Feld rot, wenn der Wert für „DueDate“ kleiner oder gleich dem jeweils morgigen Datum ist.The following example colors the current field red if the due date was <= tomorrow. Dazu wird mit Datumsmathematik gearbeitet.This is accomplished using date math. Wenn zu einem Datum Millisekunden addiert werden, erhalten Sie als Ergebnis ein neues Datum.You can add milliseconds to any date and the result will be a new date. Soll zu einem Datum beispielsweise 1 Tag hinzuaddiert werden, würden Sie (24*60*60*1000 = 86,400,000) hinzuaddieren.For example, to add a day to a date, you'd add (24*60*60*1000 = 86,400,000).

Diese Beispiel zeigt eine alternative Syntax zum Ausdrücken eines bedingten Ausdrucks durch die Verwendung eines tenären (?) Operators innerhalb einer abstrakten Syntaxstruktur.This example demonstrates an alternate syntax to express a conditional expression, using the ternary (?) operator inside an abstract syntax tree.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "+",
                     "operands": [
                        "@now",
                        86400000
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

Hier sehen Sie das gleiche Beispiel wie oben unter Verwendung der Ausdruckssyntax im Excel-Format:Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= @now + 86400000, '#ff0000', '')"
   }
}

Wenn Sie den Wert eines Datum/Uhrzeit-Felds mit einer anderen Datumskonstante abgleichen möchten, konvertieren Sie mithilfe der Methode Date() eine Zeichenfolge in ein Datum.To compare a date/time field value against another date constant, use the Date() method to convert a string to a date. Das Beispiel unten färbt das aktuelle Feld rot, wenn der Wert im Feld „DueDate“ ein früheres Datum ist als der 22.03.2017.The following example colors the current field red if the value in the DueDate field is before 3/22/2017.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "Date()",
                     "operands": [
                        "3/22/2017"
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

Hier sehen Sie das gleiche Beispiel wie oben unter Verwendung der Ausdruckssyntax im Excel-Format:Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= Date('3/22/2017'), '#ff0000', '')"
   }
}

Erstellen klickbarer AktionenCreate clickable actions

Mithilfe von Spaltenformatierungen können Sie Links implementieren, die auf andere Webseiten führen oder benutzerdefinierte Funktionen starten.You can use column formatting to provide hyperlinks that go to other webpages, or start custom functionality. Diese Funktionen sind auf statische Links beschränkt, die sich mit Werten aus Feldern in der Liste parametrisieren lassen.This functionality is limited to static links that can be paramaterized with values from fields in the list. Eine Ausgabe von Links zu anderen Protokollen als http://, https:// oder mailto: ist mithilfe von Spaltenformatierungen nicht möglich.You can't use column formatting to output links to protocols other than http://, https://, or mailto:.

In diesem Beispiel demonstrieren wir Ihnen, wie Sie ein Textfeld mit Börsenticker-Symbolen in einen Link umwandeln, der auf die Yahoo! Finanzen-Seite mit den Echtzeit-Kursen für den betreffenden Börsenticker verweist.This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. Das Beispiel verwendet einen Operator des Typs +, der den Wert des aktuellen Felds an den statischen Link http://finance.yahoo.com/quote/ anfügt.The example uses a + operator that appends the current field value to the static hyperlink http://finance.yahoo.com/quote/. Sie können dieses Muster an jedes Szenario anpassen, in dem Benutzer Kontextinformationen zu einem Element abrufen können sollen oder in dem ein Geschäftsprozess auf das jeweils aktuelle Element angewendet werden soll. Voraussetzung ist lediglich, dass die Informationen oder der Prozess über einen Link abgerufen werden können, der mit Werten aus dem Listenelement parametrisiert wurde.You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item.

Liste von Aktien mit Tickersymbolen als Links

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField",
   "attributes": {
      "target": "_blank",
      "href": "='http://finance.yahoo.com/quote/' + @currentField"
   }
}

Hinzufügen einer interaktiven Schaltfläche zu einem Feld (komplex)Add an action button to a field (advanced)

Die folgende Abbildung zeigt Felder, denen jeweils eine interaktive Schaltfläche hinzugefügt wurde.The following image shows action buttons added to a field.

Feld „Assigned To“ mit Briefschaltflächen neben den Namen

Mithilfe von Spaltenformatierungen können Sie Direktlinks zu Aktionen neben Feldern rendern.You can use column formatting to render quick action links next to fields. Das folgende Beispiel ist für Personenfelder gedacht und rendert zwei Elemente innerhalb des übergeordneten Elements des Typs <div />:The following example, intended for a person field, renders two elements inside the parent <div /> element:

  • Ein Element des Typs <span />, das den Anzeigenamen der Person enthältA <span /> element that contains the person’s display name.
  • Ein Element des Typs <a />, das einen Mailto-Link öffnet. Der Link erstellt eine E-Mail, deren Betreff und Text dynamisch auf Basis von Elementmetadaten aufgefüllt werden.An <a /> element that opens a mailto: link that creates an email with a subject and body populated dynamically via item metadata. Das Element des Typs <a /> wird mithilfe der Fabric-Klassen ms-Icon, ms-Icon—Mail und ms-QuickAction so formatiert, dass es wie ein klickbares Briefsymbol aussieht.The <a /> element is styled using the ms-Icon, ms-Icon—Mail, and ms-QuickAction Fabric classes to make it look like a clickable email icon.
{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickActions",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

Erstellen von einfachen DatenvisualisierungenCreate simple data visualizations

Mithilfe von Spaltenformatierungen können Sie bedingte und arithmetische Operationen kombinieren und so grundlegende Datenvisualisierungen erstellen.Use column formatting to combine conditional and arithmetical operations to achieve basic data visualizations.

Formatieren von Zahlenspalten als Datenbalken (komplex)Format a number column as a data bar (advanced)

Die folgende Abbildung zeigt eine als Datenbalken formatierte Zahlenspalte.The following image shows a number column formatted as a data bar.

Liste „Effort“ mit als Balken formatierten Listenelementen des Typs Zahl

In diesem Beispiel werden die Formatvorlagen background-color und border-top angewendet, um das Feld @currentField (ein Zahlenfeld) als Datenbalken zu visualisieren.This example applies background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. Die Balken für die verschiedenen Werte haben jeweils eine andere Größe, basierend auf dem Attribut width. Es wird auf 100% gesetzt, sobald der Wert größer als 20 ist, und auf (@currentField * 5)%, sobald der Wert kleiner ist als 20.The bars are sized differently for different values based on the way the width attribute is set - it's set to 100% when the value is greater than 20, and (@currentField * 5)% otherwise. Um das Beispiel an eine spezifische Zahlenspalte anzupassen, können Sie die Randbedingung (20) auf den erwarteten Maximalwert des Felds setzen und durch Ändern der Formel festlegen, um wie viel der Balken breiter werden soll, sobald sich der Wert des Felds ändert.To fit this example to your number column, you can adjust the boundary condition (20) to match the maximum anticipated value inside the field, and change the equation to specify how much the bar should grow depending on the value inside the field.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')"
  }
}

Die folgende Abbildung zeigt eine Liste mit Aufwärtstrend- und Abwärtstrend-Symbolen:The following image shows a list with trending up/trending down icons added:

Liste mit Aufwärtstrend- und Abwärtstrend-Symbolen neben den Listenelementen

Dieses Beispiel basiert auf zwei Zahlenfeldern (Before und After), deren Werte miteinander verglichen werden können.This example relies on two number fields, Before and After, for which the values can be compared. Neben dem Feld After wird jeweils das passende Trendsymbol angezeigt, basierend auf einem Vergleich zwischen dem Wert des Felds mit dem Wert des Felds Before.It shows the appropriate trending icon next to the After field, depending on that field's value compared to the value in Before. sp-field-trending--up wird verwendet, wenn der Wert von After höher ist, sp-field-trending--down wird verwendet, wenn der Wert von After niedriger ist.sp-field-trending--up is used when After's value is higher; sp-field-trending--down is used when After's value is lower.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "sp-field-trending--up",
                        "sp-field-trending--down"
                    ]
                },
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "SortUp",
                        {
                            "operator": "?",
                            "operands": [
                                {
                                    "operator": "<",
                                    "operands": [
                                        "[$After]",
                                        "[$Before]"
                                    ]
                                },
                                "SortDown",
                                ""
                            ]
                        }
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

Hier sehen Sie das gleiche Beispiel wie oben unter Verwendung der Ausdruckssyntax im Excel-Format:Here's the same sample from above, using the Excel-style expression syntax:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": "=if([$After] > [$Before], 'sp-field-trending--up', 'sp-field-trending--down')",
                "iconName": "=if([$After] > [$Before], 'SortUp', "=if([$After] < [$Before], 'SortDown', ''))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

Erstellen einer Schaltfläche zum Starten eines FlussesCreate a button to launch a Flow

Der folgende Screenshot zeigt eine Liste mit einer Fluss-Schaltfläche, die zur Aktion-Spalte hinzugefügt wird:The following screenshot shows a list with a Flow button added to the Action column:

Screenshot des Beispiels

Sie können die Spaltenformatierung verwenden, um Schaltflächen zu erstellen, die Abläufe für das entsprechende Listenelemente ausführen, wenn Sie die entsprechende Schaltfläche auswählen.You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. Wenn der Fluss vor der Ausführung für das Sammeln von Daten des Endbenutzers konfiguriert wurde, wird die Fluss-Startleiste nach dem Auswählen der Schaltfläche angezeigt.If the Flow is configured to gather data from the end user before running, the Flow Launch Panel will be displayed after choosing the button. Andernfalls wird der Fluss lediglich ausgeführt.Otherwise, the Flow will just run.

Wenn Sie das folgende Beispiel verwenden möchten, müssen Sie die ID des Flusses, den Sie ausführen möchten, ersetzen.To use the sample below, you must substitute the ID of the Flow you want to run. Diese ID ist im customRowAction-Attribut des button-Elements enthalten.This ID is contained within the customRowAction attribute inside the button element. Abrufen einer Fluss-ID:To obtain a Flow's ID:

  1. Wählen Sie Fluss > Zeigen Sie Ihre Flüsse in der SharePoint-Liste an, in der der Fluss konfiguriert ist.Choose Flow > See your flows in the SharePoint list where the Flow is configured.
  2. Wählen Sie den Fluss aus, den Sie ausführen möchten.Choose the Flow you want to run.
  3. Kopieren Sie die ID am Ende der URL.Copy the ID from the end of the URL.
{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "span",
   "style": {
      "color": "#0078d7"
   },
   "children": [
      {
         "elmType": "span",
     "attributes": {
        "iconName": "Flow"
     }
      },
      {
         "elmType": "button",
     "style": {
        "border": "none",
        "background-color": "transparent",
        "color": "#0078d7",
        "cursor": "pointer"
     },
     "txtContent": "Send to Manager",
     "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"183bedd4-6f2b-4264-855c-9dc7617b4dbe\"}"
     }
      }
   ]
}

Formatieren mehrwertiger FelderFormatting multi-value fields

Mit der Spaltenformatierung können Sie jedem Element eines mehrwertigen Felds vom Typ "Person", "Nachschlagen" und "Auswahl" Formatvorlagen zuweisen.You can use column formatting to apply styles to each member of a multi-value field of type Person, Lookup and Choice.

Grundlegende TextformatierungBasic text formatting

Die Abbildung unten ist ein Beispiel für eine auf ein mehrwertiges Personenfeld angewendete Formatierung.The following image shows an example of multi-value field formatting applied to a Person field.

Liste der Schaltflächen, mit der alle Zuweisungsempfänger über jeden Artikel informiert werden. Die erste Zeile ist leer, die zweite Zeile lautet "E-Mail an Loyd Barham senden", die dritte Zeile lautet "E-Mail an alle 3 Mitglieder senden".

In diesem Beispiel wird der length-Operator verwendet, um die Anzahl der Elemente des Felds zu ermitteln, und der join-Operator, um die E-Mail-Adressen aller Elemente zu verketten.This example uses the length operator to detect the number of members of the field, and used join operator to concatenate the email addresses of all members. In diesem Beispiel wird die Schaltfläche ausgeblendet, wenn kein Element gefunden wird. Zudem werden Pluralformen im Text behandelt.This example hides the button when no member is found, and takes care of plurals in the text.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "a",
    "style": {
        "display": "=if(length(@currentField) > 0, 'flex', 'none')"
    },
    "attributes": {
        "href": {
            "operator": "+",
            "operands": [
                "mailto:",
                "=join(@currentField.email, ';')"
            ]
        }
    },
    "children": [
        {
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": "Mail"
            }
        },
        {
            "elmType": "span",
            "txtContent": {
                "operator": "+",
                "operands": [
                    "Send email to ",
                    {
                        "operator": "?",
                        "operands": [
                            "=length(@currentField) == 1",
                            "@currentField.title",
                            "='all ' + length(@currentField) + ' members'"
                        ]
                    }
                ]
            }
        }
    ]
}

Formatieren einfacher HTML-ElementeSimple HTML elements formatting

Die folgende Abbildung zeigt ein Beispiel für die Konstruktion eines einfachen Satzes aus den Werten eines mehrwertigen Nachschlagefelds.The following image shows an example of constructing a simple sentence from the values of a multi-value Lookup field.

Screenshot eines Felds mit dem Text "Nordamerika, Asien-Pazifik und Europa"

In diesem Beispiel werden die Operatoren loopIndex und length verwendet, um das letzte Element des Felds zu identifizieren, und das Attribut forEach, um HTML-Elemente zu duplizieren.This examples uses operator loopIndex and length to identify the last member of the field, and attribute forEach to duplicate HTML elements.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "block"
    },
    "children": [
        {
            "elmType": "span",
            "forEach": "region in @currentField",
            "txtContent": {
               "operator": "?",
               "operands": [
                  "=loopIndex('region') == 0",
                  "[$region.lookupValue]",
                  {
                     "operator": "?",
                     "operands": [
                        "=loopIndex('region') + 1 == length(@currentField)",
                        "=', and ' + [$region.lookupValue]",
                        "=', ' + [$region.lookupValue]"
                     ]
                  }
               ]
            }
        }
    ]
}

Formatieren komplexer HTML-ElementeComplex HTML elements formatting

Die folgende Abbildung zeigt ein Beispiel für den Aufbau einer Benutzerliste mit Bildern, E-Mail-Adressen und einem einfachen Zähler am oberen Rand für die Anzahl der Elemente.The following image shows an example of building a list of users with pictures, email addresses and a simple counter for the number of members at the top.

Liste namens "Besitzer" und 3 Zeilen, in denen für jeden Benutzer im Feld ein Profilbild, ein Name und eine E-Mail angezeigt wird. Zudem ein kleiner grauer Zähler der Besitzer oben links in der Ecke, der eine andere Farbe aufweist, wenn die Anzahl "0" beträgt.

In diesem Beispiel wird der Operator loopIndex verwendet, um die Ränder aller Zeilen außer der ersten zu steuern, und das Attribut forEach, um die Liste der Elemente zu erstellen.This examples uses operator loopIndex to control the margins all rows but the first one, and attribute forEach to build the list of members.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "min-height": "1.5em",
        "flex-direction": "column",
        "align-items": "start"
    },
    "children": [
        {
            "elmType": "div",
            "txtContent": "=length(@currentField)",
            "style": {
                "border-radius": "1.5em",
                "height": "1.5em",
                "min-width": "1.5em",
                "color": "white",
                "text-align": "center",
                "position": "absolute",
                "top": "0",
                "right": "1em",
                "background-color": "=if(length(@currentField) == 0, '#ddd', '#aaa'"
            }
        },
        {
            "elmType": "div",
            "forEach": "person in @currentField",
            "style": {
                "justify-content": "center",
                "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "attributes": {
                                "src": "=[$person.picture]"
                            },
                            "style": {
                                "width": "3em",
                                "height": "3em",
                                "border-radius": "3em"
                            }
                        },
                        {
                            "elmType": "a",
                            "attributes": {
                                "href": "='mailto:' + [$person.email]"
                            },
                            "style": {
                                "margin-left": "0.5em"
                            },
                            "children": [
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                        "font-size": "1.2em"
                                    }
                                },
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.email]",
                                    "style": {
                                        "color": "gray"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Unterstützte SpaltentypenSupported column types

Spaltenformatierungen können auf folgende Spaltentypen angewendet werden:The following column types support column formatting:

  • Eine TextzeileSingle line of text
  • ZahlNumber
  • AuswahlChoice
  • Person oder GruppePerson or Group
  • Ja/NeinYes/No
  • HyperlinkHyperlink
  • BildPicture
  • Datum/UhrzeitDate/Time
  • NachschlagenLookup
  • Titel (in Listen)Title (in Lists)

Folgende Spaltentypen werden derzeit nicht unterstützt:The following are not currently supported:

  • Verwaltete MetadatenManaged Metadata
  • Dateiname (in Dokumentbibliotheken)Filename (in Document Libraries)
  • BerechnetCalculated
  • AufbewahrungsbezeichnungRetention Label
  • WährungCurrency

Richtlinien für FormatvorlagenStyle guidelines

Vordefinierte KlassenPredefined classes

Mit den nachfolgend aufgeführten vordefinierten Klassen lässt sich eine ganze Reihe gängiger Szenarien umsetzen.You can use the following predefined classes for several common scenarios.

Name der KlasseClass name ScreenshotScreenshot
sp-field-customFormatBackgroundsp-field-customFormatBackground Legt die Innen- und Außenabstände aller Klassen fest, die einen Hintergrund verwenden.Specifies the padding and margins for all classes that use backgrounds.
sp-field-severity--goodsp-field-severity--good Grünes Feld mit Text „Done“ und Häkchen
sp-field-severity--lowsp-field-severity--low Weißes Feld mit Text „In Progress“ und Pfeil
sp-field-severity--warningsp-field-severity--warning Gelbes Feld mit Text „In Review“ und Gefahrensymbol
sp-field-severity--severeWarningsp-field-severity--severeWarning Orangefarbenes Feld mit Text „Has issues“ und Gefahrensymbol
sp-field-severity--blockedsp-field-severity--blocked Rotes Feld mit Text „Blocked“ und X-Symbol
sp-field-dataBarssp-field-dataBars Blauer Balken mit der Zahl 4
sp-field-trending--upsp-field-trending--up Grüner Pfeil neben der Zahl 500
sp-field-trending--downsp-field-trending--down Roter Pfeil neben der Zahl 100
sp-field-quickActionssp-field-quickActions Name mit Briefsymbol

Hinweis

Die oben angezeigten Symbole für die sp-field-severity Klassen sind NICHT Teil der Klasse.The icons shown above for the sp-field-severity classes are NOT part of the class. Nur die Hintergrundfarbe ist enthalten.Only the background color is included. Symbole können mittels des iconName Attributs hinzugefügt werden.Icons can be added by using the iconName attribute.

Zusätzlich zu den oben aufgeführten Klassen können die von Office-Benutzeroberfläche-Fabric definierten Klassen (z. B. Designfarbe, Typografie, Rastersystem usw.) verwendet werden.In addition to the classes listed above, the classes (such as the theme color, typography, grid system, etc.) defined by the Office UI Fabric can be used. Einzelheiten hierzu finden Sie auf der Fabric-Website.For details, see the Fabric website.

Vordefinierte SymbolePredefined icons

Sie können vordefinierte Symbole aus Office UI Fabric verwenden.You can use predefined icons from Office UI Fabric. Einzelheiten hierzu finden Sie auf der Fabric-Website.For details, see the Fabric website.

Erstellen von benutzerdefiniertem JSON-CodeCreating custom JSON

Sobald Sie das Schema einmal verstanden haben, ist die Erstellung von benutzerdefiniertem JSON-Code zur Formatierung von Spalten ganz unkompliziert.Creating custom column formatting JSON from scratch is simple if you understand the schema. Gehen Sie wie folgt vor, um eine benutzerdefinierte Spaltenformatierung zu erstellen:To create your own custom column formatting:

  1. Laden Sie Visual Studio Code herunter.Download Visual Studio Code. Der Download ist kostenlos und dauert nicht lange.It's free and fast to download.

  2. Erstellen Sie in Visual Studio Code eine neue Datei, und speichern Sie die leere Datei mit der Dateiendung „.json“.In Visual Studio Code, create a new file, and save the empty file with a .json file extension.

  3. Fügen Sie die folgenden Codezeilen in die leere Datei ein:Paste the following lines of code into your empty file.

     {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json"
     }
    

    Nun können Sie Ihren selbst erstellten JSON-Code prüfen und AutoVervollständigen nutzen.You now have validation and autocomplete to create your JSON. Fügen Sie Ihren eigenen JSON-Code nach der ersten Zeile ein. In ihr ist der Speicherort des Schemas festgelegt.You can start adding your JSON after the first line that defines the schema location.

Tipp

Über die Tastenkombination STRG+Leertaste können Sie in Visual Studio Code jederzeit Vorschläge für Eigenschaften und Werte aufrufen.At any point, select Ctrl+Space to have Visual Studio Code offer suggestions for properties and values. Weitere Informationen finden Sie unter JSON-Bearbeitung mit Visual Studio-Code.For more information, see Editing JSON with Visual Studio Code.

Tipp

SharePoint Patterns and Practices bietet einen kostenlose Webpart, Spaltenformatierung, der verwendet werden kann, um Formate direkt im Browser anzuwenden und zu bearbeiten.SharePoint Patterns and Practices provides a free web part, Column Formatter, that can be used to edit and apply formats directly in the browser.

Detaillierte SyntaxreferenzDetailed syntax reference

elmTypeelmType

Gibt an, welcher Typ von Element erstellt werden soll.Specifies the type of element to create. Folgende Elemente sind gültige Elemente:Valid elements include:

  • divdiv
  • spanspan
  • aa
  • imgimg
  • svgsvg
  • pathpath
  • buttonbutton

Bei allen anderen Werten wird ein Fehler zurückgegeben.Any other value will result in an error.

Schaltflächenelementebutton elements

Button Elemente können verwendet werden, um eine bestimmte Aktion für das übergeordnete Element zu starten.Button elements can be used to launch a specific action on the parent item. Jedes button Element verfügt über eine erforderliche Eigenschaft, customRowAction, die eine action festlegt, die beim Anklicken einer Schaltfläche ausgeführt wird.Every button element has a requred property, customRowAction, that specifies an action that's taken when the button is clicked. Die Aktion muss einer der folgenden Werte sein:This action must be one of the following values:

  • defaultClick: Schaltflächen mit dieser Aktion führen dieselbe Aktion aus wie das Klicken auf das Listenelement in einer nicht angepassten Ansicht.defaultClick: buttons with this action will do the same thing as clicking the list item in an uncustomized view. Nachfolgend finden Sie ein Beispiel für eine Schaltfläche, die, wenn sie angeklickt wird, einen Klick auf das Element simuliert, wodurch der Detailbereich geöffnet wird.Below is an example of a button that, when clicked, simulates a click on the item, which results in the details pane being opened.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}

  • share: Durch Klicken auf diese Schaltfläche wird das Freigabe-Dialogfeld geöffnet.share: Clicking the button will open the sharing dialog. Es folgt ein Beispiel für diese Art von Schaltfläche.Below is an example of this type of button.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Share this item",
  "customRowAction": {
    "action": "share"
  }
}

  • delete: Durch Klicken auf diese Schaltfläche wird das Bestätigungsdialogfeld geöffnet.delete: Clicking the button will open the delete confirmation dialog.
  • editProps: Durch Klicken auf diese Schaltfläche wird die Elementeigenschaftenseite im Bearbeitungsmodus geöffnet.editProps: Clicking the button will open the item properties page in edit mode.
  • executeFlow: Durch Klicken auf diese Schaltfläche wird der von der ID innerhalb des actionParams-Attributs angegebene Fluss gestartet.executeFlow: Clicking the button will launch the specified Flow, specified by ID inside the actionParams attribute. Ein Beispiel hierfür finden Sie im Abschnitt Erstellen einer Schaltfläche zum Starten eines Flusses in diesem Dokument.For an example of this, see the Create a button to launch a Flow section in this document.

txtContenttxtContent

Eine optionale Eigenschaft, die den Textinhalt des in elmType definierten Elements festlegt.An optional property that specifies the text content of the element specified by elmType. Der Wert dieser Eigenschaft kann entweder eine Zeichenfolge sein (auch eine Spezialzeichenfolge) oder ein Objekt des Typs „Expression“.The value of this property can either be a string (including special strings) or an Expression object.

stylestyle

Eine optionale Eigenschaft, die die Formatattribute des in elmType definierten Elements festlegt.An optional property that specifies style attributes to apply to the element specified by elmType. Konkret handelt es sich um ein Objekt mit Name/Wert-Paaren, die CSS-Namen und -Werten entsprechen.This is an object with name-value pairs that correspond to CSS names and values. Die Werte der einzelnen Eigenschaften in einem Objekt des Typs „style“ können entweder eine Zeichenfolge sein (auch eine Spezialzeichenfolge) oder ein Objekt des Typs „Expression“.The values of each property in the style object can either be a string (including special strings) or an Expression object. Folgende Attribute sind für „style“ zulässig:The following style attributes are allowed.

'background-color'
'fill'
'background-image'
'border'
'border-bottom'
'border-bottom-color'
'border-bottom-style'
'border-bottom-width'
'border-color'
'border-left'
'border-left-color'
'border-left-style'
'border-left-width'
'border-right'
'border-right-color'
'border-right-style'
'border-right-width'
'border-style'
'border-top'
'border-top-color'
'border-top-style'
'border-top-width'
'border-width'
'outline'
'outline-color'
'outline-style'
'outline-width'
'border-bottom-left-radius'
'border-bottom-right-radius'
'border-radius'
'border-top-left-radius'
'border-top-right-radius'
'box-decoration-break'
'box-shadow'
'box-sizing'

'overflow-x'
'overflow-y'
'overflow-style'
'rotation'
'rotation-point'

'opacity'
'cursor'

'height'
'max-height'
'max-width'
'min-height'
'min-width'
'width'

'flex-grow'
'flex-shrink'
'flex-flow'
'flex-direction'
'flex-wrap'
'flex'
'justify-content'
'align-items'

'box-align'
'box-direction'
'box-flex'
'box-flex-group'
'box-lines'
'box-ordinal-group'
'box-orient'
'box-pack'

'font'
'font-family'
'font-size'
'font-style'
'font-variant'
'font-weight'
'font-size-adjust'
'font-stretch'

'grid-columns'
'grid-rows'

'margin'
'margin-bottom'
'margin-left'
'margin-right'
'margin-top'

'column-count'
'column-fill'
'column-gap'
'column-rule'
'column-rule-color'
'column-rule-style'
'column-rule-width'
'column-span'
'column-width'
'columns'

'padding'
'padding-bottom'
'padding-left'
'padding-right'
'padding-top'

'bottom'
'clear'
'clip'
'display'
'float'
'left'
'overflow'
'position' 
'right'
'top'
'visibility'
'z-index'

'border-collapse'
'border-spacing'
'caption-side'
'empty-cells'
'table-layout'

'color'
'direction'
'letter-spacing'
'line-height'
'text-align'
'text-decoration'
'text-indent'
'text-transform'
'unicode-bidi'
'vertical-align'
'white-space'
'word-spacing'
'hanging-punctuation'
'punctuation-trim'
'text-align-last'
'text-justify'
'text-outline'
'text-shadow'
'text-wrap'
'word-break'
'word-wrap'

Das Beispiel unten zeigt den Wert eines Objekts des Typs „style“.The following example shows the value of a style object. Wie Sie sehen, werden zwei Formateigenschaften angewendet (padding und background-color).In this example, two style properties (padding and background-color) will be applied. Der Wert für padding ist ein hartcodierter Zeichenfolgenwert.The padding value is a hard-coded string value. Der Wert für background-color ist ein Objekt des Typs „Expression“, das entweder in Rot (#ff0000) oder in Grün (#00ff00) ausgewertet wird, je nachdem, ob der Wert des aktuellen Felds (@currentField) kleiner als 40 ist.The background-color value is an Expression that is evaluated to either red (#ff0000) or green (#00ff00) depending on whether the value of the current field (specified by @currentField) is less than 40. Weitere Informationen finden Sie im Abschnitt zu Objekten des Typs „Expression“.For more information, see the Expression object section.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "style": {
      "padding": "4px",
      "background-color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<",
               "operands": [
                  "@currentField",
                  40
               ]
            },
            "#ff0000",
            "#00ff00"
         ]
      }
   }
}

Hier sehen Sie das gleiche Beispiel wie oben unter Verwendung der Ausdruckssyntax im Excel-Format:Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "style": {
      "padding": "4px",
      "background-color": "=if(@currentField < 40, '#ff0000', '#00ff00')"
   }
}

attributesattributes

Eine optionale Eigenschaft, die zusätzliche Attribute für das in elmType definierte Element festlegt.An optional property that specifies additional attributes to add to the element specified by elmType. Konkret handelt es sich um ein Objekt mit Name/Wert-Paaren.This is an object with name-value pairs. Gültig sind die folgenden Attributnamen:Attribute names must be one of the following:

  • hrefhref
  • relrel
  • srcsrc
  • classclass
  • targettarget
  • titletitle
  • rolerole
  • iconNameiconName
  • dd
  • ariaaria

Bei allen anderen Attributnamen wird ein Fehler zurückgegeben.Any other attribute name will result in an error. Attributwerte können entweder Objekte des Typs „Expression“ oder Zeichenfolgen sein.Attribute values can either be Expression objects or strings. Das folgende Beispiel fügt dem in elmType definierten Element zwei Attribute hinzu (target und href).The following example adds two attributes (target and href) to the element specified by elmType. Das Attribut target ist eine hartcodierte Zeichenfolge.The target attribute is hard-coded to a string. Das href-Attribut ist ein Ausdruck, der zur Laufzeit ausgewertet wird in http://finance.yahoo.com/quote/, ergänzt um den Wert des aktuellen Felds (@currentField).The href attribute is an expression that will be evaluated at runtime to http://finance.yahoo.com/quote/ + the value of the current field (@currentField).

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "target": "_blank",
    "href": "='http://finance.yahoo.com/quote/' + @currentField"
}

Untergeordnetes Elementchildren

Eine optionale Eigenschaft, die die untergeordneten Elemente des in elmType definierten Elements festlegt.An optional property that specifies child elements of the element specified by elmType. Der Wert wird als Array von Objekten des Typs elm angegeben.The value is specified as an array of elm objects. Er kann beliebig geschachtelt werden.There can be an arbitrary level of nesting. Ist für ein Element die Eigenschaft txtContent festgelegt, werden die Eigenschaften der untergeordneten Elemente ignoriert.If an element has the txtContent property, the child properties are ignored.

debugModedebugMode

Eine optionale Eigenschaft, die zum Debuggen gedacht ist.An optional property that is meant for debugging. Sie gibt Fehlermeldungen aus und protokolliert Warnungen in der Konsole.It outputs error messages and logs warnings to the console.

forEachforEach

Eine optionale Eigenschaft, die es einem Element ermöglicht, sich für jedes Element eines bestimmten mehrwertigen Felds zu duplizieren.An optional property that allows an element to duplicate itself for each member of a specific multi-value field. Der Wert der Eigenschaft "forEach" sollte entweder das Format "iteratorName in @currentField" oder "iteratatorName in [$FieldName]" aufweisen.The value of "forEach" property should be in the format of either "iteratorName in @currentField" or "iteratatorName in [$FieldName]".

iteratorName steht für den Namen der Iteratorvariablen, die verwendet wird, um das aktuelle Element des mehrwertigen Felds darzustellen.iteratorName represents the name of iterator variable that is used to represent the current member of the multi-value field. Der Name des Iterators kann eine beliebige Kombination aus alphanumerischen Zeichen und Unterstrich (_) sein, die nicht mit einer Ziffer beginnt.The name of the iterator can be any combination of alphanumeric characters and underscore (_) that does not start with a digit.

Das in der Schleife verwendete Feld muss einen unterstützten Feldtyp ("Person", "Nachschlagen" und "Auswahl") aufweisen und die Option für Mehrwertigkeit muss aktiviert sein.The field used in the loop must be in a supported field type with multi-value option enabled: Person, Lookup, and Choice.

Im Element mit forEach oder seinen untergeordneten Elementen kann auf die Iteratorvariable so verwiesen werden, als wäre sie ein neues Feld.In the element with forEach or its childern elements, the iterator variable can be referred as if it is a new field. Der Zugriff auf den Index des Iterators erfolgt mit dem loopIndex-Operator.The index of the iterator can be accessed with loopIndex operator.

forEach kann nicht auf das Stammelement angewendet, und gibt kein Element zurück, wenn das Feld keinen Wert enthält.forEach cannot be applied to the root element, and will render no element if there is no value in the field.

Beispiele finden Sie hier.See here for examples.

AusdrückeExpressions

Die Werte für txtContent sowie für Formateigenschaften und Attributeigenschaften können auch als Ausdrücke definiert werden, die zur Laufzeit auf Basis des Kontexts des aktuellen Feldes (oder der aktuellen Zeile) ausgewertet werden.Values for txtContent, style properties, and attribute properties can be expressed as expressions, so that they are evaluated at runtime based on the context of the current field (or row). Objekte des Typs „Expression“ können geschachtelt werden. Das heißt, sie dürfen andere Objekte des Typs „Expression“ enthalten.Expression objects can be nested to contain other Expression objects.

Ausdrücke können als Ausdrücke im Excel-Format in SharePoint Online oder unter Verwendung von Ausdrücken in der abstrakten Syntaxstruktur in SharePoint Online und SharePoint 2019 geschrieben werden.Expressions can be written using Excel-style expressions in SharePoint Online, or by using Abstract Syntax Tree expressions in SharePoint Online and SharePoint 2019.

Excel-Formatvorlage AusdrückeExcel-style expressions

Alle Excel-Formatvorlagen-Ausdrücke beginnen mit einem Gleichheitszeichen (=).All Excel-style expressions begin with an equal (=) sign. Dieses Ausdrucksformat ist nur in SharePoint Online (nicht in SharePoint 2019) verfügbar.This style of expression is only available in SharePoint Online (not SharePoint 2019).

Dieser einfache bedingte Ausdruck berechnet none wenn @me nicht gleich [$Author.email] ist und berechnet andernfalls ``:This simple conditional expression evaluates to none if @me is not equal to [$Author.email], and evaluates to `` otherwise:

=if(@me != [$Author.email], 'none', '') 

Komplexere if/else-Anweisung können wie folgt geschrieben werden:More complex if/else statements can be written like this:

=if([$Sentiment] <= 0.3, 'sp-field-severity--blocked', if([$Sentiment] < 0.9,'sp-field-severity--warning','sp-field-severity--good')) 

Nicht-bedingte Operatoren, die einen oder zwei Operanden ausführen, können wie folgt geschrieben werden:Non-conditional operators that take one or two operands can be written like this:

=[$foo] * -7 
=sin(@currentField) 
=toString(60 + (sin(6.2831853 * @currentField) * 60)) 

Abstrakte Syntaxstruktur-AusdrückeAbstract Syntax Tree expressions

Das folgende Beispiel enthält ein Objekt des Typs „Expression“, das den folgenden Ausdruck ausführt:The following example contains an Expression object that performs the following expression:

(@currentField > 40) ? '100%' : (((@currentField * 2.5).toString() + '%')

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "operator": "?",
   "operands": [
      {
         "operator": ">",
         "operands": [
            "@currentField",
            "40"
         ]
      },
      "100%",
      {
         "operator": "+",
         "operands": [
            {
               "operator": "toString()",
               "operands": [
                  {
                     "operator": "*",
                     "operands": [
                        "@currentField",
                        2.5
                     ]
                  }
               ]
            },
            "%"
         ]
      }
   ]
}

OperatorenOperators

Operatoren legen fest, welcher Typ von Operation ausgeführt werden soll.Operators specify the type of operation to perform. Die folgenden Operatoren sind gültige Werte:The following operators are valid values:

  • +
  • -
  • /
  • *
  • <
  • >
  • ==
  • !=!=
  • <=
  • >=
  • ||
  • &&
  • toString()toString()
  • Number()Number()
  • Date()Date()
  • coscos
  • sinsin
  • ??
  • toLocaleString()toLocaleString()
  • toLocaleDateString()toLocaleDateString()
  • toLocaleTimeString()toLocaleTimeString()
  • indexOfindexOf
  • toLowerCasetoLowerCase
  • Verknüpfungjoin
  • lengthlength
  • absabs
  • loopIndexloopIndex

Binäre arithmetische Operatoren: Unten sehen Sie die standardmäßigen arithmetischen binären Operatoren. Diese erwarten zwei Operanden:Binary arthmetic operators - The following are the standard arithmetic binary operators that expect two operands:

  • +
  • -
  • /
  • *
  • <
  • >
  • <=
  • >=

Unäre Operatoren: Unten sehen Sie die standardmäßigen unären Operatoren. Diese erwarten nur einen einzigen Operanden:Unary operators - The following are standard unary operators that expect only one operand:

  • toString(): Gibt eine Zeichenfolge zur Darstellung des Objekts zurück.toString(): returns a string representing the object

    • "txtContent": "=toString(45)" ergibt 45"txtContent": "=toString(45)" results in "45"
  • Number(): Gibt den numerischen Wert zurück; wenn der Operand keine Zahl ist, wird NaN zurückgegeben.Number(): returns the numeric value, if the operand is not a number, NaN is returned

    • "txtContent": "=Number('365')" ergibt 365"txtContent": "=Number('365')" results in 365
    • "txtContent": "=Number('Wowee')" ergibt NaN"txtContent": "=Number('Wowee')" results in NaN
    • "txtContent": "=Number(Date('12/26/1981'))" ergibt 378190800000"txtContent": "=Number(Date('12/26/1981'))" results in 378190800000
  • Date(): Gibt ein dateTime-Objekt aus dem Parameter zurück (konvertiert Zeichenfolgen oder Zahlen unter Berücksichtigung des Gebietsschemas in Datumsangaben)Date(): returns a datetime object from the parameter (converts strings or numbers to dates, sensitive to locale)

    • "txtContent": "=Date('12/26/1981')" ergibt 26.12.1981, 12:00:00 Uhr"txtContent": "=Date('12/26/1981')" results in 12/26/1981, 12:00:00 AM
  • cos: Gibt den Kosinus des angegebenen Winkels an, der als Bogenmaß angegeben werden sollte.cos: returns the cosine of the specified angle which should be specified in radians

    • "txtContent": "=cos(5)" ergibt 0,28366218546322625"txtContent": "=cos(5)" results in 0.28366218546322625
  • sin: Gibt den Sinus einer Zahl zurück.sin: returns the sine of a number

    • "txtContent": "=sin(90)" ergibt 0,8939966636005579"txtContent": "=sin(90)" results in 0.8939966636005579
  • toLocaleString(): Gibt eine sprachabhängige Darstellung eines Datums zurück.toLocaleString(): returns a language sensitive representation of a date

    • "txtContent":"=toLocaleString(@now)"-Ergebnisse variieren je nach dem Gebietsschema des Benutzers, „en-us“ wird aber als 2/5/2019, 1:22:24 PM dargestellt."txtContent":"=toLocaleString(@now)" results vary based on user's locale, but en-us looks like "2/5/2019, 1:22:24 PM"
  • toLocaleDateString(): Gibt eine sprachabhängige Darstellung des Datumsteils einer Datumsangabe zurück.toLocaleDateString(): returns a language sensitive representation of just the date portion of a date

    • "txtContent":"=toLocaleDateString(@now)"-Ergebnisse variieren je nach dem Gebietsschema des Benutzers, „en-us“ wird aber als 2/5/2019 dargestellt."txtContent":"=toLocaleDateString(@now)" results vary based on user's locale, but en-us looks like "2/5/2019"
  • toLocaleDateString(): Gibt eine sprachabhängige Darstellung des Uhrzeitteils einer Datumsangabe zurück.toLocaleTimeString(): returns a language sensitive representation of just the time portion of a date

    • "txtContent":"=toLocaleTimeString(@now)"-Ergebnisse variieren je nach dem Gebietsschema des Benutzers, „en-us“ wird aber als 1:22:24 PM dargestellt."txtContent":"=toLocaleTimeString(@now)" results vary based on user's locale, but en-us looks like "1:22:24 PM"
  • toLowerCase: Gibt den Wert konvertiert in Kleinbuchstaben zurück (funktioniert nur in Zeichenfolgen) – Nur in SharePoint Online verfügbartoLowerCase: returns the value converted to lower case (only works on strings) - Only available in SharePoint Online

    • "txtContent":"=toLowerCase('DogFood')" ergibt "dogfood""txtContent":"=toLowerCase('DogFood')" results in "dogfood"
  • abs: Gibt den absoluten Wert für eine bestimmte Zahl zurück – Nur in SharePoint Online verfügbarabs: returns the absolute value for a given number - Only available in SharePoint Online

    • "txtContent":"=abs(-45)" ergibt 45"txtContent":"=abs(-45)" results in 45
  • length: Gibt die Anzahl von Elementen in einem Array (Mehrfachauswahl für Personen oder Werte) zurück; für alle anderen Werttypen wird bei „true“ 1 und bei „false“ 0 zurückgegeben.length: returns the number of items in an array (multi-select person or choice field), for all other value types it returns 1 when true and 0 when false. Es wird NICHT die Länge eines Zeichenfolgenwerts bereitgestellt.It does NOT provide the length of a string value. - Nur in SharePoint Online verfügbar - Only available in SharePoint Online

    • "txtContent":"=length(@currentField)" kann 2 ergeben, wenn 2 Werte ausgewählt wurden."txtContent":"=length(@currentField)" might result in 2 if there are 2 selected values
    • "txtContent":"=length('Some Text')" ergibt 1"txtContent":"=length('Some Text')" results in 1
    • "txtContent":"=length('')" ergibt 0"txtContent":"=length('')" results in 0
    • "txtContent":"=length(45)" ergibt 1"txtContent":"=length(45)" results in 1
    • "txtContent":"=length(0)" ergibt 0"txtContent":"=length(0)" results in 0

Binäre Operatoren: Unten sehen Sie die binären Operatoren, die zwei Operanden verwenden:Binary operators - The following are operators that expect two operands:

  • indexOf: Verwendet 2 Operanden.indexOf: takes 2 operands. Der erste ist der Text, in dem Sie suchen möchten, der zweite ist der Text, nach dem Sie suchen möchten.The first is the text you would like to search within, the second is the text you would like to search for. Gibt den Indexwert des ersten Vorkommens des Suchbegriffs in der Zeichenfolge an.Returns the index value of the first occurence of the search term within the string. Die Indizes beginnen bei 0.Indexes start at 0. Wenn der Suchbegriff im Text nicht gefunden wird, wird -1 zurückgegeben.If the search term is not found within the text, -1 is returned. Bei diesem Operator wird Groß- und Kleinschreibung unterschieden.This operator is case-sensitive. - Nur in SharePoint Online verfügbar - Only available in SharePoint Online

    • "txtContent": "=indexOf('DogFood', 'Dog')" ergibt 0"txtContent": "=indexOf('DogFood', 'Dog')" results in 0
    • "txtContent": "=indexOf('DogFood', 'F')" ergibt 3"txtContent": "=indexOf('DogFood', 'F')" results in 3
    • "txtContent": "=indexOf('DogFood', 'Cat')" ergibt -1"txtContent": "=indexOf('DogFood', 'Cat')" results in -1
    • "txtContent": "=indexOf('DogFood', 'f')" ergibt -1"txtContent": "=indexOf('DogFood', 'f')" results in -1
  • join: Verwendet 2 Operanden.join: takes 2 operands. Der erste ist ein Array (Mehrfachauswahl für Personen und Werte), der zweite ist die trennende Zeichenfolge.The first is an array (multi-select person or choice field) and the second is the separating string. Gibt eine Zeichenfolgenverkettung der Arraywerte zurück, die durch die trennende Zeichenfolge getrennt werden.Returns a string concatenation of the array values separated by the separating string. - Nur in SharePoint Online verfügbar - Only available in SharePoint Online

    • "txtContent": "=join(@currentField, ', ')" kann (je nach den ausgewählten Werten) „Apfel, Orange, Kirsche“ ergeben"txtContent": "=join(@currentField, ', ')" might result in "Apple, Orange, Cherry" (depending on the selected values)
    • "txtContent": "=join(@currentField.title, '|')" kann (je nach den ausgewählten Personen) „Chris Kent|Vesa Juvonen|Jeff Teper“ ergeben"txtContent": "=join(@currentField.title, '|')" might result in "Chris Kent|Vesa Juvonen|Jeff Teper" (depending on the selected persons)

Bedingter Operator: Unten sehen Sie den bedingten Operator:Conditional operator - The conditional operator is:

  • **? **: Bedingte Operatoren, die in der abstrakten Struktursyntax geschrieben werden, verwenden ? als Operator.?: Conditional operations written in Abstract Tree Syntax use ? as the operator. Er wird zur Formulierung von Ausdrücken des Typs „a ?This is to achieve an expression equivalent to a ? b : c“ verwendet. Ist der Ausdruck „a“ wahr, so lautet das Ergebnis „b“; ansonsten lautet das Ergebnis „c“.b : c, where if the expression a evaluates to true, then the result is b, else the result is c. Für Excel-Formatvorlagenausdrücke schreiben Sie diese mit einer if-Anweisung.For Excel style expressions you write these with an if statement. Unabhängig davon gibt es 3 Operanden.Regardless, there are 3 operands. Der erste ist die auszuwertende Bedingung.The first is the condition to evaluate. Der erste ist das Ergebnis, wenn die Bedingung „true“ ist.The second is the result when the condition is true. Der zweite ist das Ergebnis, wenn die Bedingung „false“ ist.The third is the result when the condition is false.
    • "txtContent":"=if(4 < 5, 'yes', 'no')" ergibt ja"txtContent":"=if(4 < 5, 'yes', 'no')" results in "yes"
    • "txtContent":"=if(4 > 5, 'yes', 'no')" ergibt nein"txtContent":"=if(4 > 5, 'yes', 'no')" results in "no"

Mehrwertige feldbezogene Operatoren – Die folgenden Operatoren werden nur im Kontext mit mehrwertigen Feldern vom Typ "Person", "Nachschlagen" oder "Auswahl" verwendet.Multi-value field-related operators - The following operators are only used in a context with multi-value field of type Person, Lookup, or Choice.

  • lengthlength
  • joinjoin
  • loopIndexloopIndex

length gibt bei Angabe eines Feldnamens die Anzahl der Elemente in einem mehrwertigen Feld zurück.length, when provided with a field name, returns the number of members in a multi-valued field. Wird ein einwertiges Feld angegeben, gibt length den Wert "1" zurück, sofern das Feld einen Wert enthält.When a single-value field is provided, length will return 1 when there is a value in that field.

join verkettet Werte in einem mehrwertigen Feld mit einem angegebenen Trennzeichen.join concatenates values in a multi-value field with a specified separator. Der erste Operand muss auf einen Wert in einem mehrwertigen Feld zeigen, z. B. "@currentField.lookupValue", "[$AssignedTo.title]".The first operand shall point to a value in a multi-value field, e.g. "@currentField.lookupValue", "[$AssignedTo.title]". Der zweite Operand muss ein Zeichenfolgenliteral sein, welches das Trennzeichen ist, das die Werte miteinander verkettet.The second operand shall be a string literal that is the separator that joins the values together.

Wenn loopIndex mit einem Namen der Iteratorvariablen versehen ist, wird der aktuelle Index des Iterators (beginnend mit 0) zurückgegeben.loopIndex, when provided with a name of iterator variable, returns the current index (starting from 0) of the iterator. Der Name des Iterators muss als Zeichenfolgenliteral angegeben werden.The name of iterator must be provided as a string literal. loopIndex funktioniert nur innerhalb des Elements mit aktiviertem forEach oder seinen untergeordneten Elementen.loopIndex would only work within the element with respective forEach enabled or its children elements.

Beispiele finden Sie hier.See here for examples.

operandsoperands

Gibt die Parameter (Operanden) eines Ausdrucks an.Specifies the parameters, or operands for an expression. Konkret handelt es sich um ein Array von Objekten des Typs „Expression“ oder von Basiswerten.This is an array of Expression objects or base values.

SpezialzeichenfolgenwerteSpecial string values

Die Werte für txtContent, Formatvorlagen und Attribute können entweder Zeichenfolgen oder Objekte des Typs „Expression“ sein.The values for txtContent, styles, and attributes can be either strings or Expression objects. Daneben werden zum Abrufen von Werten aus Listenfeldern und dem Benutzerkontext einige spezielle Zeichenfolgenmuster unterstützt.A few special string patterns for retrieving values from the fields in the list and the user's context are supported.

„@currentField“"@currentField"

Wird ausgewertet in den Wert des aktuellen Felds.Will evaluate to the value of the current field.

Einige Feldtypen werden als Objekte dargestellt.Some field types are represented as objects. Zum Abrufen eines Werts aus einem Objekt verweisen Sie auf eine Eigenschaft innerhalb des Objekts.To output a value from an object, refer to a particular property inside that object. Beispiel: Ist das aktuelle Feld ein Personen- oder Gruppenfeld, würden Sie @currentField.title angeben, um den Namen der Person abzurufen, wie er in der Regel in Listenansichten angezeigt wird.For example, if the current field is a person/group field, specify @currentField.title to retrieve the person's name, which is normally displayed in list views. Nachfolgend sind die Feldtypen aufgeführt, die als Objekte dargestellt werden, inklusive einer Liste ihrer jeweiligen Eigenschaften.The following are the field types that are represented as objects with a list their properties.

Hinweis

@currentField.title gibt standardmäßig den Namen einer Person zurück.The @currentField.title returns a person's name by default. Wenn jedoch der Wert „Show Field“ des Personenfelds angepasst wurde, wird möglicherweise der Wert der Eigenschaft title geändert.However, if the person field's Show Field has been adjusted, it may change the value of the title property. Wird zum Beispiel der Wert „Show Field“ eines Personenfelds als „Abteilung“ konfiguriert, erhält die Eigenschaft title als Wert die Abteilung der Person.For example, a person field with the Show Field configured as Department will have the person's department for the title property.

PersonenfelderPeople fields

Das Objekte des Personenfelds verfügt über die folgenden Eigenschaften (es sind auch Beispiele aufgeführt):The people field object has the following properties (with example values):

{
   "id": "122",
   "title": "Kalya Tucker",
   "email": "kaylat@contoso.com",
   "sip": "kaylat@contoso.com",
    "picture": "https://contoso.sharepoint.com/kaylat_contoso_com_MThumb.jpg?t=63576928822",
    "department":"Human Resources",
   "jobTitle":"HR Manager"
}

Datum/Uhrzeit-FelderDate/Time fields

Es gibt mehrere Möglichkeiten, den Wert eines Datum/Uhrzeit-Felds abzurufen, je nachdem, welches Datumsformat angezeigt werden soll.The value of Date/Time fields can be retrieved a few different ways, depending on the date format you'd like to display. Unterstützt werden die folgenden Methoden zur Konvertierung von Datumswerten in bestimmte Formate:The following methods for converting date values to specific formats are supported:

  • toLocaleString(): Gibt einen komplett erweiterten Datentyp mit Datum und Uhrzeit aus.toLocaleString() - Displays a date type fully expanded with date and time.
  • toLocaleDateString(): Gibt einen Datentyp aus, der nur das Datum anzeigt.toLocaleDateString() - Displays a date type with just the date.
  • toLocaleTimeString(): Gibt einen Datentyp aus, der nur die Uhrzeit anzeigt.toLocaleTimeString() - Displays a date type with just the time.

Der folgende JSON-Code beispielsweise würde das aktuelle Feld als Datum/Uhrzeit-Zeichenfolge anzeigen (sofern es sich um ein Datumsfeld handelt).For example, the following JSON will display the current field (assuming it's a date field) as a date and time string.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": {
        "operator": "toLocaleString()",
        "operands" : ["@currentField"]
    }
}

Hier sehen Sie das gleiche Beispiel wie oben unter Verwendung der Ausdruckssyntax im Excel-Format:Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "=toLocaleString(@currentField)"
}

NachschlagefelderLookup fields

Das Objekte des Nachschlagefelds verfügt über die folgenden Eigenschaften (es sind auch Beispiele aufgeführt):The lookup field object has the following properties (with example values):

{
   "lookupId": "100",
   "lookupValue": "North America",
}

Das folgende Beispiel demonstriert die Anwendung eines Nachschlagefelds auf ein aktuelles Feld.The following example shows how a lookup field might be used on a current field.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField.lookupValue",
   "attributes": {
      "href": {
         "operator": "+",
         "operands": [
            "https://contoso.sharepoint.com/teams/Discovery/Lists/Regions/DispForm.aspx?ID=",
            "@currentField.lookupId"
         ]
      },
      "target": "_blank"
   }
}

LinkfelderHyperlink fields

Das Objekte des Linkfelds verfügt über die folgende Eigenschaft (es ist auch ein Beispiel aufgeführt):The hyperlink field object has the following property (with example value):

{
   "desc": "SharePoint Patterns and Practices",
}

Um auf den URL-Wert zu verweisen, verwenden Sie @currentField.To reference the URL value, use @currentField.

Das folgende Beispiel demonstriert die Anwendung eines Linkfelds auf ein aktuelles Feld.The following example shows how a hyperlink field might be used on a current field.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField.desc",
   "attributes": {
      "href": "@currentField",
      "target": "_blank"
   }
}

„[$FieldName]“"[$FieldName]"

Die Spalte wird im Kontext der gesamten Zeile formatiert.The column is formatted within the context of the entire row. Sie können diesen Kontext verwenden, um auf die Werte der anderen Felder in derselben Zeile verweisen, durch Angeben der internen Namen des Felds, umgeben von eckigen Klammern und mit einem vorangestellten Dollarzeichen: [$InternalName].You can use this context to reference the values of other fields within the same row by specifying the internal name of the field surrounded by square brackets and preceeded by a dollar sign: [$InternalName]. Beispiel: Zum Abrufen des Werts eines Felds mit dem internen Namen „MarchSales“ würden Sie [$MarchSales] verwenden.For example, to get the value of a field with an internal name of "MarchSales", use [$MarchSales].

Ist der Wert eines Felds ein Objekt, können Sie auf die Eigenschaften dieses Objekts zugreifen.If the value of a field is an object, the object's properties can be accessed. Wenn Sie z. B. auf die Eigenschaft „Titel“ eines Personenfelds mit dem Namen „SalesLead“ zugreifen möchten, verwenden Sie „[$SalesLead.title]“.For example, to access the "Title" property of a person field named "SalesLead", use "[$SalesLead.title]".

„@currentWeb“"@currentWeb"

Dadurch wird die absolute URL für die Website ausgewertet.This will evaluate to the absolute url for the site. Dies entspricht dem Wert webAbsoluteUrl im Kontext der Seite.This is equivalent to the webAbsoluteUrl value within the page context. Dieser Wert ist nur in SharePoint Online verfügbar.This value is only available in SharePoint Online.

„@me“"@me"

Wird ausgewertet in die E-Mail-Adresse des aktuell angemeldeten Benutzers.This will evaluate to the email address of the current logged in user.

Dieses Feld kann verwendet werden, um die aktuelle E-Mail-Adresse des Benutzers anzuzeigen, aber viel wahrscheinlicher wird es unter Bedingungen verwendet.This field can be used to display the current user's email address, but more likely it will be used within conditions. Nachfolgend finden Sie ein Beispiel für das Festlegen einer Farbe für ein Personenfeld auf Rot, wenn es dem aktuell angemeldeten Benutzer entspricht, und auf Blau, wenn dies nicht der Fall ist:The following is an example of setting the color for a person field to red when it is equal to the current logged in user and blue otherwise:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "==",
               "operands": [
                  "@me",
                  "@currentField.email"
               ]
            },
            "red",
            "blue"
         ]
      }
   }
}

Hier sehen Sie das gleiche Beispiel wie oben unter Verwendung der Ausdruckssyntax im Excel-Format:Here's the same sample from above, using the Excel-style expression syntax:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title",
   "style": {
      "color": "=if(@me == @currentField.email, 'red', 'blue')"
   }
}

„@now“"@now"

Wird ausgewertet in das aktuelle Datum und die aktuelle Uhrzeit.This will evaluate to the current date and time.

"@rowIndex""@rowIndex"

Wird ausgewertet in den gerenderten Index einer Zeile innerhalb einer Ansicht.This will evaluate to the rendered index of a row within a view. Dieser Wert basiert auf der Renderposition und bleibt auch bei sortierten und gefilterten Ansichten basierend auf der Position konsistent.This value is based on render position and will remain consistent based on position even as views are sorted and filtered. Die Indizes beginnen bei 0.Indexes start at 0. Dieser Wert ist nur in SharePoint Online verfügbar.This value is only available in SharePoint Online.

Hier ist ein Beispiel für die Verwendung des Werts innerhalb eines Ansichtsformats, um abwechselnde Formatvorlagen auf Zeilen anzuwenden:Here's an example of using the value within a view format to apply alternating styles to rows:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(@rowIndex % 2 == 0,'ms-bgColor-themeLighter ms-bgColor-themeLight--hover','')"
}

„@window.innerHeight“"@window.innerHeight"

So wird eine Zahl berechnet, die der Hohe des Browserfensters (in Pixel) entspricht, als die Liste erstellt wurde.This will evaluate to a number equal to the height of the browser window (in pixels) when the list was rendered.

„@window.innerWidth“"@window.innerWidth"

So wird eine Zahl berechnet, die der Breite des Browserfensters (in Pixel) entspricht, als die Liste erstellt wurde.This will evaluate to a number equal to the width of the browser window (in pixels) when the list was rendered.

MiniaturbilderThumbnails

In einer Dokumentenbibliothek gibt es eine Reihe von Token, mit denen die URL zum Miniaturbild einer Datei abgerufen werden kann, einschließlich:In a document library, there is a series of tokens that can be used to retrieve the URL to the thumbnail of a file, including:

  • @thumbnail.small, @thumbnail.medium und @thumbnail.large werden zur Miniaturbild-URL in 3 verschiedenen vordefinierten Größen ausgewertet.@thumbnail.small, @thumbnail.medium, and @thumbnail.large evaluate to the thumbnail URL in 3 different predefined sizes.
  • @thumbnail.<bounding size> wird zur URL zu den größten Miniaturbildern ausgewertet, die den Begrenzungsrahmen in Breite und Höhe nicht überschreiten.@thumbnail.<bounding size> evaluates to the URL to the largest thumbnails that is not larger than the bounding size in both width and height. @thumbnail.150 wird z. B. zur URL zu einem Miniaturbild ausgewertet, das nicht größer als 150 × 150 Pixel ist.For example, @thumbnail.150 evaluates to the URL to a thumbnail not larger than 150×150 pixels.
  • @thumbnail.<bounding width>x<bounding height> wird zur URL zum größten Miniaturbild ausgewertet, das die Breite und Höhe des Begrenzungsrahmens nicht überschreitet.@thumbnail.<bounding width>x<bounding height> evaluates to the URL to the largest thumbnail that is not larger than the bounding width and bounding height. @thumbnail.100x200 wird z. B. zur URL zu einem Miniaturbild ausgewertet, das nicht breiter als 100 Pixel und nicht höher als 200 Pixel ist.For example, @thumbnail.100x200 evaluates to the URL to a thumbnail not wider than 100 pixels and not higher than 200 pixels.

Diese Token liefern keinen Wert für Elemente, die keine Dateien sind (z. B. Ordner).These tokens will yield no value on non-file items including folders.

Hinweis

Das Seitenverhältnis des erzeugten Miniaturbilds ist das gleiche wie bei der Darstellung der Datei, eine Änderung der Größen des Begrenzungsrahmens hat keinen Einfluss auf das Seitenverhältnis des Miniaturbilds.The aspect ratio of thumbnail generated is the same as how the file looks like, changing the bounding sizes will not affect the aspect ratio of the thumbnail.

Tipp

Miniaturbilder sind nur für eine Liste der unterstützten Dateiformate verfügbar.Thumbnails are only available for a list of supported file formats. Das bedeutet, dass die generierte URL manchmal aufgrund mangelnder Unterstützung für bestimmte Formate nicht zugänglich ist.It means that sometimes the URL generated is not accessible due to lack of support on certain formats. Wenn jedoch ein gültiges Miniaturbildtoken als einziges src-Attribut eines img-Tags festgelegt wird, kümmern wir uns darum, und das Bild wird ausgeblendet, wenn es nicht verfügbar ist.However, if a valid thumbnail token is set as the only src attribute of an img tag, we will take care of it and hide the image when it is not available.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "img",
   "attributes": {
      "src": "@thumbnail.200x150",
      "alt": "='Thumbnail of file ' + [$FileLeafRef]"
   },
   "style": {
      "width": "100%",
      "max-width": "100%"
   }
}

Siehe auchSee also

  • [Formatieren einer Spalte](https://support.office.com/en-us/article/Column-formatting-1f927342-2bed-4745-b727-ff8b7ff96b22?ui=en-US&rs=en-US&ad=US)[Column formatting](https://support.office.com/en-us/article/Column-formatting-1f927342-2bed-4745-b727-ff8b7ff96b22?ui=en-US&rs=en-US&ad=US)