CallOutActions-Menu in Listen und Bibliotheken anpassen

Einige Kunden möchten in SharePoint die bestehenden Menüs anpassen und bestimmte Buttons oder hinzufügen. Im Fall des Ribbons, Websiteeinstellungen und anderer Menüs ist das relativ einfach über CustomAction-Definitionen. Das in SharePoint 2013 neu eingeführte CallOut-Menü verhält sich allerdings etwas anders, da es komplett durch JavaScript erzeugt wird:

 

Um dieses anzupassen, muss also ein wenig mit JavaScript entwickelt werden. Problematisch ist hier vor allem, dass es kein entwicklerfreundliches Framework hierfür gibt, sondern das Erzeugen des kompletten Menüs überschrieben werden müsste. Microsoft macht sich das selbst zunutze, wenn des “Following Content”-Feature aktiviert wird: Die Render-Methode wird überschrieben, alle Buttons neu erzeugt und der Follow-Button hinzugefügt. Dies macht die Angelegenheit etwas komplex.

Nach einigen Stunden Arbeit habe ich jedoch eine recht einfache Möglichkeit gefunden, die an die Variante des “Following Content”-Features angelehnt ist: Das darin enthaltene JavaScript ruft eine vom System bereitgestellte Methode auf, die den Edit- und Share-Button erzeugt und nur der Follow-Button ist hardcoded in dem JavaScript. Und genau diese zentrale Methode wird in meiner Variante überschrieben und angepasst. Damit funktioniert die Anpassung sowohl mit Following-Content, als auch ohne.

Für diese Lösung wird nichts weiter benötigt als ein Visual Studio-Projekt mit einem Feature und einer CustomAction-Definition:

<CustomAction
 Id="CustomCalloutOnPostRenderTemplate"
 Location="ScriptLink" ScriptBlock="(function(){
CalloutOnPostRenderTemplate = function CalloutOnPostRenderTemplate(renderCtx, calloutActionMenu) {
var listItem = renderCtx.CurrentItem;
var openText = GetCallOutOpenText(listItem, renderCtx);
calloutActionMenu.addAction(new CalloutAction({
text: openText,
onClickCallback: function(calloutActionClickEvent, calloutAction) {
CalloutAction_Open_OnClick(calloutActionClickEvent, calloutAction, renderCtx);
}
}));
//calloutActionMenu.addAction(new CalloutAction({
// text: Strings.STS.L_CalloutShareAction,
// onClickCallback: function(calloutActionClickEvent, calloutAction) {
// CalloutAction_Share_OnClick(calloutActionClickEvent, calloutAction, renderCtx);
// },
// isVisibleCallback: function(calloutAction) {
// return CalloutAction_Share_IsVisible(calloutAction, renderCtx);
// }
//}));
};
})();"/>
 

Das JavaScript-Snippet definiert hierbei die Methode CalloutOnPostRenderTemplate neu und hierin kommentiere ich einfach die auszublendenden Buttons aus oder kann anhand des Beispiels auch neue erzeugen. Dieses JavaScript wird in das Script-Link-Delegate-Control eingebunden und das Ergebnis sieht dann so aus:

 

Wichtig: Das JavaScript darf nicht in eine externe JS-Datei ausgelagert werden (oder wenn, dann muss deutlich mehr Aufwand betrieben werden), da es ansonsten mit aktivierter “Minimal Download Strategy” nicht mehr funktioniert.

Schreibe einen Kommentar