Arbeiten mit der Benutzeroberfläche des SharePoint 2010-Menübands

Artikel
09/24/2014

SharePoint-Schnellstartbanner

Erste Schritte mit der Webentwicklung in SharePoint 2010: Informationen zum Ändern des neuen Menübands in SharePoint 2010.

Letzte Änderung: Mittwoch, 12. Januar 2011

Gilt für: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

Inhalt dieses Artikels
Erstellen eines leeren SharePoint 2010-Projekts
Hinzufügen des Schaltflächencodes zum Projekt
Bereitstellen und Testen der Projektmappe
Entfernen der Schaltfläche
Nächste Schritte

In dieser Übung erweitern Sie das Menüband in Microsoft SharePoint 2010 durch Hinzufügen einer benutzerdefinierten Schaltfläche, mit der serverseitiger Code ausgeführt wird. Mithilfe dieser Vorgehensweise können Sie Schaltflächen, Gruppen, Registerkarten oder sogar das gesamte Menüband hinzufügen oder ersetzen. Darüber hinaus entfernen Sie im Menüband die benutzerdefinierte Schaltfläche. Für diese Aufgabe müssen Sie die folgenden Schritte ausführen:

Erstellen eines leeren SharePoint 2010-Projekts
Hinzufügen des Schaltflächencodes zum Projekt
Bereitstellen und Testen der Projektmappe
Entfernen der Schaltfläche

Erstellen eines leeren SharePoint 2010-Projekts

Für diese Aufgabe erstellen Sie ein leeres SharePoint 2010-Projekt in Microsoft Visual Studio 2010.

So erstellen Sie das SharePoint-Projekt

Klicken Sie zum Starten von Visual Studio 2010 im Startmenü auf Alle Programme, klicken Sie auf Microsoft Visual Studio 2010, und klicken Sie dann auf Microsoft Visual Studio 2010.
Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.
Klicken Sie im Dialogfeld Neues Projekt im Abschnitt Installierte Vorlagen auf Visual C#, klicken Sie auf SharePoint, und klicken Sie dann auf 2010.
Klicken Sie in den Projektelementen auf Leeres SharePoint-Projekt.
Geben Sie im Feld Name die Bezeichnung RibbonDemo ein, und klicken Sie dann auf OK.
Geben Sie im Assistenten zum Anpassen von SharePoint die lokale Website ein, die Sie für diese Übung verwenden möchten (z. B. https://localhost/SampleWebSite).
Wählen Sie Als Farmlösung bereitstellen für die Vertrauensebene aus, und klicken Sie dann auf Fertig stellen.

Hinzufügen des Schaltflächencodes zum Projekt

Für diese Aufgabe fügen Sie den XML-Code zum Erstellen der Schaltfläche und den ECMAScript (JavaScript, JScript)-Code für die Funktionalität hinzu.

So fügen Sie dem Projekt XML-Code hinzu

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten RibbonDemo, zeigen Sie auf Hinzufügen und klicken Sie dann auf Neues Element.
Klicken Sie im Dialogfeld Neues Element hinzufügen im Abschnitt Installierte Vorlagen auf Visual C#, klicken Sie auf SharePoint, klicken Sie auf 2010, und klicken Sie dann auf den Elementtyp Leeres Element.
Übernehmen Sie den Namen EmptyElement1, und klicken Sie dann auf OK.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten EmptyElement1, und klicken Sie dann auf Code anzeigen.
Löschen Sie den Inhalt der Datei Elements.xml.

Fügen Sie der Datei Elements.xml den folgenden Code hinzu.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction
  Id="DemoHelloWorldButton"
  RegistrationType="List"
  RegistrationId="101"
  Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
         Location="Ribbon.Documents.New.Controls._children">
          <Button
           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
           Alt="Hello World Ribbon Button"
           Sequence="10"
           Image32by32="/_layouts/images/PPEOPLE.GIF"
           Command="Demo_HelloWorld"
           LabelText="Hello World Demo"
           TemplateAlias="o2"/>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
         Command="Demo_HelloWorld"
         CommandAction="javascript:alert('Hello World!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction> 
</Elements>

Das TemplateAlias-Attribut definiert, ob eine mittlere (o2) oder große (o1) Schaltfläche angezeigt wird. Das CommandAction-Element enthält den ECMAScript (JavaScript, JScript)-Code, der beim Klicken auf die Schaltfläche ausgeführt wird.

Beachten Sie, dass Sie der Schaltfläche ein benutzerdefiniertes Bild hinzufügen können, indem Sie mit der rechten Maustaste auf den Knoten RibbonDemo klicken, auf Hinzufügen klicken und auf Zugeordneter SharePoint-Ordner "Bilder" doppelklicken. Laden Sie anschließend das 32 x 32-Bild oder das 16 x 16-Bild in den Ordner Images/RibbonDemo hoch. Ändern Sie schließlich das Image32by32-Attribut (oder Image16by16-Attribut) in _layouts/images/ribbondemo/yourimage.png.

Bereitstellen und Testen der Projektmappe

Für diese Aufgabe stellen Sie die Projektmappe bereit und überprüfen anschließend, ob die Schaltfläche im Menüband angezeigt wird. Danach klicken Sie auf die Schaltfläche, um das Dialogfeld anzuzeigen.

So testen Sie die Projektmappe

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten RibbonDemo, und klicken Sie dann auf Bereitstellen.
Starten Sie Internet Explorer, und navigieren Sie zu der zuvor angegebenen Website.
Klicken Sie im linken Navigationsbereich auf Freigegebene Dokumente, um die Bibliothek Freigegebene Dokumente zu öffnen.
Klicken Sie im Menüband von SharePoint 2010 auf die Registerkarte Dokumente.

Im Menüband sollte nun die neue Schaltfläche Hello World Demo angezeigt werden.
Klicken Sie auf Hello World Demo. Das Hello World-JavaScript-Dialogfeld wird wie in Abbildung 1 dargestellt angezeigt.

Abbildung 1. Das Dialogfeld "Hello World"

Entfernen der Schaltfläche

Für diese Aufgabe entfernen Sie die Schaltfläche Hello World Demo.

So entfernen Sie die Schaltfläche

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten EmptyElement1, und klicken Sie dann auf Code anzeigen.
Kommentieren Sie den vorhandenen Code aus, indem Sie  nach dem schließenden </CustomAction>-Element ein.

Fügen Sie nach dem auskommentierten Code den folgenden Code ein.

<HideCustomAction Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Location="Ribbon.Documents.New.Controls._children">
</HideCustomAction>

Führen Sie die Schritte 1 bis 4 der Aufgabe 3, Bereitstellen und Testen der Projektmappe, aus, um die aktualisierte Projektmappe bereitzustellen und zu testen.

Im Menüband sollte nun die Schaltfläche Hello World Demo nicht mehr angezeigt werden.

Freigeben über