Anpassen und Erweitern des Menübands für die Serverkomponente in SharePoint 2010

In diesem Artikel finden Sie Informationen zu den Komponenten, aus denen das Menüband für die Serverkomponente in SharePoint 2010 besteht, sowie zum Anpassen des Menübands mithilfe von zwei Szenarien zum Anpassen des Menübands.

Letzte Änderung: Mittwoch, 19. Januar 2011

Gilt für: Business Connectivity Services | Office 2010 | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Inhalt dieses Artikels
Einführung in das Menüband für die Serverkomponente in SharePoint 2010
Architektur des Menübands für die Serverkomponente in SharePoint 2010
Anpassen des Menübands für die Serverkomponente in SharePoint 2010
Anpassen der integrierten Komponenten des Menübands für die Serverkomponente in SharePoint 2010
Erstellen benutzerdefinierter Komponenten des Menübands für die Serverkomponente in SharePoint 2010
Tipps und Tricks zum Entwickeln eines benutzerdefinierten Menübands für die Serverkomponente in SharePoint 2010
Schlussfolgerung
Weitere Ressourcen

Bereitgestellt von: Andrew Connell, Critical Path Training, LLC

Inhalt

• Einführung in das Menüband für die Serverkomponente in SharePoint 2010

• Architektur des Menübands für die Serverkomponente in SharePoint 2010

• Anpassen des Menübands für die Serverkomponente in SharePoint 2010

• Anpassen der integrierten Komponenten des Menübands für die Serverkomponente in SharePoint 2010

• Erstellen benutzerdefinierter Komponenten des Menübands für die Serverkomponente in SharePoint 2010

• Tipps und Tricks zum Entwickeln eines benutzerdefinierten Menübands für die Serverkomponente in SharePoint 2010

• Schlussfolgerung

• Weitere Ressourcen

  Laden Sie den zu diesem Artikel gehörenden Beispielcode herunter: MSDN-Beispiel – Anpassen und Erweitern des Menübands für die Serverkomponente in SharePoint 2010

Einführung in das Menüband für die Serverkomponente in SharePoint 2010

Mit der Veröffentlichung von 2007 Microsoft Office System hat Microsoft eine neue Benutzeroberflächenstruktur eingeführt, die als Menüband bezeichnet wird. Das Menüband ersetzt die bisherigen Dropdownmenüs und Symbolleisten. Umfangreiche Studien hatten ergeben, dass bestimmte Anwendungen, wie z. B. Microsoft Word, zu viele Menübefehle enthielten und die Benutzer Schwierigkeiten hatten, die entsprechenden Menübefehle zu finden. Deshalb wurde das Menüband entwickelt.

Das Menüband weist eine eher ergebnisgesteuerte Oberfläche auf. Die Benutzer konzentrieren sich auf Ihre Arbeit, und es werden immer nur die Befehle angezeigt, die für die aktuell ausgeführten Aktionen eine Rolle spielen. Beispielsweise gibt es keinen Grund, dass dem Benutzer Menübefehle für die Interaktion mit Tabellen oder Bildern in einem Dokument angezeigt werden, wenn er Text eingibt und kein Bild bzw. keine Tabelle ausgewählt hat. Mit der Registerkarte Einfügen kann der Benutzer jedoch auf einfache Weise eine Tabelle oder ein Bild hinzufügen. Nur wenn die Tabelle oder das Bild ausgewählt ist, werden neue Befehlsstrukturen angezeigt. Wenn die Tabelle oder das Bild den Fokus verliert, werden diese Befehle nicht mehr angezeigt.

In 2007 Microsoft Office System wurde das Menüband in Microsoft Word, Microsoft Excel und Microsoft PowerPoint implementiert. Microsoft hat die Verwendung des Menübands ausgeweitet und allen Microsoft Office 2010-Anwendungen einschließlich Microsoft OneNote 2010, Microsoft Access 2010 und Microsoft InfoPath 2010 hinzugefügt.

Wie die Microsoft Office-Clients hatten SharePoint-Benutzer ähnliche Schwierigkeiten beim Auffinden von Steuerelementen zum Ausführen ihrer Arbeit. Die Befehle waren an vielen verschiedenen Stellen auf der Seite vorhanden, beispielsweise im Menü Websiteaktionen, in den Webparts oder in den ECB-Menüs (Edit Control Block, Bearbeitungskontrollblock) in Listen. In Abbildung 1 sind alle Menüs dargestellt, die für die Benutzer in einer Windows SharePoint Services 3.0-Website verfügbar sind.

Abbildung 1. Menüs und Befehle in Windows SharePoint Services 3.0

In Microsoft SharePoint 2010 hat Microsoft das Menüband für die Serverkomponente SharePoint hinzugefügt, weil die Benutzer dieselben Probleme mit zu vielen Menübefehlen in den Microsoft Office-Clients hatten. Alle Befehle und Menüelemente wurden aus dem Hauptarbeitsbereich in SharePoint in das Menüband verlagert, das sich weiterhin am oberen Rand des Browserfensters befindet. Benutzer von 2007 Microsoft Office System oder anderen Anwendungen, die das Menüband implementiert haben, werden sich mit dem SharePoint-Menüband sehr schnell zurechtfinden, da es sehr ähnlich wie die Menübänder der Office-Clients ist. Das SharePoint-Menüband ist bezüglich der Struktur und der Funktionsweise mit dem Office-Menüband vergleichbar und weist dieselben Steuerelemente wie das Office-Menüband auf. Die einzigen Unterschiede zwischen dem Office-Menüband und dem Menüband für die Serverkomponente in SharePoint betreffen die Technologien. Beispielsweise ist es nicht einfach, im Web (Client mit reduziertem Funktionsumfang) verschiedene Schriftarten darzustellen, wie dies beim Desktop (Client mit vollem Funktionsumfang) möglich ist.

Das Menüband in SharePoint 2010 basiert auf einer ähnlichen Architektur wie das Menüband der Office-Clients. Microsoft implementiert mithilfe dieser Architektur das Standardmenüband in SharePoint 2010. Mit dieser Architektur können Drittentwickler die bestehenden Menübandkomponenten in SharePoint anpassen und erweitern sowie Befehlsstrukturen erstellen.

In diesem Artikel werden die Komponenten erläutert, aus denen das Menüband für die Serverkomponente in SharePoint besteht, damit Sie die Struktur des Menübands nachvollziehen können. Anschließend wird beschrieben und gezeigt, wie Entwickler das Menüband anpassen und erweitern können. Unter Allgemeine Referenz zu SharePoint Foundation 2010 finden Sie einen Abschnitt mit Erläuterungen zum Menüband sowie verschiedene exemplarische Vorgehensweisen zur Anpassung. Beim Anpassen des Menübands wird empfohlen, diesen Artikel in Verbindung mit der allgemeinen Referenz zu SharePoint Foundation 2010 zu verwenden, insbesondere den Abschnitt Servermenüband in SharePoint Foundation.

Architektur des Menübands für die Serverkomponente in SharePoint 2010

Das Standardmenüband wird von SharePoint erstellt und basiert auf einer einzelnen Datei, die Bestandteil der Hauptinstallation ist. Diese Datei gehört zur globalen Websitedefinition im Pfad {SharePoint Root}\TEMPLATE\GLOBAL\XML\CMDUI.XML. Sie enthält die Definitionen für die Menübandkomponenten in SharePoint Foundation 2010, wie z. B. Durchsuchen, Seite, Liste, Bibliothek und Dokument.

Die Datei CMDUI.xml enthält zwar alle Hauptkomponenten für das Menüband für die Serverkomponente, aber zusätzliche Anpassungen des Menübands werden nicht auf diese Weise implementiert. Für zusätzliche Änderungen am Menüband werden SharePoint-Features verwendet. Beispielsweise enthält Microsoft SharePoint Server 2010 viele Elemente, die Änderungen des Menübands erfordern, wie z. B. im Zusammenhang mit Enterprise Content Management, Forms Services und Business Intelligence. Diese Änderungen werden alle mithilfe von SharePoint-Features implementiert. SharePoint-Entwickler können das Menüband auch mithilfe von Features wie weiter unten in diesem Artikel unter Erstellen benutzerdefinierter Komponenten des Menübands für die Serverkomponente in SharePoint 2010 beschrieben anpassen.

In SharePoint 2010 wurde das Featureschema erweitert, insbesondere das <CustomAction />-Element, und wird nun für alle Menübandanpassungen verwendet. Dazu wird das Location-Attribut auf CommandUI.Ribbon festgelegt und ein untergeordnetes <CommandUIExtension />-Element hinzugefügt. Das SharePoint 2010 SDK bietet eine Übersicht über das XML für das Menüband für die Serverkomponente.

In den folgenden beiden Abschnitten werden die beiden zentralen Menübandkomponenten behandelt: die Komponenten für die visuelle Darstellung sowie der Code, der ausgeführt wird, wenn auf eines der Steuerelemente im Menüband geklickt wird.

Komponenten des Menübands für die Serverkomponente in SharePoint 2010

Das Menüband für die Serverkomponente in SharePoint 2010 weist verschiedene Komponenten auf, die in Abbildung 2 dargestellt sind.

Abbildung 2. Komponenten des Menübands für die Serverkomponente in SharePoint 2010

Die Zahlen in der Abbildung verweisen auf die folgenden speziellen Komponenten:

1. Registerkarte

2. Gruppe

3. Steuerelement

4. Kontextregisterkartengruppe

In den nächsten Abschnitten werden diese Komponenten und deren Verwendung kurz erläutert.

Registerkarten im Menüband für die Serverkomponente in SharePoint 2010

Registerkarten bilden die Grundlage für das Menüband für die Serverkomponente. Sie enthalten eine oder mehrere Gruppen mit ähnlichen Funktionen. Beispielsweise weist die in Abbildung 2 aktuell ausgewählte Registerkarte Seite Funktionen für das Arbeiten mit der aktuellen Seite auf.

Kontextregisterkartengruppen im Menüband für die Serverkomponente in SharePoint 2010

Mit Kontextregisterkartengruppen werden Funktionen bereitgestellt, die für den aktuellen Kontext nicht global sind, wie z. B. die Seite. Sie werden nur angezeigt, wenn bestimmte Umstände erfüllt sind, und sie enthalten eine oder mehrere Registerkarten.

Beispielsweise enthält das Menüband in Abbildung 2 die Kontextregisterkartengruppe Bibliothekstools, die nur angezeigt wird, wenn der Benutzer eine Dokumentbibliothek geöffnet hat oder wenn wie in diesem Fall das Listenansicht-Webpart auf der aktuellen Seite, die einer Dokumentbibliothek zugeordnet ist, ausgewählt ist.

