Aus der Praxis – Custom Action in der SharePoint Ribbon Bar für mehrere ausgewählte Elemente
avatar

Bei der Entwicklung einer eigenen Schaltfläche für die SharePoint Ribbon Bar stieß ich auf die folgende Frage:

Wir kann ich die Aktion sowohl für ein ausgewähltes Element als auch für mehrere ausgewählte Elemente ausführen?

Die SharePoint Standard Funktionen bieten dies z.B. beim Löschen von Elementen. Hier wählte der Benutzer einfach mehrere Elemente mit einem Häkchen aus und klickt auf Löschen.

Diese Funktionalität wollen wir nun nachbauen.

Zuerst legen wir eine Visual Studio Solution an und fügen ein “SharePoint Empty Element” hinzu. In der erstellten Elements.xml kann nun die Custom Action die Ribbon Bar definiert werden.

Zu beachten ist dabei die Definition eines CommandUIHandlers, mit dessen Hilfe definiert wird, welche Aktion nach dem Klick auf den Button ausgeführt werden soll. In diesem Beispiel wollen wir eine Application Page in einem modalen Dialogfenster laden. An diese Application Page sollen nun alle ausgewählten Elemente übertragen werden.

<CommandUIHandler Command="CustomAction1Command" CommandAction="javascript:SP.UI.ModalDialog.ShowPopupDialog('{SiteUrl}/_layouts/HanseVision/CustomAction1Page.aspx ?ListId={ListId}&amp;ItemId=' + GetSelectedListItemsAsString());" EnabledScript="javascript:SP.ListOperation.Selection.getSelectedItems().length > 0;"/>

Das auszuführende Kommando (definiert im Attribut “CommandAction”) ist ein JavaScript, in dem einige Funktionen aus der SharePoint ECMAScript Class Library aufgerufen werden. Zuerst wird ein Dialog aufgerufen, an den dann die unterschiedlichen Werte übergeben werden (SiteUrl, ListId und ItemId). Außerdem wird die Methode GetSelectedListItemsAsString() ausgeführt. Diese ist eine selbst erstellte Methode, die die ID aller ausgewählten Elemente der Liste kommasepariert zusammenfügt (siehe Abschnitt unten).

Unsere Custom Action soll außerdem nur dann aktiviert (also klickbar) sein, wenn mindestens ein Element aus der Liste ausgewählt wurde. Dazu wird im Attribute “EnableScript” die Bedingung “selectedItems > 0” angegeben.

Weiterführende Informationen zum SharePoint ECMA Script findet man hier: MSDN – ECMAScript

 

Erstellung eigener JavaScript Funktionen für die Verwendung in der Ribbon Bar

Zu diesem Zweck bietet Microsoft eine weitere Custom Action an, durch die wir neue JavaScript Funktionen erstellen und verfügbar machen können:

<CustomAction
  Id="HanseVision.CustomAction1.Script"
  Location="ScriptLink"
  ScriptBlock="function GetSelectedListItemsAsString()
                {
                  var itemsAsString = '';
                  var selectedItems = SP.ListOperation.Selection.getSelectedItems();
                  var i;
                  for (i in selectedItems)
                  {
                    itemsAsString += selectedItems[i].id + ',';
                  }
                  if (itemsAsString[itemsAsString.length-1] == ',')
                    itemsAsString = itemsAsString.substring(0, itemsAsString.length-1);
                  return itemsAsString;
                }">
</CustomAction>

Auch in dieser Funktion nutzen wir wieder die SharePoint der ECMA Script Funtionen. Diese Methode iteriert einfach durch alle selektierten Elemente und reiht die IDs durch Kommas getrennt zu einem string aneinander.

 

Der vollständige Inhalt der Elements.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
  Id="HanseVision.CustomAction1"
  RegistrationType="List"
  RegistrationId="101"
  Location="CommandUI.Ribbon"
  Sequence="5"
  Title="Custom Action 1">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
          <Button Id="HanseVision.CustomAction1.Button"
                  LabelText="CustomAction1" Sequence="31" Command="CustomAction1Command" TemplateAlias="o1" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="CustomAction1Command"
                          CommandAction="javascript:SP.UI.ModalDialog.ShowPopupDialog('{SiteUrl}/_layouts/HanseVision/CustomAction1Page.aspx?ListId={ListId}&amp;ItemId=' + GetSelectedListItemsAsString());"
                          EnabledScript="javascript:SP.ListOperation.Selection.getSelectedItems().length > 0;" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>

  <CustomAction
    Id="HanseVision.CustomAction1.Script"
    Location="ScriptLink"
    ScriptBlock="function GetSelectedListItemsAsString()
                  {
                    var itemsAsString = '';
                    var selectedItems = SP.ListOperation.Selection.getSelectedItems();
                    var i;
                    for (i in selectedItems)
                    {
                      itemsAsString += selectedItems[i].id + ',';
                    }
                    if (itemsAsString[itemsAsString.length-1] == ',')
                      itemsAsString = itemsAsString.substring(0, itemsAsString.length-1);
                    return itemsAsString;
                  }">
  </CustomAction>
</Elements>

 

Schreibe einen Kommentar