Füge einen Skripteditor auf der Seite der Liste ein, klicke auf Codeauschnitt bearbeiten (1) und innerhalb diesem füge das folgende Javascript ein (2):
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'fertig' : '#FFF1AD',
'gestoppt' : '#FFD800',
'in Arbeit' : '#01DF3A'
};
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
var status = rows[i]["Status"];
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
row.style.backgroundColor = statusColors[status];
}
}
});
});
</script>
Dieses Skript prüft ob in der Spalte “Status”:
fertig, gestoppt oder in Arbeit
steht und färbt dementsprechend die Zeile ein.
Der Output sollte dann so aussehen:
Hinweis: Falls du Probleme mit der Anzeige haben solltest kann es wie so oft an MDS liegen. Bitte prüfe dies und schalte dies zumindest zum testen aus.
Auf der Seite auf der das Skript eingefügt wurde:
1) Klick auf das Zahnrad oben rechts neben dem Loginnamen (1) und dann Klick auf Websiteeinstellungen (2)
2) Websiteasktionen -> Websitefeatures verwalten
Und dann die Minimale Downloadstrategie ausschalten.
Ein etwas schöner Weg finde ich der Link zu einer Javascriptdatei.
Wie das geht und man solch eine Datei hochlädt erfährst du hier.
Wenn du es nur über CSS und statisch lösen möchtest kannst du dieses Snippet verwenden:
<style>
table.ms-listviewtable > tbody > tr > td:nth-child(4){
background-color: red;
}
</style>
In diesem Fall wäre die “4” die Spalte die eingefärbt wird.
6 responses to “Highlight rows in list with CSR (de)”
Hallo,
dieses Skript funktioniert sehr gut. Sobald ich aber eine Spalte innerhalb dieser Liste (als Webpart auf einem Dashboard eingebunden) filtere, verschwindet die farbige Markierung. Die minimale Downloadstrategie ist deaktiviert. Es ist eine SP Foundation 2013 im Einsatz. Auf einem SP Server verschwindet die farbige Markierung nach einer Spalten-Filterung nicht.
Können Sie mir weiter helfen? Ich wäre Ihnen sehr dankbar.
Ihr Blog ist sehr gut!
Hi, leider habe ich keine SharePoint Foundation Umgebung, daher kann ich dir da nicht weiterhelfen. Vielleicht kannst du mit diesem Stück CSS etwas anfangen:
In diesem Fall wäre die “4” die Spalte die eingefärbt wird.
Hi, danke für deine Antwort. Könntest du bitte noch das CSS einfügen? Vielen Dank.
Sorry, das Codesnippet wurde im Kommentar nicht angezeigt. Ich habe den Blogbeitrag nun mit dem Snippet erweitert. Hoffe es hilft.
Danke für das CSS.
Ist es auch möglich, diese Markierung für bestimmte Elemente einzustellen (z. B. alle Elemente, in welchen Status=x) und nicht für eine konkrete Spalte?
Hi, dann geht es ja eben wieder in die Richtung mit dem JS-Link. Du kannst mal noch versuchen nach einer Lösung mit der berechneten Spalte zu suchen. Da gibt es auch was. Genaueres weiß ich da aber nicht genau.