Mit Kontextregisterkartengruppen werden Funktionen und Menüoptionen für den Benutzer ausgeblendet, wenn sie nicht verfügbar sind, bzw. angezeigt, wenn sie verfügbar sind. Weitere Beispiele für Kontextregisterkartengruppen sind die Kontextregisterkartengruppe Bearbeitungstools, die beim Bearbeiten einer Wiki-Seite angezeigt wird, oder die Kontextregisterkartengruppe Bildtools, die angezeigt wird, wenn ein Bild im Bearbeitungsmodus ausgewählt ist.

Gruppen im Menüband für die Serverkomponente in SharePoint 2010

Jede Registerkarte im Menüband enthält eine oder mehrere Gruppen. Mithilfe von Gruppen werden Steuerelemente mit ähnlicher Funktionalität zusammengefasst. Jeder Gruppe ist eine Vorlage zugeordnet. Sie definiert das Layout der Gruppe sowie die Darstellung der Gruppe basierend auf der Skalierung des Menübands. Die Menübandskalierung betrifft Situationen, in denen nicht alle Steuerelemente im Menüband angezeigt werden können, weil zu viele Steuerelemente vorhanden sind. Beispielsweise, wenn der Browser nicht im Vollbildmodus angezeigt wird.

Gruppenvorlagen im Menüband für die Serverkomponente in SharePoint 2010

Mithilfe von Gruppenvorlagen werden die verschiedenen Layoutoptionen für die Steuerelemente innerhalb einer Gruppe definiert. In der Datei CMDUI.xml gibt es 29 Gruppenvorlagen (suchen Sie nach dem <RibbonTemplates />-Element am Ende dieser Datei).

Steuerelemente im Menüband für die Serverkomponente in SharePoint 2010

Das Menüband wäre unvollständig, wenn die Benutzer keine Steuerelemente auswählen oder darauf klicken könnten. Steuerelemente sind im Menüband vorhanden, und die Benutzer können mit ihnen interagieren. Steuerelemente sind in Gruppen angeordnet. Hierzu zählen Schaltflächen, Umschaltflächen, Kontrollkästchen, Textfelder und viele andere Steuerelemente. Eine vollständige Aufstellung aller verfügbaren Steuerelemente finden Sie unter Architektur des Menübands der Serverkomponente.

Jede Steuerelementdefinition enthält ein Command-Attribut, mit dem die Menübandinfrastruktur angewiesen wird, welche Aktion ausgeführt werden soll, wenn das Steuerelement ausgewählt oder darauf geklickt wird.

Befehle im Menüband für die Serverkomponente in SharePoint 2010

Das Menüband für die Serverkomponente verwendet Befehle für Klick- oder Auswahlaktionen durch den Benutzer. Benutzer, die mit der Funktionsweise der Befehlsinfrastruktur in Windows Presentation Foundation oder Microsoft Silverlight 4 vertraut sind, werden kaum Unterschiede zur Befehlsinfrastruktur beim Menüband für die Serverkomponente feststellen. Jeder Befehl hat einen Namen. Auf diesen Namen wird in einem Steuerelement verwiesen. Im Prinzip enthalten Befehle zwei sehr wichtige Details:

• Ob der aktuelle Befehl verfügbar ist Beispielsweise ist der Befehl Löschen nur verfügbar in einer Dokumentbibliothek oder wenn Dokumente ausgewählt sind.

• Welcher Code ausgeführt werden soll Beispielsweise kann der Befehl Löschen das clientseitige Objektmodell von SharePoint 2010 verwenden, um das Element aus der Liste zu löschen, eine Benachrichtigung über das Löschen des Dokuments anzuzeigen sowie das Listenansicht-Webpart auf der Seite zu aktualisieren.

Im Thema Architektur des Menübands der Serverkomponente finden Sie zusätzliche Informationen zur genauen Funktionsweise der Befehlsinfrastruktur.

Befehle im Menüband für die Serverkomponente werden mithilfe von ECMAScript (JavaScript, JScript) geschrieben. Für die Implementierung von Befehlen stehen zwei Möglichkeiten zur Verfügung:

• Über Befehlsbenutzeroberflächen-Handler (CommandUIHandler)

• Über Seitenkomponenten (PageComponent)

Diese beiden Optionen werden in den folgenden Abschnitten erläutert, wobei jeweils auf die Vor- und Nachteile eingegangen wird. Im Allgemeinen sind einfache und relativ kurze Befehle für den Befehlsbenutzeroberflächen-Handler geeignet. Befehle, die ziemlich komplex sind und viel JavaScript für die Implementierung erfordern, sind vermutlich für Seitenkomponenten besser geeignet. Das Beispiel für die Menübandanpassung, das weiter unten in diesem Artikel im Dokumentbibliothekbeispiel verwendet wird, veranschaulicht, wie Sie mit den beiden Techniken dasselbe Ergebnis erzielen.

Implementieren von Befehlen im Menüband für die Serverkomponente mithilfe von Befehlsbenutzeroberflächen-Handlern

Befehlsbenutzeroberflächen-Handler (CommandUIHandler) werden mit einer Mischung aus deklarativem Markup und JavaScript implementiert. Sie werden im selben Featureelementmanifest, in dem auch Menübandanpassungen definiert werden (mithilfe des <CommandUIExtension />-Elements), mit einem <CommandUIHandler />-Element definiert. Dieses Element enthält die folgenden drei Attribute:

• Command Der Name des Befehls, der in einem Steuerelement angezeigt wird.

• CommandAction Das JavaScript, das beim Auslösen des Befehls ausgeführt wird.

• EnabledScript Das JavaScript, das von der Menüband für die Serverkomponente-Befehlsinfrastruktur aufgerufen wird, um zu bestimmen, ob der Befehl verfügbar ist. Dieses Skript sollte einen booleschen Wert zurückgeben, nämlich TRUE, falls der Befehl verfügbar ist, oder FALSE, falls er nicht verfügbar ist. Wenn der Befehl nicht verfügbar ist, wird er im Menüband grau dargestellt, und wenn der Benutzer den Befehl auswählt, wird er nicht aufgerufen.

Vorteile der Verwendung von Befehlsbenutzeroberflächen-Handlern

Befehlsbenutzeroberflächen-Handler sind für die meisten Entwickler im Allgemeinen einfacher zu schreiben und zu verwalten. Sie werden deklarativ definiert, weshalb das Menübandframework das Skript zu Seiten hinzufügt, auf denen der Befehl für ein Steuerelement erforderlich ist, das auf diesen Befehl verweist.

Nachteile der Verwendung von Befehlsbenutzeroberflächen-Handlern

Befehlsbenutzeroberflächen-Handler haben unter anderem den Nachteil, dass es möglicherweise Schwierigkeiten bei Verwaltung, Problembehandlung und Debugging gibt, wenn sie viel benutzerdefiniertes JavaScript enthalten. Da sie außerdem jeder Seite als Inlineskriptblöcke hinzugefügt werden, können sie vom Browser nicht zwischengespeichert werden und müssen jedes Mal heruntergeladen werden, wodurch der Seitenumfang zunimmt.

Implementieren von Befehlen im Menüband für die Serverkomponente mithilfe von Seitenkomponenten

Eine Alternative zu Befehlsbenutzeroberflächen-Handlern ist die Verwendung einer Seitenkomponente (PageComponent). Eine Seitenkomponente ist ein JavaScript-Objekt, das in einer externen Skriptbibliotheksdatei (JS) definiert ist. Das Objekt implementiert Eigenschaften und Methoden, mit denen die Menüband für die Serverkomponente-Befehlsinfrastruktur angewiesen wird, wie sie initialisiert werden soll, welche Befehle verwendet werden können und ob ein bestimmter Befehl verfügbar ist, und die auch reagieren können, wenn die Seitenkomponente den Fokus erhält oder verliert.

Diese Skriptdatei muss derselben Seite hinzugefügt werden, in der die Menübandanpassungen angezeigt werden. Hierfür sind verschiedene Methoden möglich. Beispielsweise können Sie mit der neuen Funktion <CustomAction ScriptSrc="" /> in SharePoint 2010 die Bibliothek in Abhängigkeit vom Gültigkeitsbereich des Features allen Seiten einer Website, Websitesammlung, Webanwendung bzw. Farm hinzufügen. Eine weitere Methode ist das Hinzufügen des Skripts über verwalteten Code in einer benutzerdefinierten Anwendung oder Websiteseite (ASPX), in einem benutzerdefinierten Benutzersteuerelement (ASCX) oder in einem benutzerdefinierten Serversteuerelement. Im folgenden Codebeispiel wird die Seitenkomponentendatei in einem Webpart zur Seite hinzugefügt.

private void LoadAndActivateRibbonContextualTab() {
  SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);
  // Ensure ribbon exists.
  if (ribbon != null) {
    // Load dependencies if not already on the page.
    ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Ribbon.js", false, true);

    // Load and activate contextual tab.
    ribbon.MakeTabAvailable("Ribbon.PropertyChangerTab");
    ribbon.MakeContextualGroupInitiallyVisible("Ribbon.WebPartContextualTabGroup", string.Empty);
  }
}

Vorteile der Verwendung von Seitenkomponenten

Das gesamte JavaScript ist in einer externen Skriptbibliothek vorhanden. Deshalb ist die Verwaltung, die Problembehandlung und das Debugging einer Seitenkomponente viel einfacher als bei einem Befehlsbenutzeroberflächen-Handler (der Microsoft Visual Studio 2010-Skriptdebugger kann Haltepunkte festlegen und an die Bibliothek anfügen). Da es sich um eine externe Bibliothek handelt, können darüber hinaus Browser die Bibliothek zwischenspeichern, ohne sie jedes Mal anfordern zu müssen, wenn auf der Seite darauf verwiesen wird.

Seitenkomponenten ermöglichen außerdem mehr Kontrolle über Befehle, da damit aktiviert bzw. deaktiviert werden kann, dass die Seitenkomponente den Fokus erhält oder verliert, und die Ereignisse für diese Fälle behandelt werden.

Da es sich um externe Bibliotheken handelt, kann eine Seitenkomponente Befehle für mehrere Steuerelemente verwalten und kann deshalb für verschiedene Menübandanpassungen wiederverwendet werden.

Nachteile der Verwendung von Seitenkomponenten

Ein Nachteil der Verwendung von Seitenkomponenten im Vergleich zu Befehlsbenutzeroberflächen-Handlern ist, dass für Seitenkomponenten große Skriptmengen erforderlich sind. Dies liegt in erster Linie daran, dass Entwickler ein Skriptobjekt auf der Seite erstellen, registrieren und initialisieren. Darüber hinaus kann sich dies für Entwickler, die nicht mit objektorientierten JavaScript-Techniken vertraut sind, als schwierig erweisen.

