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 the conditional operator =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, Blocked, 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 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",
            ""
         ]
      }
   }
}


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",
            ""
         ]
      }
   }
}

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 95 ist, und auf (@currentField * 100 / 95)%, sobald der Wert kleiner ist als 95.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 * 100 / 95)% when the value is less than 10. 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 () to match the maximum anticipated value inside the field, and the multiplier () 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",
  "txtContent": "@currentField",
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "width": "=if(@currentField > 95, '100%', toString(@currentField * 100 / 95) + '%')"
  }
}

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]"
        }
    ]
}

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\"}"
        }          
    }        
  ]
}

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",
   "padding": "4px",
   "background-color": {
      "operator": "?",
      "operands": [
         {
            "operator": "<",
            "operands": [
               "@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.

AusdrückeCriteria Expressions

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.

Excel-Formatvorlage AusdrückeExcel-style expressions

Alle Excel-Formatvorlagen-Ausdrücke beginnen mit einem Gleichheitszeichen (=).All Excel-style expressions begin with an equal (=) sign.

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 shows 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()

Binäre Operatoren: Unten sehen Sie die standardmäßigen arithmetischen binären Operatoren. Diese erwarten zwei Operanden.Binary 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()toString()
  • Number()Number()
  • Date()Date()
  • coscos
  • sinsin
  • toLocaleString()toLocaleString()
  • toLocaleDateString()toLocaleDateString()
  • toLocaleTimeString()toLocaleTimeString()

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

  • ?

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.

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"
}

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"]
    }
}

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]".

„@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"
         ]
      }
   }
}

„@now“"@now"

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

„@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.

Siehe auchSee also