Customizing the SharePoint 2010 Ribbon

spribbon6

Das neue SharePoint 2010 Ribbon Interface ist nett anzusehen, doch wird sehr wahrscheinlich in den wenigsten Fällen 100% auf die Kundenwünsche passen, daher sollte man sich als Entwickler frühzeitig damit beschäftigen wie man das Ribbon anpassen und um neue Funktionalitäten erweitern kann.

Das Ribbon Interface kann einfach über den gewohnten deklarativen Weg erweitert werden. Um einen neuen Button in das Ribbon einzufügen benötigt man also wie gewohnt zunächst eine feature.xml. Eine einfache Version einer feature.xml kann wie folgt aussehen…

 

Die feature.xml

<?xml version="1.0" encoding="utf-8" ?>
<Feature Id="BA881FA5-318D-4fac-A962-3EF181C16606"
  Title="My first SharePoint 2010 Ribbon tweaks"
  Description="Add some cool stuff to the new ribbon"
  Version="1.0.0.0"
  Scope="Web"
  xmlns="http://schemas.microsoft.com/sharepoint/">
    <ElementManifests>
      <ElementManifest Location="elements.xml" />
    </ElementManifests>
</Feature>

 

Die Struktur der Solution

Die Struktur der Solution selbst hat sich gegenüber SharePoint 2007 nicht verändert, auch die Zielpfade sind gleich geblieben allerdings wurde aus dem “12 hive” nun der “14 hive”! Demnach sollten sowohl feature.xml als auch elements.xml in folgenden Pfad nach dem Deployment liegen

%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\ TEMPLATE\FEATURES\MyFirstSP2010RibbonTweaks\

 

Wo kann man das Ribbon anpassen?

Um das Ribbon von SharePoint 2010 anzupassen, muss man die entsprechenden IDs des gewünschten Ribbon Controls angeben, Microsoft hat im SharePoint 2010 SDK eine Liste aller SharePoint 2010 Ribbon IDs bereit gestellt, die uns Entwickler das Leben etwas erleichtern sollen.

 

Die elements.xml

Der Kern der Ribbon Anpassungen geschieht wie gewohnt in der elements.xml, wobei der Name der Datei natürlich änderbar ist….Abhängig von der gewünschten Anpassung muss logischerweise ein anderer Content in dieser Datei platziert werden.

Grundsätzlich gilt, dass Ribbon Commands immer ein ECMAScript (JavaScript oder JScript) ausführen.

Das Ribbon erweitern

Um eine Schaltfäche zum Ribbon Control hinzuzufügen muss man in einer CommandUIDefinition Node das “Ziel” angeben, wo der neue Ribbon Button erscheinen soll.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Ribbon.WebPartPage.Edit.AddAButton"
    Location="ViewToolbar"
    RegistrationId="101"
    RegistrationType="List"
    Title="My first ribbon button">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
          Location="Ribbon.WebPartPage.Edit.Controls._children">
          <Button Id="Ribbon.WebPartPage.Edit.Controls.NewRibbonButton"
            Command="MyFirstRibbonCommand"
            Image16by16="/_layouts/images/breadcrumbbutton.png"
            Image32by32="/_layouts/images/PPEOPLE.GIF"
            LabelText="Thats my first ribbon command..."
            TemplateAlias="o2" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler 
          Command="MyFirstRibbonCommand"
          CommandScript="BLOCKED SCRIPTalert('Hello I'm a ribbon cmd');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>
 

Wie man schnell erkennen kann wird hier ein neuer Button in das WebPartPage Ribbon in der Gruppe “Edit” eingefügt, der den Titel “Thats my first ribbon command…” trägt. Beim klick auf die Schaltfläche wird lediglich eine JavaScript Meldung angezeigt.

Eine Ribbon-Schaltfläche entfernen

Genauso einfach wie das Hinzufügen ist auch das Löschen eines Buttons aus dem Ribbon, dies geschieht indem man einfach im CommandUIDefinition Node die ID des zu entfernenden Elementes angibt. Leider funktioniert dies in meinem SharePoint 2010 Build noch nicht, daher hier nur der Beispielcode aus der MSDN

 

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="RemoveRibbonButton"
    Location="CommandUI.Ribbon">
      <CommandUIExtension>
        <CommandUIDefinitions>
          <CommandUIDefinition
            Location="Ribbon.Library.Actions.ConnectToClient" />
        </CommandUIDefinitions>
      </CommandUIExtension>
  </CustomAction>
</Elements>

 

In diesem kleinen Beispiel wird der Button “Connect to Outlook” aus der “Connect & Export” Gruppe entfernt.

 

Controls fürs Ribbon