Die Verwendung von Seitenkomponenten hat außerdem den Nachteil, dass sie irgendwie der Seite hinzugefügt werden müssen, da dies nicht von der Befehlsinfrastruktur des Menübands übernommen wird.

Anpassen des Menübands für die Serverkomponente in SharePoint 2010

Entwickler haben zwei Möglichkeiten, um das Menüband für die Serverkomponente in SharePoint anzupassen. Anpassungen können entweder deklarativ oder programmgesteuert angewendet werden. Die deklarative Vorgehensweise, die weiter oben in diesem Artikel beschrieben wurde, erfolgt mithilfe von Features, nämlich mit dem <CustomAction />-Element mit dem untergeordneten <CommandUIExtensions />-Element.

Bei der programmgesteuerten Vorgehensweise werden die deklarativen Komponenten den Objekten im Menüband für die Serverkomponente als Zeichenfolgen hinzugefügt. Im Rest dieses Artikels wird die deklarative Vorgehensweise behandelt, da diese Techniken auch für die programmgesteuerte Vorgehensweise gelten. Das SharePoint 2010 SDK enthält eine exemplarische Vorgehensweise zum programmgesteuerten Anpassen des Menübands: Exemplarische Vorgehensweise: Erstellen eines benutzerdefinierten Webparts mit einer Kontextregisterkarte.

Anpassen der integrierten Komponenten des Menübands für die Serverkomponente in SharePoint 2010

Entwickler haben drei Möglichkeiten, um das Menüband anzupassen:

• Hinzufügen von Komponenten zum Menüband (Registerkarten, Kontextregisterkartengruppen, Gruppen und Steuerelemente)

• Ändern vorhandener Komponenten im Menüband

• Entfernen vorhandener Komponenten aus dem Menüband

Alle drei Optionen können deklarativ ausgeführt werden. Im Artikel XML für das Menüband für die Serverkomponente werden die verschiedenen Elemente behandelt. Und im Artikel Deklarative Anpassung des Menübands der Serverkomponente wird beschrieben, wie Sie dem Menüband drei gängige Komponenten hinzufügen.

Das Ändern und Entfernen von Komponenten, wie z. B. Registerkarten, Gruppen und Steuerelemente, erfolgt weitgehend auf dieselbe Weise und mit denselben Schemaelementen. Sie können ein Element ändern, indem Sie seine ID duplizieren und einfach dessen Inhalt ersetzen. Ganz ähnlich wie dies bei Inhaltsplatzhaltern in Microsoft ASP.NET 2.0-Gestaltungsvorlagen der Fall ist. Das Entfernen ist mit dem Ändern identisch, außer dass der Container leer bleibt. Weitere Informationen finden Sie unter Deklarative Anpassung des Menübands der Serverkomponente.

Erstellen benutzerdefinierter Komponenten des Menübands für die Serverkomponente in SharePoint 2010

In den folgenden beiden Abschnitten wird beschrieben, wie Sie das Menüband für die Serverkomponente in SharePoint 2010 anpassen. Für die beiden exemplarischen Vorgehensweisen werden verschiedene Techniken verwendet, und jede Komponente wird ausführlich erläutert. Den Beispielcode für die beiden exemplarischen Vorgehensweisen finden Sie unter MSDN-Beispiel – Anpassen und Erweitern des Menübands für die Serverkomponente in SharePoint 2010. Für diesen Beispielcode ist nur eine SharePoint Foundation 2010-Websitesammlung erforderlich.

Das in Abbildung 3 dargestellte erste Beispiel, WebPartRibbonContextualTab, veranschaulicht das Erstellen eines benutzerdefinierten Webparts, das die folgenden Menübandanpassungen verwendet:

• Kontextregisterkartengruppe

• Benutzerdefinierte Registerkarte

• Benutzerdefinierte Gruppe

• Befehlsbenutzeroberflächen-Handler

• Aktivieren der Kontextregisterkartengruppe nur, wenn sich das Webpart auf der Seite befindet

• Auslösen und Verwalten eines serverseitigen Postbacks, wenn auf eine Schaltfläche im Menüband geklickt wird.

Abbildung 3. Webpart mit Kontextregisterkartengruppe

Das in Abbildung 4 dargestellte zweite Beispiel, ApplyDocumentPrefixRibbon, veranschaulicht das Implementieren der folgenden Anpassungen und Techniken:

• Eine benutzerdefinierte Gruppe in einer vorhandenen Menübandregisterkarte.

• Eine benutzerdefinierte Gruppenvorlage mit unterschiedlichen Layoutoptionen.

• Zwei benutzerdefinierte Befehle, mit denen identische Aktionen ausgeführt werden, außer dass ein Befehl mit einem Befehlsbenutzeroberflächen-Handler und der andere Befehl mit einer benutzerdefinierten Seitenkomponente implementiert wird:

  • Die Befehle sind deaktiviert, außer wenn Dokumente in der Bibliothek ausgewählt werden.

  • Beim Klicken wird mit den Befehlen ein Dialogfeld geöffnet, die ausgewählten Dokumente werden übergeben, und Aktionen basierend auf der Benutzereingabe werden ausgeführt.

  • Wenn die Aktionen des Dialogfelds abgeschlossen sind, wird das Dialogfeld geschlossen, eine Benachrichtigung wird angezeigt, und das Listenansicht-Webpart wird anstelle der gesamten Seite aktualisiert.

• Ein benutzerdefiniertes Serversteuerelement, mit dem die Seitenkomponente unter bestimmten Bedingungen geladen wird.

Abbildung 4. Benutzerdefinierte Gruppe mit Seitenkomponente

Hinweis
Zur Verbesserung der Lesbarkeit wurde Markup im Beispielcode ausgelassen. Den vollständigen Code finden Sie unter MSDN-Beispiel – Anpassen und Erweitern des Menübands für die Serverkomponente in SharePoint 2010.

Erstellen einer Webpart-kompatiblen Kontextregisterkarte und Verwenden für Postbacks

Wenn in diesem Beispiel das Webpart zur Seite hinzugefügt wird, wird die Kontextregisterkarte wie in Abbildung 3 weiter oben dargestellt angezeigt. Diese Registerkarte enthält zwei Gruppen mit ein paar Schaltflächen. Mit den Schaltflächen in der ersten Gruppe wird nur angezeigt, wie eine der Standardvorlagen verwendet wird. Mit der Schaltfläche Write to Web Part via PostBack wird jedoch ein Postback ausgestellt. Das Webpart enthält Code, mit dem überprüft wird, ob das Postpack von der Schaltfläche ausgestellt wurde. Falls dies der Fall ist, wird dem Webpartinhalt Text hinzugefügt.

Schritt 1: Erstellen des Webparts

Der erste Schritt besteht im Erstellen des Webparts. Erstellen Sie mit den neuen SharePoint-Entwicklungstools in Microsoft Visual Studio 2010 ein SharePoint-Projekt, und fügen Sie dem Projekt ein Webpart-SharePoint-Projektelement hinzu. Mit der CreateChildControls-Methode werden zwei Aktionen ausgeführt: Text wird in das Webpart geschrieben, und für den Fall, dass ein bestimmtes Postbackereignis ausgelöst wird, wird eine Methode aufgerufen (siehe folgenden Code).

public class RibbonizedWebPart : WebPart {
  private string POSTBACK_EVENT = "RibbonizedWebPartPostback";

  protected override void CreateChildControls() {
    this.Controls.Add(
      new LiteralControl(
        "<em>Ribbonized Web Part contents go here</em>"
      )
    );

    // Handle postback from ribbon. 
    HandleRibbonPostback();
  }
}

Im nächsten Schritt erstellen Sie die Methode für das Postbackereignis. Wenn es sich um ein bestimmtes Postbackereignis handelt, wird wie im folgenden Code veranschaulicht zusätzlicher Text in den Webpartinhalt geschrieben.

private void HandleRibbonPostback() {
  if (this.Page.Request["__EVENTTARGET"] == POSTBACK_EVENT) {
    this.Controls.Add(
      new LiteralControl(
        "<p>Responding to postback event from ribbon.</p>"
      )
    );
  }
}

Im letzten Schritt wird der Code implementiert, mit dem der Seite die benutzerdefinierte Kontextregisterkarte hinzugefügt wird. Dies erfolgt in der OnPreRender-Phase des Webpartlebenszyklus. Ein Verweis auf das Menüband für die Serverkomponente wird abgerufen und es wird sichergestellt, dass die Skriptabhängigkeiten bereits auf der Seite geladen sind. Schließlich wird zum Anzeigen der Kontextregisterkarte die Registerkarte mit der ID Ribbon.PropertyChangerTab verfügbar gemacht, und das Menüband wird angewiesen, beim Laden der Seite die Kontextregisterkarte mit der ID Ribbon.WebPartContextualTabGroup verfügbar zu machen (siehe folgenden Code).

protected override void OnPreRender(EventArgs e) {
  LoadAndActivateRibbonContextualTab();
  base.OnPreRender(e);
}

private void LoadAndActivateRibbonContextualTab() {
  SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);
  // Ensure ribbon exists.
  if (ribbon != null) {
    // Load dependencies if not already on the page.
    ScriptLink.RegisterScriptAfterUI(this.Page, 
      "SP.Ribbon.js", false, true);

    // Load and activate contextual tab.
    ribbon.MakeTabAvailable("Ribbon.PropertyChangerTab");
    ribbon.MakeContextualGroupInitiallyVisible(
      "Ribbon.WebPartContextualTabGroup", string.Empty);
  }
}

Schritt 2: Erstellen der Komponentenanpassungen für das Menüband für die Serverkomponente

Nachdem das Webpart erstellt wurde, müssen im nächsten Schritt die Komponentenanpassungen für das Menüband für die Serverkomponente erstellt werden. Dazu erstellen Sie eine Kontextregisterkartengruppe, eine Registerkarte mit zwei Gruppen sowie ein paar Steuerelemente.

Die SharePoint-Entwicklungstools in Microsoft Visual Studio 2010 enthalten keine SharePoint-Projektelementvorlage zum Anpassen des Menübands. Das allgemeine SharePoint-Projektelement Leeres Element kann jedoch für die Menübandanpassungen verwendet werden. Fügen Sie deshalb ein neues Element hinzu.

Schritt 2.1: Hinzufügen des zentralen Menüband-Markups zum Element

Fügen Sie der Datei element.xml im neuen SharePoint-Projektelement Element für das Projekt das folgende Markup hinzu.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WebPartContextualTabs" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions />
      <CommandUIHandlers />
    </CommandUIExtension>
  </CustomAction>
</Elements>

Hiermit wird SharePoint Folgendes mitgeteilt:

