Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
In der klassischen SharePoint-Welt wurden Sie verwendet, um das Rendern von Listen und Bibliotheken mithilfe von XSLT (eXtensible Stylesheet Language for Transformation) und dem XsltListViewWebPart-Steuerelement anzupassen. Heutzutage können Sie in der modernen Welt bessere Ergebnisse erzielen, indem Sie die Listenformatierung verwenden.
Wichtig
Dieser Artikel bezieht sich auf so genannte PnP-Komponenten, Beispiele und/oder Tools, bei denen es sich um Open-Source-Ressourcen handelt, die von einer aktiven Community unterstützt werden, die unterstützung für sie bereitstellt. Es gibt keine SLA für die Unterstützung von Open Source-Tools durch offizielle Microsoft-Supportkanäle. Diese Komponenten oder Beispiele verwenden jedoch standardmäßig von Microsoft unterstützte APIs und Features, die von Microsoft unterstützt werden.
Wenn Sie möchten, können Sie das folgende Video watch, anstatt den gesamten Artikel zu lesen, den Sie immer noch als eine viel detailliertere Referenz betrachten können.
In der Tat können Sie über Listenformatierung das Rendern eines einzelnen Felds, über Spaltenformatierung oder das Rendern einer ganzen Listenansicht über die Listenansichtsformatierung anpassen. Sie können dies ganz einfach mithilfe der webbasierten Benutzeroberfläche von SharePoint und einem benutzerfreundlichen Designer tun oder Ihre eigenen benutzerdefinierten JSON-Vorlagen schreiben. Unter dem Deckblatt verarbeitet die Listenformatierung das Rendern Ihrer Daten auf Clientseite, ohne die tatsächlichen Daten zu beeinträchtigen oder zu ändern, sondern einfach eine benutzerdefinierte Renderingvorlage darauf anzuwenden.
Darüber hinaus kann die Listenformatierung auf SharePoint-Listen und -Bibliotheken sowie auf Listen von Microsoft Listen angewendet werden, die unter dem Deckmantel auf SharePoint Online basieren. In diesem Artikel erfahren Sie, wie Sie die Listenformatierung in Ihren Lösungen nutzen.
Spaltenformatierung
Mit der Spaltenformatierung können Sie das Rendern eines einzelnen Felds in einer Liste oder Bibliothek anpassen. Um zu erfahren, wie sie verwendet wird, erstellen wir eine neue Liste auf einer Zielwebsite, z. B. mithilfe der Listenvorlage "Reiseanforderungen" . Die Ausgabe sieht wie im folgenden Screenshot aus.
Spaltenformatierung mit dem Designer
Stellen Sie sich nun vor, Sie möchten das Rendering der Spalte "Reisedauer (Tage)" anpassen, um die am meisten dauernden Reisen hervorzuheben. Klicken Sie auf den Pfeil direkt neben dem Namen der Spalte, wählen Sie "Spalteneinstellungen" und dann "Diese Spalte formatieren" aus, wie im folgenden Screenshot dargestellt, um die Benutzeroberfläche zum Anpassen des Spaltenrenderings zu aktivieren.
Auf der rechten Seite des Bildschirms wird ein Seitenbereich angezeigt, mit dem Sie die Spaltenformatierung anpassen können. Wählen Sie "Bedingte Formatierung" aus, und beginnen Sie mit der Anpassung des Renderings der ausgewählten Spalte.
Nach der Auswahl können Sie mit der Option die Renderingregeln für die ausgewählte Spalte konfigurieren.
Sie können beliebig viele Regeln erstellen. Eine Bedingungsrenderingregel kann eine globale Sein, die nicht mit einer bestimmten Bedingung verknüpft ist, oder spezifisch sein, wenn mindestens eine Bedingung (gleich oder ungleich) mit einem oder mehreren Feldern überprüft wird. Für jede Regel können Sie dann einen benutzerdefinierten Renderingstil definieren. Im folgenden Screenshot sehen Sie die grundlegende Benutzeroberfläche zum Definieren einer Regel.
Wenn Sie den Renderingstil konfigurieren, können Sie einfach eine der vordefinierten Formatvorlagen auswählen, oder Sie können auf "Weitere Formatvorlagen" klicken und Zugriff auf eine ganze Reihe von Formatierungseinstellungen erhalten, wie im folgenden Screenshot dargestellt.
Wie Sie sehen können, kann ein benutzerdefinierter Stil aus vielen Einstellungen wie Schriftart, Textfarbe, Füllfarbe, Symbolfarbe, Symbolfarbe und Rahmen erstellt werden. Im folgenden Screenshot sehen Sie eine Regel, die für die Spalte "Reisedauer (Tage)" definiert ist, wobei Die Dauer zwischen 1 und 3 Tagen "OK" und grün hervorgehoben ist, die Dauer von 4 Tagen "riskant" und orange hervorgehoben ist, während Die Dauer von 5 Tagen (die ganze Woche) als zu lang gilt und rot hervorgehoben ist.
Wie Sie gerade gesehen haben, können Sie solche Regeln einfach mit dem Webbrowser und dem Designer definieren.
Spaltenformatierung mit benutzerdefinierter JSON-Vorlage
Was ist jedoch, wenn Sie erweiterte Regeln definieren müssen? Was geschieht beispielsweise, wenn Sie einen Verweisbereich von Werten für die Spalte "Reisedauer (Tage)" anstelle expliziter Werte definieren möchten? Oder was geschieht, wenn Sie ein vollständig benutzerdefiniertes Rendering für Ihre Spalten definieren möchten?
Glücklicherweise können Sie auf den "Erweiterten Modus" klicken, den Sie im unteren Teil des Bildschirms sehen, und mit der Bearbeitung einer JSON-Vorlage auf niedriger Ebene beginnen.
Hinweis
Der JSON-Code der Vorlage basiert auf einem schema, das von Microsoft definiert wurde und unter der folgenden URL verfügbar ist. Die Ausführliche Schemareferenz finden Sie in der Referenz zur Formatierungssyntax des Dokuments.
Interessanterweise zeigt Ihnen die JSON-Vorlage die JSON-Vorlage der tatsächlichen bedingten Formatierung an, die Sie bereits definiert haben, wenn Sie in den erweiterten Modus wechseln. Daher können Sie ganz einfach mit dem Designer beginnen und, wenn Sie mehr benötigen, in den erweiterten Modus wechseln und dort fortfahren, wo Sie sich bereits befanden.
Auch wenn es für diesen Artikel außerhalb des Kontexts liegt, alle Details der JSON-Vorlagensyntax zu untersuchen, ist es nützlich, den für die Spalte "Reisedauer (Tage)" generierten JSON-Code zu untersuchen, der im folgenden Codeauszug veranschaulicht wird.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "||",
"operands": [
{
"operator": "||",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"1"
]
},
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"2"
]
}
]
},
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"3"
]
}
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"5"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont",
""
]
}
]
}
]
}
},
"txtContent": "[$TravelDuration]"
}
Die JSON-Vorlage definiert, dass die Ausgabe ein div-HTML-Element mit einigen vordefinierten Renderingstilen ist.
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
}
Anschließend wird eine Reihe von Operatoren und Operanden definiert, um alle Regeln (Wert gleich 1, 2 oder 3; Wert 4; Wert 5) und die entsprechende CSS-Formatvorlage zu definieren, die angewendet werden soll, wenn die Regelbedingung wirksam ist. Wenn Sie anstelle des webbasierten Designers die JSON-Vorlage auf niedriger Ebene verwenden, können Sie sogar die Qualität und Wartbarkeit der Vorlage verbessern. Anstatt beispielsweise alle Werte (1, 2 oder 3) für das grüne Format aufzulisten, können Sie einfach eine einzelne Regel für Werte deklarieren, die niedriger oder gleich 3 (<= 3) sind. Gleiches gilt für das rote Format, bei dem Sie deklarieren können, dass diese Regel für jeden Wert gilt, der größer als 5 (>>5) ist. Im folgenden Codeauszug können Sie die überarbeitete JSON-Vorlage lesen.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "<=",
"operands": [
"[$TravelDuration]",
"3"
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": ">=",
"operands": [
"[$TravelDuration]",
"5"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont",
""
]
}
]
}
]
}
},
"txtContent": "[$TravelDuration]"
}
Dies war ein sehr einfaches und einfaches Beispiel, aber Sie können wirklich komplexe Renderingregeln erstellen. Sie können z. B. HTML-Elemente in der Ausgabe einer Spalte schachteln oder benutzerdefinierte Bilder rendern usw.
Hinweis
Sie finden viele nützliche Beispiele zur Spaltenformatierung im GitHub-Repository SharePoint-Listenformatierungsbeispiele und insbesondere die Spaltenformatierungsbeispiele.
Listenansichtsformatierung
So wie Sie das Rendern einer einzelnen Spalte anpassen können, können Sie die Listenformatierung verwenden, um das Rendern einer gesamten Ansicht einer Liste oder Bibliothek anzupassen.
Um die Listenansicht einer Liste oder Bibliothek anzupassen, können Sie einfach auf das Dropdownmenü klicken, um die aktuelle Ansicht auszuwählen, und die Option "Aktuelle Ansicht formatieren" auswählen, wie im folgenden Screenshot dargestellt.
Wenn Sie auf das Menüelement klicken, aktivieren Sie auf der rechten Seite einen Seitenbereich, über den Sie eine sehr einfache Vorlage anwenden können, um "Abwechselnde Zeilenformate" zu rendern, oder Sie können die "Bedingte Formatierung" aktivieren und eine persoliertere Formatierungsvorlage erstellen. Wie bei der Spaltenformatierung können Sie dann Bedingungen und Formatierungsregeln definieren, die jetzt auf Zeilenebene anstelle der Spaltenebene gelten.
Darüber hinaus können Sie in der Dropdownliste "Layout auswählen" auswählen, ob Sie eine benutzerdefinierte Vorlage vom Typ Liste (standard) oder Katalog erstellen möchten, die Ihnen eine Karte-basierte Ausgabe bietet, in der Sie die Felder und das Rendering der Karten anpassen können.
Wenn Sie Katalog auswählen und den "Karten-Designer" aktivieren, indem Sie auf den Befehl "Karte bearbeiten" klicken, können Sie die felder auswählen, die in den Karten angezeigt werden sollen, deren Reihenfolge und einige allgemeine Konfigurationseinstellungen für die Karte.
Wenn Sie weitere Aktionen ausführen möchten, können Sie auf "Erweiterter Modus" klicken und eine vollständig angepasste JSON-Vorlage definieren, die für die gesamte Liste gilt, anstatt auf eine einzelne Spalte abzuzielen.
Hinweis
Sie können viele nützliche Beispiele zur Formatierung von Listenansichten finden, indem Sie das GitHub-Repository SharePoint-Listenformatierungsbeispiele und insbesondere die Formatierungsbeispiele für Listenansichten durchsuchen.
Formatieren von Listenformularen
Eine weitere Möglichkeit besteht darin, die Form einer Liste oder Bibliothek anzupassen und eine benutzerdefinierte Kopf-, Fußzeile oder text zu definieren. Wenn Sie sich in einer Liste befinden, können Sie einfach die Eigenschaften eines beliebigen Elements anzeigen und dann auf den Befehl "Formular bearbeiten" in der oberen rechten Ecke des Bildschirms klicken und die Option "Layout konfigurieren" auswählen, wie im folgenden Screenshot dargestellt.
Auf der rechten Seite wird ein Seitenbereich angezeigt, und Sie können einen benutzerdefinierten JSON-Code konfigurieren, um das Rendering von Kopf-, Fußzeile oder Text anzupassen. Im folgenden Screenshot können Sie sehen, wie das Panel aussieht.
Das gleiche Verhalten gilt für Dokumentbibliotheken. Um den Formatierungsbereich zu aktivieren, müssen Sie jedoch ein Dokument auswählen, klicken Sie auf die drei Punkte (EZB-Menü), wählen Sie Mehr und dann Eigenschaften aus. Im Dokumenteigenschaftenbereich können Sie dann die Optionen "Formular bearbeiten" und "Layout konfigurieren" auswählen.
Nun sehen wir uns an, welche Art von Anpassungen Sie mit dieser Funktion anwenden können. Der Einfachheit halber verwenden Sie weiterhin die Liste "Reiseanforderungen", die in den vorherigen Abschnitten erstellt wurde, und bearbeiten Sie die Kopfzeile der Listenelemente. Angenommen, Sie möchten den Standardheader durch ein benutzerdefiniertes Feld ersetzen, das den Avatar des Anfordernden und das Ziel der Reise anzeigt. Im folgenden Screenshot sehen Sie die Ausgabe.
Im folgenden Codeauszug sehen Sie die JSON-Vorlage, um das obige Ergebnis zu erzielen.
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-neutralTertiary"
},
"style": {
"width": "99%",
"margin": "10px",
"border": "1px solid",
"padding": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage('[$Requester.email]','medium')"
},
"style": {
"border-radius": "50%",
"margin-bottom": "10px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Travel request to ' + [$Destination.DisplayName]"
}
]
}
]
}
Die JSON-Vorlage definiert ein HTML-DIV-Element mit der Primärfarbe des aktuellen Designs als Hintergrundfarbe, der weißen Farbe für den Text und einem durchgezogenen Rahmen von 1 Pixel.
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-neutralTertiary"
},
"style": {
"width": "99%",
"margin": "10px",
"border": "1px solid",
"padding": "10px"
}
Dann gibt es zwei DIV-Elemente als untergeordnete Elemente des obigen DIV. Das erste DIV auf der linken Seite rendert das Bild des anfordernden Benutzers.
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage('[$Requester.email]','medium')"
},
"style": {
"border-radius": "50%",
"margin-bottom": "10px"
}
}
]
}
Während das zweite DIV eine benutzerdefinierte Zeichenfolge mit dem Namen des Ziels rendert.
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Travel request to ' + [$Destination.DisplayName]"
}
]
}
Beachten Sie die Syntax, die zum Lesen von Eigenschaften des aktuellen Elements verwendet wird, basierend auf eckigen Klammern und dem Dollarsymbol ($), um auf ein Feld zu verweisen, und schließlich detaillierte Eigenschaften des Felds angibt, z. B. die E-Mail für die $Requester oder displayName für die $Destination. Beachten Sie auch, dass Sie sich auf benutzerdefinierte Funktionen wie getUserImage verlassen können, um erweiterte Informationen aus den Feldern des ausgewählten Elements abzurufen.
Die benutzerdefinierte Fußzeile kann wie die Kopfzeile angepasst werden, wobei genau derselbe Ansatz wie zuvor verwendet wird.
Im Gegenteil, der Text kann angepasst werden, um einen oder mehrere benutzerdefinierte Abschnitte und eine oder mehrere Spalten für jeden Abschnitt zu deklarieren. Beachten Sie jedoch, dass auf eine Spalte nur in einem Abschnitt verwiesen werden kann. Wenn Sie in keinem Abschnitt auf eine Spalte verweisen, wird sie automatisch im letzten Abschnitt angezeigt. Ebenso werden neue Spalten, die der Liste oder Bibliothek hinzugefügt wurden, automatisch in der letzten Spalte aufgeführt.
Im folgenden Codeauszug sehen Sie eine JSON-Vorlage für einen Text mit einem Abschnitt "Weitere Informationen", der aus den Feldern "Titel", "Anfordernder" und "Ziel" besteht, sowie einen weiteren Catch-All-Abschnitt mit dem Namen "Others".
{
"sections": [
{
"displayname": "Main information",
"fields": [
"Title",
"Requester",
"Destination"
]
},
{
"displayname": "Others",
"fields": []
}
]
}
Beachten Sie, dass jedes Abschnittsobjekt aus einem Anzeigenamen und einem Array von Feldern besteht.
PnP-Bereitstellung und JSON-Formatierung
Eine letzte wichtige Sache, die Sie beim Arbeiten mit Listenformatierung beachten sollten, ist, dass die Engine beim Extrahieren einer Websitevorlage oder einer Listenvorlage mithilfe der PnP-Bereitstellungs-Engine auch alle benutzerdefinierten Spaltenformatierungen oder Listenansichtsformatierungen exportiert und in CustomFormatter-Attributen für Spalten oder Elemente für Ansichten speichert. Daher können Sie Ihre Spalten und Listenansichten anpassen, die Anpassung exportieren und sie mithilfe einer Reihe von PowerShell-Skripts wieder auf Ihre Produktions- und/oder Kundenwebsites anwenden.
Hinweis
Wenn Sie nicht wissen, was die PnP-Bereitstellungs-Engine ist, oder wenn Sie mehr darüber erfahren möchten, was es ist, lesen Sie den Artikel Grundlegendes zur modernen Bereitstellung von Artefakten.
Hier sehen Sie beispielsweise die Syntax mit PnP PowerShell zum Extrahieren einer Vorlage aus den "Reiseanforderungen" , einschließlich der Formatierungsvorlagen für Spalten und Listenansichten.
Connect-PnPOnline https://<source-tenant-name>.sharepoint.com/sites/<SourceSite>
Get-PnPSiteTemplate -Out .\travel-requests.xml -ListsToExtract "Travel requests" -Handlers Lists
Im folgenden Codeauszug sehen Sie, wie Sie die gerade extrahierte Vorlage auf eine Zielwebsite anwenden.
Connect-PnPOnline https://<target-tenant-name>.sharepoint.com/sites/<TargetSite>
Invoke-PnPSiteTemplate -Path .\travel-requests.xml
Beachten Sie, dass die Extraktion und die Anwendung der Vorlage sogar in verschiedenen Microosft 365-Mandanten erfolgen können.
Empfohlene Inhalte
Weitere Informationen zu diesem Thema finden Sie in den folgenden Dokumenten: