No Code Lösung: Buttons im SharePoint-Ribbon hinzufügen

Im heutigen Artikel der Reihe No Code Lösungen möchte ich veranschaulichen, wie einfach es ist, einen neuen Button im SharePoint-Ribbon hinzuzufügen und das ohne die Zuhilfenahme von Visual Studio.

In meinem Szenario geht es darum, einen speziellen Workflow innerhalb einer Dokumentenbibliothek direkt über einen Button im Ribbon zu starten, ohne dabei den bekannten Umweg „Workflows – Workflow auswählen – Start“ gehen zu müssen.

Für diesen Lösungsansatz benötigt es nur wenige Zutaten: Eine Liste oder Bibliothek, auf der ein manuell zu startender Workflow registriert ist sowie eine oder besser zwei Grafiken, die als Icon für die Schaltflächen im Ribbon genutzt werden. In meinem Beispiel verwende ich eine Dokumentenbibliothek mit einem einfachen Feedback-Workflow. Die Grafiken sollten 32×32 und 16×16 Pixel groß und innerhalb der Website (z. B. Asset Library) hochgeladen worden sein.

Öffnet man diese Bibliothek mit den passenden Berechtigungen, findet man über den Tab „Bibliothek“ die Buttons zur Erstellung eines neuen Quick Steps vor. Diese Aktion führt dazu, dass der SharePoint Designer zusammen mit dem Dialog zur Erstellung eines neuen Quick Steps geöffnet wird.

Quick Steps - Quick Step Icon

Quick Steps - Inplace Button

Das Dialogfenster kann getrost erst einmal geschlossen werden, weil es an dieser Stelle unnütz ist. Kurzer Hintergrund: Die Funktion generiert einen Button im Ribbon und öffnet im Anschluss den Workflow Designer zur Erstellung einer neuen Workflowdefinition. Außerdem macht das Dialogfenster nicht alle Funktionen sichtbar, die es zur Erstellung von neuen Schaltflächen gibt.

Schauen wir uns stattdessen den alternativen Weg zu Registrierung einer Ribbon-Erweiterung an. Dazu muss man zunächst über den SharePoint Designer zur passenden Liste bzw. Bibliothek navigieren. Innerhalb der Gruppe „New“ findet man den Button „Custom Actions“.

Quick Steps - Add Custom Actions

Diese Bezeichnung gibt einen ersten Hinweis, welche Technologie hinten den Quick Steps steckt: die der Custom Actions. Die benutzerdefinierten Aktionen sind eine Technologie, mittels derer man die komplette Benutzeroberfläche erweitern, anpassen oder auch reduzieren kann. Von Buttons im Ribbon über Kontextmenüs innerhalb einer Liste bis hin zu Hyperlinks oder Gruppen innerhalb der Websiteeinstellungen – die Möglichkeiten von Custom Actions sind sehr vielseitig.

Typischer Weise werden solche UI-Anpassungen mit einem Custom Actions Feature und Visual Studio umgesetzt. Mit den Quick Steps erlaubt SharePoint aber auch einen alternativen Weg, die UI zu erweitern.

SharePoint 2013 und auch 2010 ermöglichen die Bereitstellung neuer Schaltflächen für folgende Bereiche: Ribbon in der Elementansicht (View Ribbon), Ansichtsformular eines Elements (Display Form), Bearbeitungsformular eines Elements (Edit Form), Erstellungsformular (New Form) sowie im Kontextmenü eines Listenelements.

Kommen wir zum Beispiel zurück. Benutzerdefinierte Aktionen lassen sich über das vorhin beschriebene Ribbon-Menü oder über einen Button im Einstiegsbereich der Bibliotheks- bzw. Listeneinstellungen erstellen.

Ich verwende das Menü im Ribbon, weil dieses mir mehr Kontrolle über den Typ der Erweiterung liefert. Ich erstelle hierüber einen neuen „View Ribbon“ Button.