• Das Elementmanifest enthält Menübandanpassungen, die überall für das Menüband gelten (<CustomAction Location="CommandUI.Ribbon" />). Für das Location-Attribut gibt es fünf Optionen. Mit den anderen Optionen können Entwickler angeben, dass die Anpassungen angezeigt werden sollen, wenn das Listenansicht-Webpart im Anzeigeformular, im neuen Formular oder im Bearbeitungsformular für ein Element vorhanden ist. Darüber hinaus haben Entwickler mit RegistrationType und RegistrationId mehr Kontrolle darüber, wo die Anpassungen angezeigt werden. Beispielsweise für einen bestimmten Inhaltstyp. Eine Aufstellung aller Optionen finden Sie unter XML für das Menüband für die Serverkomponente.

• Die grundlegende Struktur für eine Menübandanpassung ist ebenfalls enthalten.

Schritt 2.2: Hinzufügen einer neuen Kontextregisterkartengruppe

Im nächsten Schritt fügen Sie das folgende Markup hinzu, mit dem die Kontextregisterkartengruppe erstellt wird.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WebPartContextualTabs" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition 
                Location="Ribbon.ContextualTabs._children">
          <ContextualGroup Id="Ribbon.WebPartContextualTabGroup"
                ContextualGroupId="WebPartContextualTab"
                Title="Ribbonized Web Part Tools"
                Sequence="150"
                Color="Green"
                Command="WebPartContextualTab.OnEnableContextualTab">
          </ContextualGroup>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers />
    </CommandUIExtension>
  </CustomAction>
</Elements>

Mit dem <CommandUIDefinition> Location-Attribut wird das Menüband angewiesen, die folgenden Inhalte, bei denen es sich um <ContextualGroup />-Elemente handelt, den Kontextregisterkarten im Menüband hinzuzufügen.

Mit dem <ContextualGroup />-Element wird die neue Gruppe definiert. Sie weist ein Id-Attribut auf, das dem Namen der Kontextgruppe entspricht, die gemäß dem Webpartcode beim Laden der Seite im Menüband angezeigt werden soll.

Mit dem Sequence-Attribut wird SharePoint die Reihenfolge dieser Kontextgruppe mitgeteilt, wenn andere Kontextgruppen vorhanden sind. Die SharePoint-Kontextgruppen erhalten Sequenznummern, die jeweils um den Wert 100 schrittweise erhöht werden und bei 100 beginnen, was der Kontextgruppe Bearbeitungstools entspricht. Deshalb wird die Kontextgruppe möglicherweise als erste oder zweite Kontextgruppe angezeigt, falls die Gruppe Bearbeitungstools vorhanden ist. Informationen zum Auffinden der Namen und Sequenznummern für andere Kontextgruppen finden Sie weiter unten in diesem Artikel im Abschnitt Tipps und Tricks zum Entwickeln eines benutzerdefinierten Menübands für die Serverkomponente in SharePoint 2010.

Mit dem Command-Attribut wird diese Gruppe einem Befehlsnamen zugeordnet. In bestimmten Fällen kann es sinnvoll sein, dass beim Auswählen dieser Registerkartengruppe Skript ausgeführt wird. In diesem Fall wird jedoch mit dem Befehl (der später implementiert wird) das Menüband angewiesen, wann die Kontextgruppe aktiviert werden soll. Wenn dieser Befehl nicht implementiert wird, würde beim Klicken des Benutzers auf ein beliebiges Objekt die benutzerdefinierte Gruppe im Menüband ausgeblendet.

Schritt 2.3: Hinzufügen einer Registerkarte zur Kontextregisterkartengruppe

Nachdem die Kontextregisterkartengruppe erstellt wurde, fügen Sie das folgende Markup hinzu, um eine neue Registerkarte hinzuzufügen und die maximale Größe für die Gruppenvorlage zu definieren.

<CommandUIDefinitions>
  <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
    <ContextualGroup Id="Ribbon.WebPartContextualTabGroup" ... >
      <Tab Id="Ribbon.PropertyChangerTab" 
           Title="Tools" Sequence="501">
        <Scaling Id="Ribbon.PropertyChangerTab.Scaling">
          <MaxSize Id="Ribbon.PropertyChangerTab.MaxSize"
             GroupId="Ribbon.PropertyChangerTab.PropertyGroup"
             Size="LargeLarge" />
          <MaxSize Id="Ribbon.PropertyChangerTab.MaxSize" ... />
        </Scaling>
      </Tab>
    </ContextualGroup>
  </CommandUIDefinition>
</CommandUIDefinitions>

In diesem Codeausschnitt sollten im Zusammenhang mit dem <MaxSize />-Element zwei Dinge beachtet werden. Der später definierten Gruppe (über das GroupId-Attribut) wird die Layoutoption LargeLarge (über das Size-Attribut) zugeordnet, die in der Vorlage definiert ist.

Schritt 2.4: Hinzufügen von Gruppen zur Registerkarte

Nun fügen Sie der neuen Registerkarte die Gruppen hinzu, indem Sie das folgende Markup hinzufügen.

<CommandUIDefinitions>
  <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
    <ContextualGroup Id="Ribbon.WebPartContextualTabGroup" ... >
      <Tab Id="Ribbon.PropertyChangerTab" ... >
        <Scaling Id="Ribbon.PropertyChangerTab.Scaling" ... >
        </Scaling>
        <Groups Id="Ribbon.PropertyChangerTab.Groups">
          <Group Id="Ribbon.PropertyChangerTab.PropertyGroup" ... >
            ...
          </Group>
          <Group Id="Ribbon.PropertyChangerTab.PostBackGroup"
                 Title="PostBack" Sequence="25"
                 Template="Ribbon.Templates.Flexible2">
          </Group>
        </Groups>
      </Tab>
    </ContextualGroup>
  </CommandUIDefinition>
</CommandUIDefinitions>

In diesem Beispiel sind zwar zwei Gruppen vorhanden, aber nur die zweite Gruppe wird in diesem Codeausschnitt angezeigt. Beachten Sie, dass die Gruppen Id-Attribute aufweisen, die den zuvor hinzugefügten <MaxSize GroupId="" />-Elementen entsprechen.

Beachten Sie außerdem, dass von den Gruppen die Vorlage Ribbon.Templates.Flexible2 verwendet wird. Diese Vorlage ist in der vorgefertigten Menübanddeklaration in der Datei CMDUI.xml enthalten. Beim Definieren von benutzerdefinierten Gruppen in Menübandanpassungsfeatures empfiehlt Microsoft den Entwicklern, eine eigene Gruppenvorlage zu erstellen, anstatt eine der vorgefertigten Gruppenvorlagen zu verwenden. Von SharePoint wird nämlich nicht das gesamte Menüband für jede Seitenanforderung geladen. Nur die für den aktuellen Kontext benötigten Menübandkomponenten werden geladen. Hierzu zählen auch die Gruppenvorlagen. Wenn sich Entwickler deshalb auf die integrierten Gruppenvorlagen verlassen, kann es sein, dass die Vorlage nicht für die aktuelle Seite geladen wird und die Menübandanpassungen nicht angezeigt werden.

Da diese Beispielanpassung Teil eines Webparts ist und ein Webpart auf einer Webparts-Seite vorhanden sein muss, wird davon ausgegangen, dass diese Vorlage geladen wird, da sie Teil der Registerkarte Seite ist, die auf jeder Webparts-Seite vorhanden ist.

Informationen zum Auffinden der Namen anderer Vorlagen finden Sie weiter unten in diesem Artikel im Abschnitt Tipps und Tricks zum Entwickeln eines benutzerdefinierten Menübands für die Serverkomponente in SharePoint 2010.

Schritt 2.5: Hinzufügen von Steuerelementen zur Gruppe

Im letzten Schritt für die Definition der visuellen Anpassung des Menübands werden den Gruppen Steuerelemente hinzugefügt. Fügen Sie der zweiten Gruppe das folgende Markup hinzu. (Informationen zum Hinzufügen von Schaltflächen zur ersten Gruppe finden Sie unter MSDN-Beispiel – Anpassen und Erweitern des Menübands für die Serverkomponente in SharePoint 2010.)

<CommandUIDefinitions>
  <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
    <ContextualGroup Id="Ribbon.WebPartContextualTabGroup" ... >
      <Tab Id="Ribbon.PropertyChangerTab" ... >
        <Scaling Id="Ribbon.PropertyChangerTab.Scaling" ... >
        </Scaling>
        <Groups Id="Ribbon.PropertyChangerTab.Groups">
          <Group Id="Ribbon.PropertyChangerTab.PropertyGroup" ... >
            ...
          </Group>
          <Group Id="Ribbon.PropertyChangerTab.PostBackGroup" ... >
            <Controls Id="Ribbon.PropertyChangerTab.PropertyGroup.Controls">
              <Button Id="Ribbon.PropertyChangerTab.PropertyGroup.GeneralDialogButton"
                      LabelText="Write to Web Part"
                      Command="WebPartContextualTabs.OnPostback"
                      TemplateAlias="o1"
                      Sequence="15"
                      Image16by16="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
                      Image32by32="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
            </Controls>
          </Group>
        </Groups>
      </Tab>
    </ContextualGroup>
  </CommandUIDefinition>
</CommandUIDefinitions>

Mit diesem Markup wird der Gruppe ein neues Schaltflächen-Steuerelement mit der Bezeichnung Write to Web Part hinzugefügt. Wenn auf diese Schaltfläche geklickt wird, wird Command="" ausgelöst. Mit dem TemplateAlias-Attribut wird das Menüband für die Serverkomponente angewiesen, an welcher Position in der definierten Gruppenvorlage die Schaltfläche positioniert werden soll. Schließlich werden die beiden Image-Attribute von den Layouts verwendet, um die Menübandsymbole in unterschiedlichen Status anzuzeigen. Diese Bilder können auf ein beliebiges Bild auf dem Server verweisen. In diesem Fall wird auf Bilder verwiesen, die dem Projekt hinzugefügt wurden.

Schritt 3: Erstellen von Befehlen im Menüband für die Serverkomponente

Im letzten Schritt werden die beiden Befehle definiert, auf die in den Menübandkomponenten verwiesen wurde. Fügen Sie dem Elementmanifest das folgende Markup hinzu.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WebPartContextualTabs" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        ...
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="WebPartContextualTab.OnEnableContextualTab"
          CommandAction=""
          EnabledScript="return true;" />
        <CommandUIHandler Command="WebPartContextualTabs.OnPostback"
          CommandAction="javascript:__doPostBack('RibbonizedWebPartPostback','');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>

Das erste <CommandUIHandler />-Attribut enthält einen Befehl, der den Kontextregisterkartengruppen zugeordnet ist. Wie bereits erwähnt, wird mit diesem Befehl lediglich dem Menüband für die Serverkomponente mitgeteilt, wann es aktiv sein sollte. Um zu verhindern, dass die Kontextregisterkartengruppe im Menüband ausgeblendet wird, gibt das EnabledScript-Attribut immer TRUE zurück. Wenn deshalb die Kontextregisterkartengruppe auf der Seite vorhanden ist – was der Fall ist, wenn das Webpart auf der Seite vorhanden ist, weil es für die Aktivierung zuständig ist –, wird sie nie ausgeblendet.

