SharePoint 2010 Ribbons anpassen und verwenden
Ribbons haben inzwischen in SharePoint 2010 Einzug gehalten. Bei Anwendern und Entwicklern entstand schnell der Wunsch, die neuen Bedienelemente für die eigenen Bedürfnisse anzupassen oder vollkommen neue Ribbons zu erstellen.
- Bernd Pehlke
Die aus Office 2007 und 2010 bekannten Ribbons haben inzwischen in SharePoint 2010 Einzug gehalten. Bei Anwendern und Entwicklern entstand schnell der Wunsch, die neuen Bedienelemente für die eigenen Bedürfnisse anzupassen oder vollkommen neue Ribbons zu erstellen. Darüber hinaus lässt sich das Dialog-Framework nutzen, um eigene Anwendungen besser in die sogenannte FluentUI zu integrieren.
Tipps & Tricks der SharePoint-Entwicklung
SharePoint hat sich zunehmend zu einer zentralen Plattform für Zusammenarbeit, Enterprise Content Management und Geschäftsprozesse entwickelt. Das damit verbundene Potenzial ist mit der Version 2010 sicherlich gewachsen. Viele Unternehmen schöpfen es jedoch nicht voll aus, obgleich es viele Schnittstellen gibt, mit denen Entwickler ihre Erweiterungen umsetzen können.
In dieser Artikelreihe der SharePoint-Experten von Computacenter bisher erschienen:
- Datenquellen im Griff mit SharePoints DataFormWebPart
- Geschäftsdaten mit SharePoint und .NET aufbereiten
- Mobile Webapps für SharePoint entwickeln
- SharePoint 2010 Ribbons anpassen und verwenden
Mit der Einführung kontextsensitiver Ribbons in SharePoint 2010 haben sich neue Wege für die Gestaltung darauf basierender Anwendungen ergeben. Beispielsweise kann man die aus Office 2007 und 2010 bekannte Oberfläche auch für eigene SharePoint-Erweiterungen und -Anwendungen nutzen. Damit lassen sich diese besser in die Arbeitsabläufe integrieren, da für den Anwender die gewohnte Oberfläche zur Verfügung steht. Selbst die in den Startlöchern stehenden Office 2013 und SharePoint 2013 setzen auf die Ribbon-Leisten, sodass es sich lohnt, sich mit der Technik vertraut zu machen.
Viele der folgenden Beispiele zu den sogenannten Custom Actions und JavaScript-Funktionen können anspruchsvolle Endanwender auch mit dem SharePoint Designer 2010 umsetzen. Der Artikel zeigt jedoch, wie sich mit Visual Studio 2010 (und auch mit dem neuen Visual Studio 2012) Menüerweiterungen vornehmen, eine Application Page entwickeln und das Dialog-Framework nutzen lassen.
Die Beispiele sind einer Visual Studio 2010 Solution entnommen (Abb. 1), in der eine SharePoint 2010 Application Page zum Überprüfen von Dokumenten aus einer Dokumentbibliothek implementiert ist. Zudem enthält sie diverse Erweiterungen zur Integration in die SharePoint-Oberfläche.
Menüs erweitern mit Custom Actions
In SharePoint 2010 lassen sich Menüs, wie von SharePoint 2007 gewohnt, durch Custom Actions erweitern. Diese spezifizieren mit wenigen Zeilen XML-kontextsensitive Menüeinträge, zum Beispiel im Ribbon, in den Website-Aktionen, im Kontextmenü eines Listeneintrags oder an vielen anderen Stellen in der SharePoint-Oberfläche. Die Einträge können in der Regel mit Icons versehen sowie rechteabhängig und inhaltsbezogen angezeigt werden. Das folgende Listing zeigt ein XML-Fragment, das bei jeder Dokumentbibliothek, bei der die Custom Action über ein Feature hinzugefügt wurde, einen Kontextmenüeintrag zum Überprüfen des Dokuments ergänzt (Abb. 2):
<CustomAction
Id="4C17CAEB-8519-4B1F-ABFE-A87218053733"
Rights="EditListItems"
Location="EditControlBlock"
RegistrationId="101"
RegistrationType="List"
Title="Dokument überprüfen"
Sequence="1"
Description="Überprüft das Dokument"
ImageUrl="_layouts/images/doc_sp16.gif">
<UrlAction Url="javascript:OpenPopUpPageWithTitle('{SiteUrl}/
_layouts/SPSummit/CheckDocs.aspx?IsDlg=1&ListId={
ListId}&ItemId={ItemId}',RefreshOnDialogClose,600,400,
'Dokument überprüfen')"></UrlAction>
</CustomAction>
Das XML-Fragment beschreibt die folgenden Eigenschaften des Menüeintrags:
- Id: eindeutige ID der Custom Action.
- Location: an welcher Stelle soll das Menü erweitert werden, EditControlBlock ist das Kontextmenü eines ListItem.
- RegistrationId und RegistrationType: bei welchem Listen-, Datei- oder Inhaltstyp soll der Eintrag erscheinen.
- Rights: Es werden zum Beispiel Bearbeitungsrechte benötigt, sonst ist der Eintrag ausgeblendet.
- Icon: URL zum Icon des Menüeintrags.
- UrlAction: URL- oder JavaScript-Funktion, die beim Auswählen des Menüeintrags ausgeführt wird.
Dieser einfache Eintrag im Kontextmenü eines Dokuments wird für Anwender mit Bearbeitungsrechten angezeigt und öffnet einen Modaldialog, der die Application Page CheckDocs.aspx darstellt, die der Abschnitt "Das erste eigene Server-Ribbon" erläutert (Abb. 3). Neben der reinen URL der Application Page werden außerdem die Token für die Listen-ID und die ListItem-ID übergeben, sodass die Application Page zur Laufzeit diese Parameter auslesen kann.
Da die Anwender nicht nur einzelne Dokumente überprüfen möchten, sondern gegebenenfalls mehrere auf einmal, fügt das nächste Beispiel ein Ribbon-Button zur Dokumentbibliothek hinzu. Er ermöglicht es, mehrere ausgewählte Dokumente in einem Schritt zu übertragen. Folgendes Listing spezifiziert in einer weiteren Custom Action den Ribbon-Button und die zugehörige Aktion für Multiselect beim Drücken des Buttons:
<CustomAction Id="CheckDocs"
Location="CommandUI.Ribbon"
RegistrationId="101"
RegistrationType="List"
>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.Documents.Share.
Controls._children">
<Button Id="CheckDocsButton"
Command="CheckDocs.Button.Command"
Image16by16="/_layouts/images/icxddoc.gif"
Image32by32="/_layouts/images/lg_icdoc.png"
LabelText="Dokumente überprüfen"
Sequence="11"
TemplateAlias="o1"/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="CheckDocs.Button.Command"
CommandAction="javascript:function checkdocs() {
var ctx = SP.ClientContext.get_current();
var items= SP.ListOperation.Selection.
getSelectedItems(ctx);
var myitems ='';
var k;
for (k in items)
{
myitems += '|'+items[k].id;
}
if (myitems !='')
javascript:OpenPopUpPageWithTitle('{SiteUrl}/_layouts/
SPSummit/CheckDocs.aspx?ItemId='+myitems+'&
amp;ListId='+SP.ListOperation.Selection.
getSelectedList()+'', RefreshOnDialogClose,
600,800,'Dokumente überprüfen');
}
checkdocs();" EnabledScript="javascript:function
multiEnable () {
var items = SP.ListOperation.Selection.
getSelectedItems();
var ci = CountDictionary(items);
return (ci >1);
}
multiEnable();" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
Bei einer Custom Action für einen Ribbon-Button sind die folgenden Attribute entscheidend:
- Location: CommandUI.Ribbon in Verbindung mit RegistrationType und RegistrationID fügt den Button auf dem Ribbon einer Dokumentbibliothek im Abschnitt Documents/Share (ID 101) hinzu.
- CommandUIDefinition: beschreibt die UI-Erweiterung, im konkreten Fall die Location auf dem Ribbon, auf dem der Button hinzugefügt werden soll.
- Button Command: definiert die Command ID, die bei den CommandUIHandlern für die Button-Aktion zum Einsatz kommt.
- CommandUIHandler: spezifiziert die Aktion, die zum Command Name ausgeführt werden soll.
Das Ribbon wird komplett clientseitig gerendert und behandelt. Daher bietet es sich an, beim CommandUIHandler für den neuen Ribbon-Button die ausgewählten Dokumente mit dem SharePoint Client Object Model zu ermitteln. Zudem sollten deren IDs ebenso wiebei der Einzelauswahl über das Kontextmenü an die oben genannte Application Page per URL-Parameter übergeben werden. Damit der Button nur verfügbar ist, wenn tatsächlich mehrere Dokumente ausgewählt wurden (Abb. 3), ist beim Attribut EnableStatement eine JavaScript-Funktion angegeben. Sie überprüft die Anzahl der ausgewählten Dokumente und aktiviert den Ribbon-Button erst bei mehr als einem selektierten Dokument.