Das Ribbon von SharePoint 2010 kann natürlich nicht nur um Button Controls erweitert werden, in SharePoint 2010 kann man folgende Elemente zum RibbonInterface hinzufügen:

  • Button
    • wie eben verwendet, ein einfacher Button
  • Checkbox
    • Eine CheckBox zum aktivieren - deaktivieren
  • Color Picker
    • Control zur Farbauswahl
  • Combo Box
    • Eine Liste von Elementen, hier kann entweder eines ausgewählt werden, oder die AutoComplete Funktionalität genutzt werden.
  • Drop Down
    • Analog zur ComboBox jedoch bietet die DropDown kein AutoComplete
  • Flyout Anchor
    • Ein Button der der beliebige Unterelemente haben kann (Root eines Menüs)
  • Insert Table
    • Schaltfläche um eine Tabelle einzufügen
  • Label
    • Textzeile
  • Menu
    • Menücontainer für Popup Menüs
  • Menu Section
    • Menü Seperator
  • MRU Split Button
    • Link zur zuletzt verwendeten Aktion aus dem Untermenü dieses Buttons
  • Spinner
    • Spinner Control halt eben! Mit Keyboard Funktionalität
  • Split Button
    • Vereint einen Button und ein Menü in einem Element
  • Text Box
    • für Texteingabe
  • Toggle Button
    • Ein Button mit 2 States…

Mit dieser Vielzahl an Controls kann man OOB schon viele nette Ribbon UI’s erstellen und kann somit die individuellen Kundenwünsche erfüllen.

Die zwei Arten des Deployments

SharePoint 2010 Lösungen können über zwei Wege deployt werden, zum einen über die SharePoint Management Shell (PowerShell) oder alternativ als WSP. Wenn man ein WSP für SharePoint 2010 erstellt kann man darüber hinaus noch wählen zwischen einer Sandbox und einer Fulltrust Solution, die Unterschiede zwischen Sandbox und Fulltrust Solution werde ich in einem separaten Post aber noch genauer erläutern.

Deployment als SharePoint Solution


Sandbox Solutions

Der Deployment Prozess einer Sandbox Solution für SharePoint 2010 ist wirklich sehr einfach, man muss lediglich die “Solution Gallery” in den “Site Settings” öffnen und hier die neue SharePoint Solution uploaden. 

 

Fulltrust Solutions

Um FullTrust Solutions zu SharePoint hinzuzufügen gibt es 3 unterschiedliche Wege:

  1. Wie von SharePoint 2007 gewohnt über stsadm
  2. Zentraladministration
  3. das gute alte Objektmodell

die einzelnen Wege eine Fulltrust Solution zu deployen möchte ich jetzt nicht noch im Detail erläutern…

 

Deployment mit der SharePoint Management Shell (PowerShell)

Dass die PowerShell mächtig ist, weiß mittlerweile fast! jeder, wie groß die Macht der PowerShell in SharePoint 2010 ist, ist wirklich beeindruckend. Markus und Christian haben bereits über die Möglichkeiten der PowerShell in 2010 gepostet, daher möchte ich dies hier nicht nochmals wiederholen… nur soviel soll gesagt sein

 “R.I.P. STSADM”

Doch wieder zur Sache, um das eben geschriebene Feature zu deployen, sind nur zwei kurze PowerShell Commands nötig

 

Install-SPFeature BA881FA5-318D-4fac-A962-3EF181C16606
Enable-SPFeature BA881FA5-318D-4fac-A962-3EF181C16606 –Url http://server/site/subsite

 

wobei BA881FA5-318D-4fac-A962-3EF181C16606 natürlich durch eure FeatureId ersetzt werden muss… genau wie die Site-URL.

Nachdem Ihr die beiden Commands abgesetzt habt, müsst ihr noch ein kurzes iisreset machen damit das neue Feature auch vom IIS verwendet wird.

 

DotNetKicks-DE Image
Published Freitag, 23. Oktober 2009 12:49 von ThorstenHans
Abgelegt unter: , ,

Kommentare

# Twitter Trackbacks for Customizing the SharePoint 2010 Ribbon - .Net rocks [dotnet-forum.de] on Topsy.com

Ping Antwort von  Twitter Trackbacks for                 Customizing the SharePoint 2010 Ribbon - .Net rocks         [dotnet-forum.de]        on Topsy.com

# re: Customizing the SharePoint 2010 Ribbon

Montag, 26. April 2010 14:27 von Ten_Eniunlsl

Hallo,

ich habe 2Fragen wegen Ribbon in Sandbox

Erstens wo muss die Elements.xml in der Sandbox liegen, da ja Sandbox solutions nicht im Filesystem liegen.

Zweitens mir Zeigt VisualStudio2010 an "Warning The 'CommandScript' attribute is not declared.

Danke

Kommentar abgeben

(verpflichtend) 
(verpflichtend) 
(optional)
(verpflichtend)