Das zweite <CommandUIHandler />-Attribut ist dem Schaltflächen-Steuerelement zugeordnet. Wenn darauf geklickt wird, wird ein Postback mit einem Ereignis namens RibbonizedWebPartPostBack ausgelöst. Durch den Rückruf des obigen Codes aus dem Webpart wird dieser Ereignisname überwacht und dem Webpart Text hinzugefügt, wenn es angezeigt wird.

Schritt 4: Bereitstellen und Testen

Nachdem Sie alle Änderungen gespeichert haben, stellen Sie das benutzerdefinierte Webpart bereit, indem Sie in Visual Studio 2010 F5drücken oder indem Sie im Menü Debug auf Debugging starten klicken.

Wenn die Startseite geladen wurde, werden Sie bemerken, dass die Kontextregisterkarte nicht vorhanden ist (siehe Abbildung 5).

Abbildung 5. Homepage der Debugwebsite ohne Kontextregisterkartengruppe

Aktivieren Sie nun für die Seite den Bearbeitungsmodus, indem Sie auf die Registerkarte Seite klicken und dann auf Bearbeiten klicken. Fügen Sie das Webpart an der Standardposition auf der Seite ein. Beachten Sie nach dem erneuten Laden der Seite, dass wie in Abbildung 6 dargestellt die Kontextregisterkarte und das Webpart angezeigt werden.

Abbildung 6. Kontextregisterkarte und Webpart sind sichtbar

Testen Sie das Postback, indem Sie die Registerkarte Tools in der benutzerdefinierten Kontextregisterkartengruppe auswählen und dann auf die entsprechende Schaltfläche klicken. Die Seite sollte aktualisiert werden und wie in Abbildung 7 dargestellt zusätzlichen Text im Webpart aufweisen.

Abbildung 7. Webpartantwort auf Menüband-Postback

Beachten Sie außerdem, dass die Kontextregisterkartengruppe als zweite Kontextregisterkartengruppe auf der Seite angezeigt wird. Dies ist darauf zurückzuführen, dass für die Seite noch der Bearbeitungsmodus aktiviert ist und als Sequenznummer 150 festgelegt wurde, was höher ist als die Sequenznummer der Bearbeitungstools. Wenn der Bearbeitungsmodus für die Seite deaktiviert wurde, sollte die benutzerdefinierte Kontextgruppe an der ersten Position angezeigt werden.

Exemplarische Vorgehensweise: Hinzufügen von Schaltflächen zur Registerkarte "Dokumente" und bedingtes Aktivieren der Schaltflächen

Das Beispiel für diese exemplarische Vorgehensweise veranschaulicht, wie Sie einem vorhandenen Menüband eine neue Gruppe mit Schaltflächen hinzufügen. Beim Bereitstellen des Projekts wird eine neue Gruppe in der Registerkarte Dokumente registriert, die Teil der Kontextregisterkartengruppe Bibliothekstools ist. Diese Kontextregisterkartengruppe wird nur angezeigt, wenn der Benutzer mit Dokumenten oder einer Dokumentbibliothek interagiert. In Abbildung 8 ist die Homepage einer Teamwebsite ohne das Menüband dargestellt. Wenn aber wie in Abbildung 9 dargestellt die Bibliothek Freigegebene Dokumente ausgewählt ist, wird die Kontextregisterkartengruppe mit den Anpassungen angezeigt.

Abbildung 8. Homepage der Teamwebsite ohne Auswahl einer Dokumentbibliothek

Abbildung 9. Homepage der Teamwebsite mit Auswahl einer Dokumentbibliothek

Zu Beginn sind zwei der drei Schaltflächen nicht aktiviert. Erst wenn Sie Dokumente auswählen, werden die zugehörigen Schaltflächen für die Befehle aktiviert (siehe Abbildung 10).

Abbildung 10. Menübandschaltflächen, die bei Auswahl eines Dokuments aktiviert werden

Mit den beiden letzteren Schaltflächen, Apply Prefix w/ CommandUI Handler und Apply Prefix w/ Page Component, werden identische Aktionen ausgeführt, wenn darauf geklickt wird. Wie bereits an den Namen ersichtlich ist, verwendet jedoch eine Schaltfläche die Befehlsbenutzeroberflächen-Handler und die andere Schaltfläche eine benutzerdefinierte Seitenkomponente. Durch das Klicken auf diese Schaltflächen wird eine Liste aller ausgewählten Dokumente auf der Seite erfasst und an ein neues Dialogfeld übergeben (siehe Abbildung 11). Mit diesem Dialogfeld kann der Benutzer dem Namen aller ausgewählten Dokumente ein Präfix hinzufügen.

Abbildung 11. Benutzerdefiniertes Dialogfeld durch Menübandanpassungen

Durch Klicken auf die Schaltfläche Set Prefix werden im Dialogfeld die Namen aller Dokumente aktualisiert. Das Dialogfeld wird anschließend geschlossen. Je nachdem, ob das Dialogfeld durch Klicken auf die Schaltfläche Set Prefix oder durch Klicken auf die Schaltfläche Cancel geschlossen wurde, wird eine Benachrichtigungsmeldung ausgestellt und anschließend das Listenansicht-Webpart auf der Seite aktualisiert, wobei der Listeninhalt aktualisiert wird.

Schritt 1: Erstellen der Komponentenanpassungen für das Menüband für die Serverkomponente

Der erste Schritt besteht im Erstellen eines neuen leeren SharePoint-Projekts mithilfe der SharePoint-Entwicklungstools in Microsoft Visual Studio 2010. Fügen Sie beim Erstellen des Projekts ein neues Projektelement Leeres Element für die Menübandanpassungen hinzu.

Schritt 1.1: Hinzufügen des zentralen Menüband-Markups zum Element

Fügen Sie im Elementmanifest das folgende Markup hinzu.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Ribbon.Documents.ApplyDocumentPrefix" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
          <Group Id="Ribbon.Documents.ApplyDocumentPrefix"
                 Title="Document Naming Tools"
                 Description="Document Naming Tools Description"
                 Sequence="25"
                 Template="Ribbon.Templates.MsdnTemplate">
          </Group>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers />
    </CommandUIExtension>
  </CustomAction>
</Elements>

Hiermit wird der Groups-Auflistung der Registerkarte Dokument eine neue Gruppe namens Document Naming Tools hinzugefügt, und zwar gemäß der Definition <CommandUIDefinition Location="Ribbon.Documents.Groups._children">. Die Sequenznummer der Gruppe lautet 25. Die Gruppen im integrierten Menüband für die Serverkomponente in SharePoint 2010 erhalten Sequenznummern, die jeweils um den Wert 10 schrittweise erhöht werden und bei 10 beginnen werden. Dies bedeutet, dass die hier definierte benutzerdefinierte Gruppe an der dritten Position angezeigt wird.

Darüber hinaus verwendet die Gruppe keine der vorhandenen Gruppenvorlagen, sondern eine benutzerdefinierte Gruppenvorlage.

Schritt 1.2: Hinzufügen einer benutzerdefinierten Gruppenvorlage

Fügen Sie das folgende Markup hinzu, um dem Menüband eine benutzerdefinierte Gruppe hinzuzufügen.

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
      <Group Id="Ribbon.Documents.ApplyDocumentPrefix" ... > 
        ...
      </Group>
    </CommandUIDefinition>
    <CommandUIDefinition Location="Ribbon.Templates._children">
      <GroupTemplate Id="Ribbon.Templates.MsdnTemplate">
        <Layout Title="MsdnHorizontal">
          <Section Type="OneRow">
            <Row>
              <ControlRef DisplayMode="Large" TemplateAlias="o1" />
              <ControlRef DisplayMode="Large" TemplateAlias="o2" />
              <ControlRef DisplayMode="Large" TemplateAlias="o3" />
            </Row>
          </Section>
        </Layout>
        <Layout Title="MsdnVertical">
          <Section Type="ThreeRow">
            <Row><ControlRef DisplayMode="Medium" TemplateAlias="o1" /></Row>
            <Row><ControlRef DisplayMode="Medium" TemplateAlias="o2" /></Row>
            <Row><ControlRef DisplayMode="Medium" TemplateAlias="o3" /></Row>
          </Section>
        </Layout>
       <Layout Title="MsdnVerticalTextOnly">
          <Section Type="ThreeRow">
            <Row><ControlRef DisplayMode="Menu" TemplateAlias="o1" /></Row>
            <Row><ControlRef DisplayMode="Menu" TemplateAlias="o2" /></Row>
            <Row><ControlRef DisplayMode="Menu" TemplateAlias="o3" /></Row>
          </Section>
        </Layout>
      </GroupTemplate>
    </CommandUIDefinition>
  <CommandUIDefinitions>
  <CommandUIHandlers />
</CommandUIExtension>

Diese Vorlage, Ribbon.Templates.MsdnTemplate, enthält drei verschiedene Layouts. Jedes <Layout /> weist ein Title-Attribut auf, auf das im <MaxSize />-Element oder <Scale />-Element verwiesen wird. Hiermit wird das Menüband angewiesen, welche Vorlage für das Layout verwendet werden soll. Jedes <Layout />-Element weist ein <Section />-Element auf, mit dem definiert wird, wie die Gruppe mithilfe des Type-Attributs gerendert wird. Zum Rendern der Gruppe sind vier verschiedene Optionen möglich, nämlich die Verwendung von einer Zeile, zwei Zeilen oder drei Zeilen oder einer Trennlinie. Weitere Informationen finden Sie unter Section-Element.

Das <Section />-Element enthält eines oder mehrere <Row />-Elemente, mit denen jede Zeile im Layout definiert wird. Diese <Row />-Elemente enthalten <ControlRef />-Elemente, die als Platzhalter für Steuerelemente dienen. Mit dem DisplayMode-Attribut wird das Menüband angewiesen, wie das Steuerelement gerendert werden soll: nur mit der Beschriftung, mit einem großen Symbol, mit einem kleinen Symbol oder mit einer der anderen Optionen, die im Schema des ControlRef-Elements definiert sind. Mit dem TemplateAlias-Attribut wird eine bestimmte Steuerelementposition festgelegt. Beim Hinzufügen von Steuerelementen zur Gruppe entspricht das TemplateAlias-Attribut jedes Steuerelements einem dieser TemplateAlias-Attribute, um die genaue Position des Steuerelements anzugeben.