Im oberen Bereich werden der Titel sowie eine Beschreibung hinterlegt. Die eigentliche Magie geschieht dann in den Feldern darunter. Eine Quick Step-Aktion erlaub die Navigation zu einem vorhandenen Formular oder speziellen Seite sowie den Start eines vorhandenen Workflows. Dabei unterstützen Quick Steps sogenannten Token mittels derer Werte aus dem Kontextelement (z. B ListItemId) an die Zieladresse zur Laufzeit übergeben werden können. In diesem Beispiel geht es darum, einen Workflow zu starten, daher wähle ich die entsprechende Vorlage:

Quick Steps - Form 1

In den erweiterten Einstellungen werden der Button, der Bereich sowie die erforderlichen Berechtigungen für diese Schaltfläche definiert. Die Grafiken sollten wie bereits beschrieben in zwei Größenvarianten vorliegen – für den vollen sowie den skalierten Button.

Die Ribbon Location legen den Ort fest, in dem der neue Button erscheinen soll. In diesem Beispiel registriere ich den Button innerhalb der Gruppe „Ribbon.Documents.Workflow“.

Quick Steps - Form 2

Der String „Controls._children“ signalisiert der Ribbon UI, diesen Button als Erweiterung zu registrieren. Die Gruppen und Ribbon-Bereiche sind in der MSDN genauestens dokumentiert.

Über das Feld „Rights mask“ werden die für die Aktivierung des Buttons erforderlichen Rechte beschrieben. Die Berechtigungen müssen durch ein Semikolon getrennt erfasst werden. Eine Übersicht aller Rechtemasken ist ebenso in der MSDN zu finden.

Im letzten Eingabefenster wird die Sequenz, also die Position des neuen Buttons innerhalb des definierten Bereichs angegeben. Die Sequenzen der Standard-Buttons werden durch SharePoint in 10er-Schritte vorgegeben. Hierdurch wird es relativ einfach, einen neuen Button genauestens zu positioniert. In meinem Beispiel wähle ich einen möglichst hohen Wert, um den Button am Ende der Workflow-Gruppe zu platzieren.

Quick Steps - New Button Location

So das war es eigentlich auch schon. Nun müssen die Änderungen noch gespeichert werden, wonach der neue Button im Ribbon erscheint.

Quick Steps - Result

Die Quick Steps sind meiner Meinung nach eine sehr nützliche Technologie, die SharePoint-Benutzeroberfläche an geeigneter Stelle zu erweitern. Schnell greift man als Entwickler zu Visual Studio und deklariert eine Custom Action via XML Code. Dieser Artikel sollte veranschaulichen, dass dieser Weg nicht immer erforderlich ist und auch der SharePoint Designer eine gute Alternative sein kann.

Im Übrigen funktioniert das hier beschriebene Beispiel auch in SharePoint 2010 zusammen mit dem SharePoint Designer 2010.

, ,

3 Kommentare zu “No Code Lösung: Buttons im SharePoint-Ribbon hinzufügen”

  1. Sharepoint 1. Februar 2013 um 18:24 #

    Vielen lieben Dank für den Artikel. Genau das war nämlich mein Problem und endlich habe ich eine Lösung dafür gefunden. Funktioniert einwandfrei! Danke :-)

    LG,
    Anni von Sharepoint

Trackbacks/Pingbacks

  1. No Code Lösung: Benutzerdefinierte Buttons im Ribbon hinzufügen – Teil 2 (Scripts ausführen) | BrandMySharePoint - 23. Januar 2013

    [...] ersten Artikel zu diesem Thema habe ich beschrieben, wie über den SharePoint Designer ein Button innerhalb eines [...]

  2. MSDN Blogs - 25. Januar 2013

    [...] Buttons into Ribbon without CodeFabian Moritz shows how to do that without writing [...]

Hinterlasse eine Antwort