Ansicht von Gruppierten Listen mit json anpassen (Pages & News)
Mit View Formatting lässt sich auch eine Gruppierte Ansicht anpassen und mit netten Fluent UI Icons versehen.
Hier ein Beispiel, in dem die Ansicht einer Websitebibliothek nach der Spalte "PromotedContent" gruppiert wird, um ein nettes User-Interface für Redakteure bereitzustellen.
Die Spalte trägt auf Deutsch den klingenden Namen "Höher gestufter Zustand".
Schlimm genug, dass uns dieses Monster an Spaltentitel schon bei der Spalte nicht erspart bleibt, müssen wir das jedoch nicht überall ertragen und dürfen unseren Benutzern auch sinnvolle Überschriften geben.
Hier ein Beispiel, in dem die Ansicht einer Websitebibliothek nach der Spalte "PromotedContent" gruppiert wird, um ein nettes User-Interface für Redakteure bereitzustellen.
Die Spalte trägt auf Deutsch den klingenden Namen "Höher gestufter Zustand".
Schlimm genug, dass uns dieses Monster an Spaltentitel schon bei der Spalte nicht erspart bleibt, müssen wir das jedoch nicht überall ertragen und dürfen unseren Benutzern auch sinnvolle Überschriften geben.
Die Beschriftungen sind in der Gruppierten Ansicht wenig aussagekräftig:
Höher gestufter Zustand: 1 (3)
Nach dem View Formating:
"News - unveröffentlicht (3)" ist doch wesentlich besser als Höher gestufter Zustand: 1 (3)
(3 steht für die Anzahl an Artikel)
die zugehörige json formatierung (View Formating):
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"groupProps": {
"headerFormatter": {
"elmType": "div",
"attributes": {
"class": "=if(@group.fieldData == 0 || @group.fieldData == 1 || @group.fieldData == 2, '', 'sp-card-danger')"
},
"style": {
"padding": "8px 12px",
"font-weight": "600",
"font-size": "16px",
"background-color": "=if(@group.fieldData == 0 || @group.fieldData == 1 || @group.fieldData == 2, '#a2569d', '#999999')",
"border-radius": "6px",
"margin-bottom": "4px",
"color": "#ffffff",
"display": "flex",
"align-items": "center",
"flex-wrap": "wrap",
"gap": "8px"
},
"children": [
{
"elmType": "span",
"style": { "display": "flex", "align-items": "center", "gap": "6px" },
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(@group.fieldData == 0, 'Page', if(@group.fieldData == 1, 'Edit', if(@group.fieldData == 2, 'News', 'Library')))"
},
"style": { "font-size": "16px" }
},
{
"elmType": "span",
"txtContent": "=if(@group.fieldData == 0, 'Page', if(@group.fieldData == 1, 'News – unveröffentlicht', if(@group.fieldData == 2, 'News', 'Ordner')))"
}
]
},
{
"elmType": "span",
"style": {
"color": "#dddddd",
"font-size": "13px"
},
"txtContent": "='(' + @group.count + ')'"
}
]
}
}
}
Kommentare