Exemplarische Vorgehensweise: Erstellen eines Webparts für SharePoint

  • Artikel

Mithilfe von Webparts können Benutzer Inhalt, Darstellung und Verhalten der Seiten einer SharePoint-Website direkt im Browser ändern. In dieser exemplarischen Vorgehensweise wird erläutert, wie ein Webpart mit der Elementvorlage Webpart in Visual Studio 2010 erstellt wird.

Das Webpart zeigt Mitarbeiter in einem Datenraster an. Der Benutzer gibt den Speicherort der Datei an, die die Mitarbeiterdaten enthält. Außerdem kann der Benutzer das Datenraster filtern, damit nur Mitarbeiter, die Manager sind, in der Liste angezeigt werden.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen eines Webparts mit der Visual Studio-Elementvorlage Webpart.

  • Erstellen einer Eigenschaft, die vom Benutzer des Webparts festgelegt werden kann. Diese Eigenschaft gibt den Speicherort der Mitarbeiterdatendatei an.

  • Rendern von Inhalt in einem Webpart durch Hinzufügen von Steuerelementen zur Webpart-Steuerelementauflistung.

  • Erstellen eines neuen, als Verb bezeichneten Menüelements, das im Verbmenü des gerenderten Webparts angezeigt wird. Verben ermöglichen es dem Benutzer, die im Webpart angezeigten Daten zu ändern.

  • Testen des Webparts in SharePoint.

    Tipp

    Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten. Die von Ihnen verwendete Visual Studio-Edition und die Einstellungen legen diese Elemente fest. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Unterstützte Editionen von Microsoft Windows und SharePoint. Weitere Informationen finden Sie unter Anforderungen für die Entwicklung von SharePoint-Lösungen.

  • Visual Studio 2010 Professional oder eine Edition der Anwendungslebenszyklus-Verwaltung (Application Lifecycle Management, ALM) von Visual Studio.

Erstellen eines leeren SharePoint-Projekts

Erstellen Sie zunächst ein leeres SharePoint-Projekt. Später fügen Sie dem Projekt mit der Elementvorlage Webpart ein Webpart hinzu.

So erstellen Sie ein leeres SharePoint-Projekt

  1. Starten Sie Visual Studio 2010 mit der Option Als Administrator ausführen.

  2. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

    Das Dialogfeld Neues Projekt wird angezeigt.

  3. Öffnen Sie das Dialogfeld Neues Projekt, erweitern Sie den Knoten SharePoint unter der gewünschten Sprache, und wählen Sie anschließend den Knoten 2010 aus.

  4. Wählen Sie im Bereich Vorlagen die Option Leeres SharePoint-Projekt aus, und klicken Sie dann auf OK.

    Der Assistent zum Anpassen von SharePoint wird angezeigt. Mit diesem Assistenten können Sie die Website, die Sie zum Debuggen des Projekts verwenden, sowie die Vertrauensebene der Projektmappe auswählen.

  5. Wählen Sie Als Farmlösung bereitstellen aus, und klicken Sie dann auf Fertig stellen, um die standardmäßige lokale SharePoint-Website zu akzeptieren.

Hinzufügen eines Webparts zum Projekt

Fügen Sie dem Projekt ein Element Webpart hinzu. Durch das Element Webpart wird die Codedatei für das Webpart hinzugefügt. Später fügen Sie der Codedatei für das Webpart Code hinzu, um den Inhalt des Webparts zu rendern.

So fügen Sie ein Webpart zum Projekt hinzu

  1. Klicken Sie im Menü Projekt auf Neues Element hinzufügen.

  2. Erweitern Sie im Dialogfeld Neues Element hinzufügen im Bereich Installierte Vorlagen den Knoten SharePoint, und klicken Sie dann auf 2010.

  3. Wählen Sie in der Liste der SharePoint-Vorlagen die Option Webpart aus, und klicken Sie dann auf Hinzufügen.

    Das Element Webpart wird im Projektmappen-Explorer angezeigt.

Rendern von Inhalt im Webpart

Sie können angeben, welche Steuerelemente im Webpart angezeigt werden, indem Sie diese der Steuerelementauflistung der Webpartklasse hinzufügen.