Fügen Sie nun das folgende Markup hinzu, um das Menüband anzuweisen, wie die Gruppe mithilfe eines der Layouts in der definierten Vorlage gerendert werden soll.

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
      <Group Id="Ribbon.Documents.ApplyDocumentPrefix" ... >
        ...
      </Group>
    </CommandUIDefinition>
    <CommandUIDefinition Location="Ribbon.Documents.Scaling._children">
      <MaxSize Id="Ribbon.Documents.Scaling.ApplyDocumentPrefix.MaxSize"
               GroupId="Ribbon.Documents.ApplyDocumentPrefix"
               Size="MsdnVertical"
               Sequence="15" />
    </CommandUIDefinition>
    <CommandUIDefinition Location="Ribbon.Templates._children">
      <GroupTemplate Id="Ribbon.Templates.MsdnTemplate">
        ...
      </GroupTemplate>
    </CommandUIDefinition>
  </CommandUIDefinitions>
  <CommandUIHandlers />
</CommandUIExtension>

Die Abbildungen 12, 13 und 14 zeigen wie lediglich durch die Festlegung anderer Layoutoptionen für das <MaxSize Size="" />-Attribut das Rendering der Gruppe beeinflusst werden kann.

Abbildung 12. Verwenden des MsdnHorizontal-Layouts

Abbildung 13. Verwenden des MsdnVertical-Layouts

Abbildung 14. Verwenden des MsdnVerticalTextOnly-Layouts

Schritt 1.3: Hinzufügen von Steuerelementen zur Menübandgruppe

Im nächsten Schritt fügen Sie der Elementmanifestdatei das folgende Markup hinzu, um der Gruppe ein paar Schaltflächen hinzuzufügen.

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
      <Group Id="Ribbon.Documents.ApplyDocumentPrefix" ... > 
        <Controls Id="Ribbon.Documents.ApplyDocumentPrefix.Controls">
          <Button Id="Ribbon.Documents.ApplyDocumentPrefix.CustomHelpButton"
                  LabelText="Apply Document Prefix Help"
                  TemplateAlias="o1"
                  Sequence="15"
                  Image16by16="/_layouts/Images/ApplyDocumentPrefixRibbon/16x16Placeholder.png"
                  Image32by32="/_layouts/Images/ApplyDocumentPrefixRibbon/32x32Placeholder.png"
                  Command="ApplyDocumentPrefix.OnGetHelpApplyDocPrefix" />
          <Button Id="Ribbon.Documents.ApplyDocumentPrefix.CustomApplyPrefixButton"
                  LabelText="Apply Prefix w/ CommandUI Handler"
                  TemplateAlias="o2"
                  Sequence="17"
                  Image16by16="/_layouts/Images/ApplyDocumentPrefixRibbon/16x16Placeholder.png"
                  Image32by32="/_layouts/Images/ApplyDocumentPrefixRibbon/32x32Placeholder.png"
                  Command="ApplyDocumentPrefix.OnApplyDocPrefixUIHandler" />
          <Button Id="Ribbon.Documents.ApplyDocumentPrefix.CustomPageComponentButton"
                  LabelText="Apply Prefix w/ Page Component"
                  TemplateAlias="o3"
                  Sequence="19"
                  Image16by16="/_layouts/Images/ApplyDocumentPrefixRibbon/16x16Placeholder.png"
                  Image32by32="/_layouts/Images/ApplyDocumentPrefixRibbon/32x32Placeholder.png"
                  Command="ApplyDocumentPrefix.OnApplyDocPrefixPageComponent" />
        </Controls>
      </Group>
    </CommandUIDefinition>
  </CommandUIDefinitions>
  <CommandUIHandlers />
</CommandUIExtension>

Beachten Sie, dass jede Schaltfläche mit einem eigenen Befehl verknüpft ist. Nachdem die visuelle Anpassung des Menübands abgeschlossen ist, werden im nächsten Schritt die Befehle für den Fall erstellt, dass die Schaltflächen verfügbar sind, und für den Fall, dass auf sie geklickt wird. Hierfür werden Befehlsbenutzeroberflächen-Handler oder Seitenkomponenten verwendet. Dies wird in den nächsten beiden Schritten veranschaulicht.

Schritt 2: Erstellen von Befehlsbenutzeroberflächen-Handler im Menüband für die Serverkomponente

Befehlsbenutzeroberflächen-Handler werden in derselben Elementmanifestdatei definiert, in der die visuellen Anpassungen für das Menüband enthalten sind. Fügen Sie das folgende Markup hinzu, um den ersten Befehlsbenutzeroberflächen-Handler zu erstellen.

<CommandUIHandlers>
  <CommandUIHandler Command="ApplyDocumentPrefix.OnGetHelpApplyDocPrefix"
      CommandAction="javascript:
        var dialogOptions = {
          url: '/_layouts/ApplyDocumentPrefixRibbon/DocPrefixHelp.aspx',
          title: 'Apply Document Prefix Help',
          allowMaximize: true,
          showClose: true,
          width:500,
          height:400
        };
        SP.UI.ModalDialog.showModalDialog(dialogOptions); " />
</CommandUIHandlers>

Dieser Befehl ist mithilfe des Command-Attributs mit der ersten Schaltfläche verknüpft. Mit dem CommandAction-Attribut wird JavaScript ausgeführt, mit dem ein Dialogfeld mithilfe des SharePoint 2010-Dialogfeldframeworks geöffnet wird, das auf eine benutzerdefinierte Anwendungsseite verweist, die später erstellt wird.

Fügen Sie einen weiteren Befehlsbenutzeroberflächen-Handler hinzu, der der zweiten Schaltfläche zugeordnet ist. Anhand des folgenden Markups ist erkennbar, dass damit wesentlich mehr Aktionen ausgeführt werden.

<CommandUIHandlers>
  <CommandUIHandler Command="ApplyDocumentPrefix.OnGetHelpApplyDocPrefix" ... />
  <CommandUIHandler Command="ApplyDocumentPrefix.OnApplyDocPrefixUIHandler"
      CommandAction="javascript:
        function dialogCallback(dialogResult, returnValue){
          SP.UI.Notify.addNotification(returnValue);
          SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
        }
      
        var selectedItems = SP.ListOperation.Selection.getSelectedItems();
        var selectedItemIds = '';
        var selectedItemIndex;
        for (selectedItemIndex in selectedItems){
          selectedItemIds += '|' + selectedItems[selectedItemIndex].id;
        }
       
        var dialogOptions = {
          url: '/_layouts/ApplyDocumentPrefixRibbon/DocPrefixPrompt.aspx?selectedItems='
          +selectedItemIds +'&amp;ListId=' +SP.ListOperation.Selection.getSelectedList(),
          title: 'Set Document Prefix',
          allowMaximize: false,
          showClose: false,
          width:500,
          height:400,
          dialogReturnValueCallback: dialogCallback
        };
        
        SP.UI.ModalDialog.showModalDialog(dialogOptions);"
      EnabledScript="javascript:
        function checkIsEnabled(){
          // Check items selected.
          var selectedItems = SP.ListOperation.Selection.getSelectedItems();
          var count = CountDictionary(selectedItems);
          return (count > 0);
        }; 
                      
        checkIsEnabled();"
    />
</CommandUIHandlers>

Dieser Code ist ein bisschen komplizierter. Zunächst wird eine neue JavaScript-Funktion erstellt, die beim Schließen des Dialogfelds als Rückruf verwendet wird. Im Browser wird eine Benachrichtigung angezeigt, nämlich die kleine gelbe Mitteilung, die von der rechten Seite aus über die Seite läuft, und anschließend wird das Listenansicht-Webpart auf der Seite aktualisiert.

Danach wird eine durch Trennzeichen getrennte Liste der Dokumente erstellt, die auf der aktuellen Seite ausgewählt sind. Schließlich wird ein neues Dialogfeld erstellt, mit dem eine neue Anwendungsseite geöffnet wird, und die ausgewählten Elemente werden eingefügt. Beim Schließen des Dialogfelds wird die zuvor definierte dialogCallback-Methode aufgerufen.

Eine weitere wichtige Rolle spielt hierbei das EnabledScript-Attribut. Dieses Attribut gibt einen booleschen Wert zurück, nämlich TRUE, falls der Befehl verfügbar ist, oder FALSE, falls er nicht verfügbar ist. Zu diesem Zweck wird überprüft, ob auf der Seite Elemente ausgewählt wurden. Wenn dies nicht der Fall ist, wird der Befehl, und damit diese Schaltfläche, deaktiviert.

Schritt 3: Erstellen der Seitenkomponente im Menüband für die Serverkomponente

Mit einer Schaltfläche im Menüband, die einen in einem Befehlsbenutzeroberflächen-Handler definierten Befehl verwendet, muss nun eine Seitenkomponente für den anderen Befehl erstellt werden. Dazu wird dem Visual Studio-Projekt eine neue JavaScript-Datei hinzugefügt, idealerweise in einem Ordner, der dem Verzeichnis {SharePoint Root}/TEMPLATE/LAYOUT/{ProjectName} zugeordnet ist. Dadurch wird sichergestellt, dass nur eine Instanz der Bibliothek auf dem Front-End-Webserver vorhanden ist, die von allen Websites verwendet wird.

Schritt 3.1: Deklarieren des Seitenkomponentenobjekts

Nachdem die Datei dem Projekt hinzugefügt wurde, fügen Sie der Bibliothek das folgende Skript hinzu, um das JavaScript-Objekt, das in dieser Bibliothek enthalten sein wird, und ein paar Konstruktor- und Initialisierungsmethoden zu deklarieren, mit denen eine Instanz der Seitenkomponente erstellt und dem clientseitigen Menüband-Manager hinzugefügt wird. Dies wird im folgenden Markup demonstriert.

// Register the page component object.
Type.registerNamespace('ApplyDocumentPrefix');

// Helper methods to set up and initialize the page component.
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent = function ApplyDocumentPrefix_PageComponent() {
  ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initializeBase(this);
}

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initialize = function () {
  ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, 
  ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initializePageComponent), 'SP.Ribbon.js');
}

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initializePageComponent = function () {
  var ribbonPageManager = SP.Ribbon.PageManager.get_instance();
  if (ribbonPageManager !== null) {
    ribbonPageManager.addPageComponent(ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.instance);
  }
}

Schritt 3.2: Erstellen des Seitenkomponenten-Objektprototyps und der init-Methode

Fügen Sie nun das folgende Skript für den Objektprototyp und die zentrale init-Methode hinzu. Wie der Name schon besagt, wird mit dieser Methode das Objekt initialisiert, indem ein paar Arrays erstellt werden, mit denen Befehle aufgelistet und bestimmten Funktionen innerhalb des Objekts zugeordnet werden.

