Pimp up SharePoint Blog(Template) mit JSLink
Contents
In diesem Beitrag zeige ich wie das alte SharePoint-Blogtemplate, mit wenigen Schritten, mit einem Teaserbild und einem Teasertext versehen und aufgehübscht werden kann.
Den SharePoint-Blog nutzen viele Unternehmen, um sich bspw. im Intranet sich über verschiedene Themen als Experten auszutauschen. Auch als Kommunikationskanal für das Management kann der Blog genutzt werden. Eine Kommentar und Like-Funktion bietet der Blog bereits im Standard, was ihn eigentlich attraktiv für diesen Zweck macht. Es fehlt oft nur etwas an der Optik und an ein paar redaktionellen Funktionen.
Das Template ist auch in Office 365 verfügbar und nicht abgekündigt. Es bleibt also noch einige Zeit nutzbar. Das ist auch gut so, denn leider bieten die neuen Delve-Blogs und die neuen News der Modern Teamsites noch keine dieser Social Funktionen (Stand 25.07.2017, zumindest ist aber ist eine Kommentarfunktion für die neue Teamsite-News auf der Roadmap).
Problemstellung
- Die Manipulation der Darstellung des Blogtemplates ist begrenzt – Standarddarstellung ist nicht sehr modern
- Das SharePoint-Blogtemplate bietet im Standard keine Möglichkeit Teaserbilder oder Teasertexte anzuzeigen.
Lösungsansatz
- Es werden zwei neue Spalten „TeaserText“ und TeaserBild“ zu einem Beitrag angefügt
- Mit JSLink die Ausgabe der allg. Übersicht manipulieren
- Mit JSLink die Ausgabe der Einzeldarstellung manipulieren
Unter „Beiträge verwalten“ müssen als erstes die „Listeneinstellungen“ geöffnet werden, um neue Spalten an dieser Liste anzufügen.
Es wird die Spalte TeaserText vom Typ „mehrere Textzeilen“ hinzugefügt (gerne RichText).
Es wird eine Spalte TeaserBild vom Typ „Link oder Bild“ hinzugefügt (Visualisierung als Bild).
Mit JSLink die Ausgabe der allg. Übersicht manipulieren
Wie im Bild oben gezeigt, soll das Teaserbild und der Teasertext über jeden Beitragstext, aber unter dem Titel angezeigt werden.
Damit dies funktioniert, muss über JavaScript die Ansicht angepasst werden (JSLink und CSR).
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {'Body':{'View':manipulateBody}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function manipulateBody(ctx) {
//prüfen, ob Daten in den Spalten vorhanden sind
var teasertext = ctx.CurrentItem.TeaserText ? ctx.CurrentItem.TeaserText : false;
var teaserbild = ctx.CurrentItem.TeaserBild ? ctx.CurrentItem.TeaserBild : false;
//Darstellung in diesem Beispiel inline
var header = "<div>"
+"<img src=""+teaserbild+"" style="float:left; margin-right:5px; margin- bottom:5px;" width="60px">"
+"<div style="color:#777">" +teasertext+"</div>"
+"</div>"
+"<div style="clear:both">";
var retval = ctx.CurrentItem.Body;
//fall kein Teasertext oder Teaserbild vergeben wurde,
// soll auch keins ausgegeben werden
if(teasertext && teaserbild){
//es wird der neue Header mit dem Teaser vor den bestehenden Inhalt geschrieben
retval = header + ctx.CurrentItem.Body;
}
return ret;
}
Dieser Code sollte als blogmanipulation.js in der Gestaltungsvorlagenbibliothek gespeichert werden (Websiteeinstellungen –> Gestaltungsvorlagen und Seitenlayouts –> Ordner erstellen –> Code einfügen).
Jetzt muss der JS-Code noch mit dem WebPart auf der Startseite des Blogs verbunden werden.
Dazu wird die Startseite im Bearbeitungsmodus geöffnet und vom WebPart „Beiträge“ die WebPart-Einstellungen bearbeitet. Die Datei lässt sich als JSLink Datei unter dem Menüpunkt „Verschiedene“ des WebParts einfügen.
JSLink kann nur mit Daten arbeiten, die dem aktuellen View mitgegeben werden. Aus diesem Grund müssen noch die Beiden Spalten „TeaserText“ und „TeaserBild“ zur aktuellen Ansicht ergänzt werden
(„WebPart bearbeiten“ –> „Aktuelle Ansicht bearbeiten“ –> „Spalten anhaken“).
Nach dem Speichern der Seite, sollte die Darstellung für die Gesamtübersicht aller Blogbeiträge nun mit Teaserbild und Teasertext passen.
Der HTML-Code im JavaScript kann als Ausgangsbasis für weitere Manipulationen dienen.
Mit JSLink die Ausgabe der Einzeldarstellung manipulieren
Merkwürdigerweise lässt sich die Einzeldarstellung nicht so einfach anpassen.
Als erstes wird ein Beitrag in der Einzelansicht geöffnet. In der Browserzeile müsste die Datei „Post.aspx“ zu sehen sein. Jetzt lässt sich wie oben, in den WebPart-Einstellungen, der JSLink-Verweis hinzufügen (auf die gleiche Datei).
Es müssen wie oben die Spalten dem View bekannt gemacht werden. Auf dieser Seite ist dies leider nicht über das Ändern der „aktuelle Ansicht“ möglich. Entfernen Sie auch nicht das WebPart. Dies führt zu großen Problemen.
Mit dem SharePoint Designer (SPD) lässt sich aber die Post.aspx anpassen, um diesem View die gewünschten Spalten mitzugeben.
Hinweis zum Öffnen der Post.aspx (SPD -> Alle Dateien –> Lists –> Beitraege –> Posts.aspx).
Die Stelle zum Anpassen des Codes lässt sich über die Suche finden, sie muss folgenden Inhalt enthalten:
<FieldRef Name="Title"/><FieldRef Name="Body"/><FieldRef Name="Author"/><FieldRef Name="PostedByWithDate"/><FieldRef Name="CategoryWithLink"/><FieldRef Name="Permalink"/><FieldRef Name="EmailPostLink"/><FieldRef Name="NumCommentsWithLink"/><FieldRef Name="PublishedDate"/><FieldRef Name="PostCategory"/><FieldRef Name="LikesCount"/><FieldRef Name="LikedBy" Explicit="TRUE"/>
</ViewFields>
Folgender Codesnippet ist zu ergänzen:
Das Ergebnis ist dann:
<FieldRef Name="Title"/><FieldRef Name="Body"/><FieldRef Name="Author"/><FieldRef Name="PostedByWithDate"/><FieldRef Name="CategoryWithLink"/><FieldRef Name="Permalink"/><FieldRef Name="EmailPostLink"/><FieldRef Name="NumCommentsWithLink"/><FieldRef Name="PublishedDate"/><FieldRef Name="PostCategory"/><FieldRef Name="LikesCount"/><FieldRef Name="LikedBy" Explicit="TRUE"/><FieldRef Name="TeaserText"/><FieldRef Name="TeaserBild"/>
</ViewFields>
Wird jetzt ein Beitrag in der Einzeldarstellung geladen, sollte der Teasertext und das Teaserbild dargestellt werden.
Ich hoffe der Artikel hilft allen, die noch etwas mit dem alten Blog arbeiten wollen, bis die neuen Features und Produkte ähnlich funktionieren.
Eine Antwort
[…] Zum Blog […]