So rendern Sie Inhalt im Webpart

  1. Doppelklicken Sie im Projektmappen-Explorer auf WebPart1.vb (in Visual Basic) oder WebPart1.cs (in C#).

    Die Codedatei für das Webpart wird im Code-Editor geöffnet.

  2. Fügen Sie am Anfang der Codedatei für das Webpart die folgenden Anweisungen hinzu.

    Imports System.Data

    using System.Data;

  3. Fügen Sie der WebPart1-Klasse folgenden Code hinzu. Mit diesem Code werden die folgenden Felder deklariert:

    • Ein Datenraster, um Mitarbeiter im Webpart anzuzeigen.

    • Text, der auf dem Steuerelement angezeigt wird, das zum Filtern des Datenrasters verwendet wird.

    • Eine Bezeichnung, die einen Fehler anzeigt, wenn das Datenraster keine Daten anzeigen kann.

    • Eine Zeichenfolge, die den Pfad zur Mitarbeiterdatendatei enthält.

    Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String

    private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;

  4. Fügen Sie der WebPart1-Klasse folgenden Code hinzu. In diesem Code wird dem Webpart eine benutzerdefinierte Eigenschaft mit dem Namen DataFilePath hinzugefügt. Eine benutzerdefinierte Eigenschaft ist eine Eigenschaft, die vom Benutzer in SharePoint festgelegt werden kann. Diese Eigenschaft ruft den Speicherort einer XML-Datendatei ab, die zum Auffüllen des Datenrasters verwendet wird, und legt diesen Speicherort fest.

    <Personalizable(PersonalizationScope.[Shared]), _
    WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
    WebDescription("Location of the XML file that contains employee data")> _
Public Property DataFilePath() As String
    Get
        Return xmlFilePath
    End Get
    Set(ByVal value As String)
        xmlFilePath = value
    End Set
End Property

    [Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Path to Employee Data File"),
WebDescription("Location of the XML file that contains employee data")]
public string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

  5. Ersetzen Sie die CreateChildControls-Methode durch den folgenden Code. Mit diesem Code werden die folgenden Aufgaben ausgeführt:

    • Fügt das Datenraster und die Bezeichnung hinzu, die Sie im vorherigen Schritt deklariert haben.

    • Bindet das Datenraster an eine XML-Datei, die Mitarbeiterdaten enthält.

    Protected Overloads Overrides Sub CreateChildControls()

    'Define the grid control that displays employee data in the Web Part.
    grid = New DataGrid()
    With grid
        .Width = Unit.Percentage(100)
        .GridLines = GridLines.Horizontal
        .HeaderStyle.CssClass = "ms-vh2"
        .CellPadding = 2
        .BorderWidth = Unit.Pixel(5)
        .HeaderStyle.Font.Bold = True
        .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
    End With



    'Populate the grid control with data in the employee data file.
    Try
        Dim dataset As New DataSet()
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
        grid.DataSource = dataset
        grid.DataBind()
    Catch x As Exception
        errorMessage.Text += x.Message
    End Try

    'Add control to the controls collection of the Web Part.
    Controls.Add(grid)
    Controls.Add(errorMessage)
    MyBase.CreateChildControls()

End Sub

    protected override void CreateChildControls()
{
    // Define the grid control that displays employee data in the Web Part.
    grid = new DataGrid();
    grid.Width = Unit.Percentage(100);
    grid.GridLines = GridLines.Horizontal;
    grid.HeaderStyle.CssClass = "ms-vh2";
    grid.CellPadding = 2;
    grid.BorderWidth = Unit.Pixel(5);
    grid.HeaderStyle.Font.Bold = true;
    grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

    // Populate the grid control with data in the employee data file.
    try
    {
        DataSet dataset = new DataSet();
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
        grid.DataSource = dataset;
        grid.DataBind();
    }
    catch (Exception x)
    {
        errorMessage.Text += x.Message;
    }

    // Add control to the controls collection of the Web Part.
    Controls.Add(grid);
    Controls.Add(errorMessage);
    base.CreateChildControls();
}

  6. Fügen Sie der WebPart1-Klasse die folgende Methode hinzu. Mit diesem Code werden die folgenden Aufgaben ausgeführt:

    • Erstellt ein Verb, das im Verbmenü des gerenderten Webparts angezeigt wird.

    • Behandelt das Ereignis, das ausgelöst wird, wenn der Benutzer im Verbmenü auf das Verb klickt. In diesem Code wird die Liste der Mitarbeiter gefiltert, die im Datenraster angezeigt wird.

    Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
    Get
        Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
            New WebPartEventHandler(AddressOf CustomVerbEventHandler))

        customVerb.Text = verbText
        customVerb.Description = "Shows only employees that are managers"

        Dim newVerbs() As WebPartVerb = {customVerb}

        Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
    End Get
End Property

Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
    Dim titleColumn As Integer = 2

    Dim item As DataGridItem
    For Each item In grid.Items
        If item.Cells(titleColumn).Text <> "Manager" Then
            If item.Visible = True Then
                item.Visible = False
            Else
                item.Visible = True
            End If
        End If
    Next item
    If verbText = "Show Managers Only" Then
        verbText = "Show All Employees"
    Else
        verbText = "Show Managers Only"
    End If