// Page component object.
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {

  init: function ApplyDocumentPrefix_PageComponento$init() {
    // Array of commands that can be handled that are associated with handler methods.
    this.handledCommands = new Object;
    this.handledCommands['ApplyDocumentPrefix.OnApplyDocPrefixPageComponent'] = 
    this.onApplyDocPrefixPageComponent;

    // Array of commands that can be handled that are associated with canHandler methods.
    this.canHandledCommands = new Object;
    this.canHandledCommands['ApplyDocumentPrefix.OnApplyDocPrefixPageComponent'] = 
    this.onApplyDocPrefixPageComponent_canExecute;

    // Array of commands.
    this.commandList = ['ApplyDocumentPrefix.OnApplyDocPrefixPageComponent'];
  },
  getId: function ApplyDocumentPrefixPageComponent_PageComponent$getId() {
    return "ApplyDocumentPrefixPageComponent";
  },  ...
}

Beachten Sie, dass der Name der Befehle in den Arrays mit dem Wert des <Button Command="" />-Attributs übereinstimmt, das zuvor beim Definieren der visuellen Komponenten der Menübandanpassung hinzugefügt wurde.

Schritt 3.3: Hinzufügen von Methoden zum Anweisen des Menüband-Managers, welche Befehle von dieser Seitenkomponente verarbeitet werden sowie wie und wann Befehle verarbeitet werden

Im nächsten Schritt fügen Sie wie im folgenden Code veranschaulicht vier Methoden hinzu, die den clientseitigen Menüband-Manager anweisen, welche Befehle verfügbar sind sowie wie und wann diese Befehle verarbeitet werden.

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {
  ...
  getFocusedCommands: function ApplyDocumentPrefixPageComponent_PageComponent$getFocusedCommands() {
    return [];
  },

  getGlobalCommands: function ApplyDocumentPrefixPageComponent_PageComponent$getGlobalCommands() {
    return this.commandList;
  },

  canHandleCommand: function 
  ApplyDocumentPrefixPageComponent_PageComponent$canHandleCommand(commandID) {
    var canHandle = this.handledCommands[commandID];
    if (canHandle)
      return this.canHandledCommands[commandID]();
    else
      return false;
  },

  handleCommand: function 
  ApplyDocumentPrefixPageComponent_PageComponent$handleCommand(commandID, 
  properties, sequence) {
    return this.handledCommands[commandID](commandID, properties, sequence);
  },
  ...
}

Die canHandleCommand-Methode dient demselben Zweck wie das EnabledScript-Attribut des Befehlsbenutzeroberflächen-Handlers, indem dem Menüband-Manager mitgeteilt wird, ob der Befehl verfügbar ist. Im vorherigen Codeausschnitt verwendet diese Methode das im Initialisierer des Objekts erstellte Array zum Aufrufen einer bestimmten Methode im Objekt. Die handleCommand-Methode ist ähnlich, da sie demselben Zweck dient wie das CommandAction-Attribut des Befehlsbenutzeroberflächen-Handlers. Sie verwendet ebenfalls ein Array, um für den angegebenen Befehl auf eine andere Methode zu verweisen.

Schritt 3.4: Hinzufügen der spezifischen Befehlsmethoden

Im nächsten Schritt werden die Methoden hinzugefügt, die im Initialisierer des Objekts definiert wurden und die aufgerufen werden, um zu bestimmen, wann der Befehl verfügbar ist (onApplyDocPrefixPageComponent_canExecute) und was beim Ausführen des Befehls passiert (onApplyDocPrefixPageComponent).

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {
  ...
  onApplyDocPrefixPageComponent: function () {
    var selectedItems = SP.ListOperation.Selection.getSelectedItems();
    var selectedItemIds = '';
    var selectedItemIndex;
    for (selectedItemIndex in selectedItems) {
      selectedItemIds += '|' + selectedItems[selectedItemIndex].id;
    }

    var dialogOptions = {
      url: '/_layouts/ApplyDocumentPrefixRibbon/DocPrefixPrompt.aspx?selectedItems=' + 
      selectedItemIds + '&ListId=' + SP.ListOperation.Selection.getSelectedList(),
      title: 'Set Document Prefix',
      allowMaximize: false,
      showClose: false,
      width: 500,
      height: 400,
      dialogReturnValueCallback: PageComponentCallback
    };

    SP.UI.ModalDialog.showModalDialog(dialogOptions);
  },

  onApplyDocPrefixPageComponent_canExecute: function () {
    var selectedItems = SP.ListOperation.Selection.getSelectedItems();
    var count = CountDictionary(selectedItems);
    return (count > 0);
  }
  ...
}
function PageComponentCallback(dialogResult, returnValue) {
  SP.UI.Notify.addNotification(returnValue);
  SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}

Schritt 3.5: Hinzufügen der abschließenden Objektregistrierung, der Initialisierung und des Benachrichtigungsskripts

Nach Abschluss des Seitenkomponentenobjekts bestehen die letzten Schritte darin, das Objekt auf der Seite zu registrieren, es zu erstellen sowie das clientseitige Menüband anzuweisen, dass alle Elemente, die auf das Abschließen des Ladevorgangs für dieses Skript gewartet haben, geladen und initialisiert wurden. Dies wird im folgenden Code demonstriert.

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {
  ...
}
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.registerClass
('ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent', 
CUI.Page.PageComponent);
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.instance = 
new ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent();
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initialize();
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("ApplyDocumentPrefix.UI.js");

Damit wurde die Seitenkomponente erstellt und kann nun der Seite hinzugefügt werden.

Schritt 4: Erstellen des Seitenkomponenten-Lademoduls im Menüband für die Serverkomponente

Im nächsten Schritt muss die Seitenkomponente zur Seite hinzugefügt werden. In diesem Beispiel wird dazu ein benutzerdefiniertes Serversteuerelement verwendet. Fügen Sie dem Projekt ein neues Empty Element-SharePoint-Projektelement hinzu. Verwenden Sie das <Control />-Element, um mit dem folgenden Markup ein neues Stellvertretungs-Steuerelement zu registrieren.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <Control Id="AdditionalPageHead"
           ControlClass="MSDN.SharePoint.Samples.ApplyDocumentPrefix.PageComponentScriptLoader"
           ControlAssembly="$SharePoint.Project.AssemblyFullName$" />
</Elements>

Hiermit wird das PageComponentScriptLoader-Serversteuerelement dem AdditionalPageHead-Inhaltsplatzhalter auf allen Seiten in der aktuellen Website (bzw. in Abhängigkeit vom Gültigkeitsbereich des Features) hinzugefügt. Fügen Sie nun dem SharePoint-Projektelement eine neue Codedatei hinzu, und fügen Sie den folgenden Code zum Implementieren des Serversteuerelements hinzu.

public class PageComponentScriptLoader : WebControl {
  protected override void OnPreRender(EventArgs e) {
    SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);

    // Ensure ribbon exists and current list is a document library 
    // (otherwise, no need for extra ecmascript load).
    if (ribbon != null && SPContext.Current.List is SPDocumentLibrary) {
      // Load dependencies if not already on the page.
      ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Ribbon.js", false, true);

      // Load page component.
.      ScriptLink.RegisterScriptAfterUI(this.Page, "ApplyDocumentPrefixRibbon/ApplyDocumentPrefix.UI.js", false, true);
    }

    base.OnPreRender(e);
  }
}

Hiermit wird zunächst ein Verweis auf das Menüband für die Serverkomponente abgerufen. Wenn der Benutzer eine Dokumentbibliothek verwendet, wird zuerst überprüft, ob abhängige Skripts auf der Seite vorhanden sind. Anschließend wird die Seitenkomponente registriert.

Im letzten Schritt wird der Datei web.config der Website ein <SafeControl />-Eintrag hinzugefügt. Mit einem SharePoint-Projektelement Leeres Element wird nicht automatisch ein <SafeControl />-Eintrag hinzugefügt, aber es besteht damit generell die Möglichkeit. Wählen Sie im Projektmappen-Explorerin Visual Studio 2010Leeres Element aus. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche […] (siehe Abbildung 15).

Abbildung 15. Manuelles Hinzufügen eines Eintrags für sicheres Steuerelement mit den SharePoint-Entwicklungstools in Visual Studio 2010

Fügen Sie im Dialogfeld Einträge für sicheres Steuerelement einen neuen Eintrag hinzu, und überprüfen Sie dann, ob der Namespace mit dem Namespace des zuvor erstellten Serversteuerelements übereinstimmt.

Abbildung 16. Dialogfeld "Einträge für sicheres Steuerelement"

Schritt 5: Erstellen des benutzerdefinierten Dialogfelds

Im letzten Schritt wird das Dialogfeld erstellt, das von den benutzerdefinierten Menübandbefehlen aufgerufen wird und mit dem der Großteil der Aktionen ausgeführt wird. Fügen Sie dem Visual Studio-Projekt ein neues SharePoint-Projektelement Anwendungsseite hinzu.

Schritt 5.1: Implementieren des visuellen Teils des Dialogfelds (ASPX)

In diesem Fall werden für das Dialogfeld einige Benutzersteuerelemente des SharePoint-Administrationsformulars verwendet, weshalb wie im folgenden Code gezeigt einige Verweise erforderlich sind.

<%@ Register TagPrefix="wssuc" TagName="InputFormSection" 
Src="~/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" 
src="~/_controltemplates/InputFormControl.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ButtonSection" 
Src="~/_controltemplates/ButtonSection.ascx" %>

Fügen Sie im PlaceHolderMain-Inhaltsplatzhalter das folgende Markup hinzu, um ein Formular mit einem DataList-ASP.NET-Steuerelement zu erstellen, in dem eine Liste aller ausgewählten Dokumente angezeigt wird.

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td>
        <wssuc:InputFormSection runat="server" 
                                Title="Selected Documents" 
                                Description="The following documents have been selected 
                                to have the specified prefix added to their titles.">
          <Template_InputFormControls>
                        <tr>
                          <td>
                            <asp:DataList ID="SelectedDocumentsDataList" runat="server"
                            RepeatColumns="2" CellPadding="2" CellSpacing="5">
                  <ItemTemplate><li><%# DataBinder.Eval(Container.DataItem, 
                  "File.Name").ToString()%></li></ItemTemplate>
                </asp:DataList>
                          </td>
                        </tr>
                  </Template_InputFormControls>
        </wssuc:InputFormSection>

        <wssuc:InputFormSection runat="server" 
                                Title="Document Prefix" 
                                Description="Prefix to add to the selected document 
                                titles.">
          <Template_InputFormControls>
            <wssuc:InputFormControl LabelText="Prefix to add to the selected documents:"
            runat="server">
              <Template_control>
                <asp:TextBox ID="DocumentPrefixTextBox" runat="server" />
              </Template_control>
            </wssuc:InputFormControl>
                  </Template_InputFormControls>
        </wssuc:InputFormSection>

        <wssuc:ButtonSection runat="server" ShowStandardCancelButton="FALSE" 
        TopButtons="TRUE">
          <Template_Buttons>
            <asp:Button ID="SetPrefixButton" class="ms-ButtonHeightWidth" runat="server" 
            Text="Set Prefix" OnClick="OnClickSetPrefixButton" />
            <asp:Button ID="CancelButton" class="ms-ButtonHeightWidth" runat="server" 
            Text="Cancel" OnClientClick=
            "SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,
            'Assignment of prefix cancelled.'); return false;" />
          </Template_Buttons>
        </wssuc:ButtonSection>
      </td>
    </tr>
  </table>