End Sub

    public override WebPartVerbCollection Verbs
{
    get
    {
        WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
            new WebPartEventHandler(CustomVerbEventHandler));

        customVerb.Text = verbText;
        customVerb.Description = "Shows only employees that are managers";

        WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };

        return new WebPartVerbCollection(base.Verbs, newVerbs);
    }
}

protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
{
    int titleColumn = 2;

    foreach (DataGridItem item in grid.Items)
    {
        if (item.Cells[titleColumn].Text != "Manager")
        {
            if (item.Visible == true)
            {
                item.Visible = false;
            }
            else
            {
                item.Visible = true;
            }
        }

    }
    if (verbText == "Show Managers Only")
    {
        verbText = "Show All Employees";
    }
    else
    {
        verbText = "Show Managers Only";
    }
}

Testen des Webparts

Wenn Sie das Projekt ausführen, wird die SharePoint-Website geöffnet. Das Webpart wird automatisch dem Webpartkatalog in SharePoint hinzugefügt. Sie können das Webpart jeder Webpartseite hinzufügen.

So testen Sie das Webpart

  1. Fügen Sie folgendes XML in eine Editor-Datei ein. Diese XML-Datei enthält die Beispieldaten, die im Webpart angezeigt werden.

    <?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="https://schemas.microsoft.com/vsto/samples">
       <employee>
           <name>David Hamilton</name>
           <hireDate>2001-05-11</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Karina Leal</name>
           <hireDate>1999-04-01</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Nancy Davolio</name>
           <hireDate>1992-05-01</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Steven Buchanan</name>
           <hireDate>1955-03-04</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Suyama Michael</name>
           <hireDate>1963-07-02</hireDate>
           <title>Sales Associate</title>
       </employee>
    </employees>

  2. Klicken Sie in Editor auf Datei und dann auf Speichern unter.

  3. Wählen Sie im Dialogfeld Speichern unter in der Dropdownliste Dateityp die Option Alle Dateien aus.

  4. Geben Sie im Feld Dateiname den Namen data.xml ein.

  5. Wählen Sie über die Schaltfläche Ordner durchsuchen einen beliebigen Ordner aus, und klicken Sie dann auf Speichern.

  6. Drücken Sie in Visual Studio F5.

    Die SharePoint-Website wird geöffnet.

  7. Klicken Sie auf Websiteaktionen und dann auf Weitere Optionen.

  8. Wählen Sie auf der Seite Erstellen die Option Webpartseite aus, und klicken Sie dann auf Erstellen.

  9. Geben Sie auf der Seite Neue Webpartseite den Namen SampleWebPartPage.aspx für die Seite an, und klicken Sie dann auf Erstellen.

    Die Webpartseite wird angezeigt.

  10. Wählen Sie eine Zone auf der Webpartseite aus.

  11. Klicken Sie am oberen Rand der Seite auf Einfügen und dann auf Webpart.

  12. Klicken Sie im Bereich Kategorien auf den Ordner Benutzerdefiniert, klicken Sie auf das Webpart WebPart1 und dann auf Hinzufügen.

    Das Webpart wird auf der Seite angezeigt.

Testen der benutzerdefinierten Eigenschaft

Um das im Webpart angezeigte Datenraster aufzufüllen, geben Sie den Pfad der XML-Datei an, die Daten zu jedem Mitarbeiter enthält.

So testen Sie die benutzerdefinierte Eigenschaft

  1. Klicken Sie auf den Pfeil, der in der Ecke des Webparts angezeigt wird, und klicken Sie dann auf Webpart bearbeiten.

    Ein Bereich, der Eigenschaften für das Webpart enthält, wird auf der rechten Seite der Seite angezeigt.

  2. Erweitern Sie im Bereich den Knoten Sonstiges, geben Sie den Pfad der XML-Datei ein, die Sie zuvor erstellt haben, klicken Sie auf Übernehmen und dann auf OK.

    Überprüfen Sie, ob eine Liste von Mitarbeitern im Webpart angezeigt wird.

Testen des Webpartverbs

Zeigen Sie Mitarbeiter an, die keine Manager sind, und blenden Sie diese aus, indem Sie auf ein Element klicken, das im Verbmenü des Webparts angezeigt wird.

So testen Sie das Webpartverb

  1. Klicken Sie auf den Pfeil, der in der Ecke des Webparts angezeigt wird, und klicken Sie dann auf Show Managers Only.

    Nur Mitarbeiter, die Manager sind, werden im Webpart angezeigt.

  2. Klicken Sie erneut auf den Pfeil und dann auf Show All Employees.

    Alle Mitarbeiter werden im Webpart angezeigt.

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines SharePoint-Webparts

Gewusst wie: Erstellen eines SharePoint-Webparts mithilfe eines Designers

Exemplarische Vorgehensweise: Erstellen eines Webparts für SharePoint mithilfe eines Designers

Weitere Ressourcen

Erstellen von Webparts für SharePoint