</asp:Content>

Schritt 5.2: Implementieren der Geschäftslogik im CodeBehind (ASPX.CS)

Der CodeBehind für diese Anwendungsseite ist einfach. Damit müssen die folgenden Aufgaben ausgeführt werden:

• Abrufen einer Liste aller ausgewählten Dokumente, die mit QueryString übergeben werden.

• Abrufen eines Verweises auf die Liste mit den Dokumenten, die über QueryString übergeben werden.

• Anzeigen der ausgewählten Elemente durch Binden der Auflistung ausgewählter Dokumente an das DataList-ASP.NET-Steuerelement.

• Beim Klicken Aktualisieren der Dateinamen aller ausgewählten Elemente.

• Nach Abschluss Schreiben von JavaScript in den PlaceHolderAdditionalPageHead-Inhaltsplatzhalter, mit dem das Dialogfeld geschlossen wird, und Zurücksenden des Ergebnisses an die aufrufende Seite.

Fügen Sie der CodeBehind-Datei der Anwendungsseite den folgenden Code hinzu.

public partial class DocPrefixPrompt : LayoutsPageBase {
  List<SPListItem> _selectedListItems = new List<SPListItem>();

  protected override void OnLoad(EventArgs e) {
    // Get all the selected documents.
    SPList selectedDocumentLibrary = 
        SPContext.Current.Web.Lists[new Guid(
                  Request.QueryString["ListId"]
        )];
    string[] selectedItems = 
      Request.QueryString["selectedItems"].ToString().Split('|');

    for (int index = 1; index < selectedItems.Length; index++) {
      _selectedListItems.Add(
        selectedDocumentLibrary.GetItemById(
          int.Parse(selectedItems[index]))
      );
    }

    // Bind to the repeater.
    SelectedDocumentsDataList.DataSource = _selectedListItems;
    SelectedDocumentsDataList.DataBind();
  }

  protected void OnClickSetPrefixButton(object sender, EventArgs e) {
    foreach (SPListItem listItem in _selectedListItems) {
      listItem["Name"] = 
        DocumentPrefixTextBox.Text + " " + listItem.File.Name;
      listItem.Update();
    }

    CloseDialogOnSuccess();
  }
  private void CloseDialogOnSuccess() {
    ContentPlaceHolder pageHead = this.Master.FindControl("PlaceHolderAdditionalPageHead") as ContentPlaceHolder;
    if (pageHead != null)
      pageHead.Controls.Add(
        new LiteralControl("
<script language='javascript'>
ExecuteOrDelayUntilScriptLoaded(closeDialog,'sp.js');
function closeDialog(){
  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Prefix assigned to selected documents.');
}
</script>"));
  }
}

Schritt 6: Bereitstellen und Testen des benutzerdefinierten Webparts

Nachdem Sie alle Änderungen gespeichert haben, stellen Sie das benutzerdefinierte Webpart bereit, indem Sie in Visual Studio 2010 F5drücken oder indem Sie im Menü Debug auf Debugging starten klicken.

Wenn die Startseite der Teamwebsite geöffnet wird, klicken Sie auf die Bibliothek Freigegebene Dokumente. Durch Auswählen der Registerkarte Dokumente auf dem Menüband sollten die Menübandanpassungen sichtbar werden (siehe weiter oben in Abbildung 9). Nachdem ein Dokument ausgewählt wurde, werden alle Schaltflächen in der benutzerdefinierten Gruppe aktiviert (siehe weiter oben in Abbildung 10). Durch Klicken auf eine der beiden Schaltflächen Apply Prefix […] wird das weiter oben in Abbildung 11 dargestellte Dialogfeld ausgelöst.

Wenn der Benutzer auf die Schaltfläche Set Prefix klickt, werden im Dialogfeld die ausgewählten Dateinamen aktualisiert. Das Dialogfeld wird anschließend geschlossen. Mit dem Befehl wird dann eine Benachrichtigungsmeldung ausgestellt, dass die Änderungen übernommen wurden, und anschließend wird das Listenansicht-Webpart aktualisiert.

Tipps und Tricks zum Entwickeln eines benutzerdefinierten Menübands für die Serverkomponente in SharePoint 2010

Wenn Entwickler das Menüband für die Serverkomponente in SharePoint 2010 anpassen, können sie zahlreiche Änderungen vornehmen. Verschiedene Steuerelemente können verwendet werden, Vorlagen können wiederverwendet werden, und Gruppen und Registerkarten können geändert oder hinzugefügt werden. Zum Glück wird der Großteil des Menübands deklarativ erstellt oder befindet sich, wie dies bei Seitenkomponenten der Fall ist, in Skriptdateien, die im Vergleich zu kompiliertem Code leicht lesbar sind. Dies bedeutet, dass Entwicklern nach der Installation von SharePoint ein großer Vorrat an Codebeispielen zur Verfügung steht!

Man muss jedoch wissen, wo man nach diesen Beispielen suchen soll und wie man sie findet. Das grundlegende Menüband für die Serverkomponente und alle Menübanddeklarationen befinden sich in der Datei {SharePoint Root}\TEMPLATE\GLOBAL\XML\CMDUI.XML in der globalen Websitedefinition. Zusätzliche Änderungen beispielsweise durch SharePoint Server 2010 Enterprise Content Management befinden sich in der Regel in verschiedenen Features. Wenn Sie einfach in allen XML-Dateien nach dem <CommandUIExtension>-Element suchen, wird eine Liste aller Features angezeigt, die Menübanderweiterungen enthalten.

Die folgenden Abschnitte helfen Entwicklern bei einigen gängigen Szenarien im Zusammenhang mit dem Anpassen des Menübands.

Suchen der Namen von Registerkarten, Gruppen und Steuerelementen sowie Suchen von Sequenzen

Eine häufige Aufgabe ist das Erstellen neuer Registerkarten, das Hinzufügen von Gruppen zu Registerkarten oder das Ändern vorhandener Steuerelemente. Der erste Schritt besteht im Suchen der ID oder des Namens der Registerkarte. Das SharePoint 2010 SDK enthält eine Liste aller Registerkarten und deren Speicherorte. Weitere Informationen finden Sie unter Anpassen von Standardobjekten im Menüband der Serverkomponente. Die Namen von Registerkarten sind aussagekräftig genug, sodass offensichtlich sein sollte, welcher Name zu welcher Registerkarte gehört. Diese Seite enthält außerdem eine Liste mit den Namen aller Gruppen und Steuerelemente in diesen Gruppen. Es fehlen lediglich die Sequenz und der Vorlagenalias.

Für die Suche nach der Sequenz und dem Vorlagenalias öffnen Sie die Datei CMDUI.xml, und suchen Sie nach der entsprechenden Registerkarte, Gruppe oder Steuerelement-ID, die im SDK aufgelistet ist. Dadurch gelangen Sie zu entsprechenden Einträgen, mit denen alle Fragen zum Steuerelement beantwortet werden sollten.

Sichere Seitenanforderung durch Löschen des Browsercaches

Beim Anpassen des Menübands werden Entwickler zweifellos JavaScript schreiben und auf Bilder verweisen. Der Umfang an JavaScript und Bildern sowie Menübandanpassungen hängt von der Komplexität der Anwendung ab.

Ein Schwerpunkt von Microsoft bei der Umgestaltung der Benutzeroberfläche von SharePoint 2010 und der Entwicklung des Menübands bestand darin, den Seitenumfang bzw. die Gesamtgröße aller auf einer Seite erforderlichen Elemente soweit wie möglich zu begrenzen. Deshalb werden CSS-Dateien und JavaScript-Bibliotheken im Browser von SharePoint aggressiv zwischengespeichert. Dadurch wiederum werden für die Benutzer Seiten wesentlich schneller geladen, da in nachfolgenden Anforderungen weniger Dateien angefordert werden.

Dies stellt einen großen Vorteil für die Benutzer dar, kann aber auch Probleme für Entwickler verursachen. Änderungen, die zwischen Debuggingsitzungen vorgenommen wurden, werden möglicherweise nicht angezeigt, da vom Browser nicht das aktuellste Skript oder die aktuellsten Anpassungen heruntergeladen werden. Es empfiehlt sich deshalb, nach dem Bereitstellen einer Lösung und während Sie darauf warten, dass sie geladen wird, die Internet Explorer-Entwicklersymbolleiste zu verwenden.

Abbildung 17. Löschen des IE-Caches und Erzwingen von Downloads für alle Dateien

Die Internet Explorer-Entwicklersymbolleiste ermöglicht auch das Analysieren von Skriptdateien. Um zu überprüfen, ob der Browser die neueste Version von benutzerdefinierten Skriptdateien heruntergeladen hat, verwenden Sie die Registerkarte Skript und wählen die Skriptdatei aus, die von der Seite heruntergeladen wurde. Falls die externe Skriptdatei nicht aufgelistet wird, wurde sie nicht der Seite hinzugefügt. In Abbildung 18 ist dargestellt, wie Sie die externe Skriptbibliothek für eine Seitenkomponente aus einem vorherigen Beispiel auswählen und deren Inhalt anzeigen.

Abbildung 18. Debuggen von Skripts mit der IE-Entwicklersymbolleiste

Schlussfolgerung

In diesem Artikel werden die zentralen Komponenten erläutert, aus denen das Menüband für die Serverkomponente in Microsoft SharePoint 2010 besteht. Anschließend werden zwei Beispiele für Menübandänderungen unter Verwendung unterschiedlicher Anpassungstechniken erläutert. Dieser Artikel enthält auch Anleitungen für die Verwendung der verschiedenen Implementierungsoptionen für Befehle, nämlich entweder die Befehlsbenutzeroberflächen-Handler oder Seitenkomponenten. Darüber hinaus gibt es Tipps und Tricks zum Entwickeln eines benutzerdefinierten Menübands.

Weitere Ressourcen

Weitere Informationen finden Sie in den folgenden Ressourcen:

• MSDN-Beispiel – Anpassen und Erweitern des Menübands für die Serverkomponente in SharePoint 2010

• Microsoft SharePoint 2010 SDK

• Servermenüband in SharePoint Foundation

• Baustein: Servermenüband

• Schema des Menübands für die Serverkomponente

• SharePoint Developer Center