Procédure pas à pas : création d'un composant WebPart pour SharePoint

Article
08/10/2011

Les composants WebPart permettent aux utilisateurs de modifier directement le contenu, l'apparence et le comportement des pages d'un site SharePoint à l'aide d'un navigateur. Cette procédure pas à pas vous indique comment créer un composant WebPart à l'aide d'un modèle d'élément WebPart dans Visual Studio 2010.

Le composant WebPart affiche des employés dans une grille de données. L'utilisateur spécifie l'emplacement du fichier qui contient les données sur les employés. Il peut également filtrer la grille de données de manière à n'afficher dans la liste que les employés qui sont directeurs.

Cette procédure pas à pas décrit les tâches suivantes :

Création d'un composant WebPart à l'aide du modèle d'élément WebPart de Visual Studio
Création d'une propriété pouvant être définie par l'utilisateur du composant WebPart. Cette propriété spécifie l'emplacement du fichier de données sur les employés.
Restitution du contenu dans un composant WebPart en ajoutant des contrôles à la collection de contrôles WebPart
Création d'un élément de menu, désigné par « verbe », figurant dans le menu d'actions verbales du composant WebPart restitué. Les verbes permettent à l'utilisateur de modifier les données qui s'affichent dans le composant WebPart.
Test du composant WebPart dans SharePoint

Notes

Il est possible que pour certains des éléments de l'interface utilisateur de Visual Studio, votre ordinateur affiche des noms ou des emplacements différents de ceux indiqués dans les instructions suivantes. Ces éléments dépendent de l'édition de Visual Studio dont vous disposez et des paramètres que vous utilisez. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Éditions de Microsoft Windows et SharePoint prises en charge. Pour plus d'informations, consultez Configuration requise pour développer des solutions SharePoint.
Visual Studio 2010 Professional ou une édition de Visual Studio Application Lifecycle Management (ALM).

Création d'un projet SharePoint vide

Commencez par créer un projet SharePoint vide. Vous ajouterez ensuite un composant WebPart au projet à l'aide du modèle d'élément WebPart.

Pour créer un projet SharePoint vide

Démarrez Visual Studio 2010 en sélectionnant l'option Exécuter en tant qu'administrateur.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.

La boîte de dialogue Nouveau projet s'affiche.
Ouvrez la boîte de dialogue Nouveau projet, développez le nœud SharePoint sous le langage que vous souhaitez utiliser, puis sélectionnez le nœud 2010.
Dans le volet Modèles, sélectionnez Projet SharePoint vide, puis cliquez sur OK.

L'Assistant Personnalisation de SharePoint s'affiche. Cet Assistant vous permet de sélectionner le site à utiliser pour déboguer le projet et le niveau de confiance de la solution.
Sélectionnez Déployer en tant que solution de batterie, puis cliquez sur Terminer pour accepter le site SharePoint local par défaut.

Ajout d'un composant WebPart au projet

Vous pouvez ajouter un élément WebPart au projet. L'élément WebPart ajoute le fichier de code du composant WebPart. Vous ajouterez ensuite du code à ce fichier pour restituer le contenu du composant WebPart.

Pour ajouter un composant WebPart au projet

Dans le menu Projet, cliquez sur Ajouter un nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, dans le volet Modèles installés, développez le nœud SharePoint, puis cliquez sur 2010.
Dans la liste des modèles SharePoint, sélectionnez Composant WebPart, puis cliquez sur Ajouter.

L'élément WebPart s'affiche dans l'Explorateur de solutions.

Restitution du contenu du composant WebPart

Vous pouvez spécifier les contrôles à afficher dans le composant WebPart en les ajoutant à la collection de contrôles de la classe WebPart.

Pour restituer le contenu du composant WebPart

Dans l'Explorateur de solutions, double-cliquez sur WebPart1.vb (en Visual Basic) ou WebPart1.cs (en C#).

Le fichier de code du composant WebPart s'ouvre dans l'éditeur de code.
Ajoutez les instructions suivantes au début du fichier de code du composant WebPart.
```
Imports System.Data
```
```
using System.Data;
```
Ajoutez le code suivant à la classe WebPart1. Ce code déclare les champs suivants :
- Grille de données pour afficher les employés dans le composant WebPart
- Texte qui s'affiche sur le contrôle utilisé pour filtrer la grille de données
- Étiquette qui affiche une erreur lorsque la grille de données ne peut pas afficher de données
- Chaîne qui contient le chemin d'accès du fichier de données sur les employés
```
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;
```

Ajoutez le code suivant à la classe WebPart1. Ce code ajoute une propriété personnalisée nommée DataFilePath au composant WebPart. Une propriété personnalisée est une propriété qui peut être définie par l'utilisateur dans SharePoint. Cette propriété obtient et définit l'emplacement d'un fichier de données XML utilisé pour remplir la grille de données.

<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;
    }
}

Remplacez la méthode CreateChildControls par le code ci-dessous. Ce code exécute les tâches suivantes :

Il ajoute la grille de données et l'étiquette que vous avez déclarées au cours de l'étape précédente.
Il lie la grille de données à un fichier XML qui contient des données sur les employés.

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();
}

Ajoutez la méthode suivante à la classe WebPart1. Ce code exécute les tâches suivantes :

Il crée un verbe qui s'affiche dans le menu d'actions verbales WebPart du composant WebPart restitué.
Il gère l'événement qui est déclenché lorsque l'utilisateur clique sur le verbe dans le menu d'actions verbales. Ce code filtre la liste des employés qui s'affiche dans la grille de données.

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";
    }
}

Test du composant WebPart

Lorsque vous exécutez le projet, le site SharePoint s'ouvre. Le composant WebPart est automatiquement ajouté à la galerie de composants WebPart dans SharePoint. Vous pouvez ajouter le composant WebPart à toute page WebPart.

Pour tester le composant WebPart

Collez le code XML suivant dans un fichier Bloc-notes. Ce fichier XML contient des exemples de données qui s'afficheront dans le composant WebPart.

<?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>

Dans le Bloc-notes, cliquez sur Fichier, puis sur Enregistrer sous.
Dans la boîte de dialogue Enregistrer sous, dans la liste déroulante Type, sélectionnez Tous les fichiers.
Dans la zone Nom de fichier, tapez data.xml.
Sélectionnez un dossier à l'aide du bouton Parcourir les dossiers, puis cliquez sur Enregistrer.
Dans Visual Studio, appuyez sur F5.

Le site SharePoint s'ouvre.
Cliquez sur Actions du site, puis sur Autres options.
Dans la page Créer, sélectionnez Page de composants WebPart, puis cliquez sur Créer.
Dans la page Nouvelle page de composants WebPart, nommez la page SampleWebPartPage.aspx, puis cliquez sur Créer.

La page de composants WebPart s'affiche.
Sélectionnez une zone sur la page de composants WebPart.
En haut de la page, cliquez sur Insérer, puis sur WebPart.
Dans le volet Catégories, cliquez sur le dossier Personnalisé, puis sur le composant WebPart WebPart1 et sur Ajouter.

Le composant WebPart s'affiche dans la page.

Test de la propriété personnalisée

Pour remplir la grille de données qui s'affiche dans le composant WebPart, spécifiez le chemin d'accès du fichier XML qui contient des données sur chaque employé.

Pour tester la propriété personnalisée

Cliquez sur la flèche qui figure dans l'angle du composant WebPart, puis cliquez sur Modifier le composant WebPart.

Un volet qui contient les propriétés du composant WebPart s'affiche à droite de la page.
Dans ce volet, développez le nœud Divers, tapez le chemin d'accès du fichier XML que vous avez précédemment créé, puis cliquez surAppliquer et sur OK.

Vérifiez qu'une liste d'employés s'affiche dans le composant WebPart.

Test du verbe WebPart

Vous pouvez afficher et masquer les employés qui ne sont pas directeurs en cliquant sur un élément qui figure dans le menu d'actions verbales WebPart.

Pour tester le verbe WebPart

Cliquez sur la flèche qui figure dans l'angle du composant WebPart, puis cliquez sur Afficher uniquement les directeurs.

Seuls les employés qui sont directeurs s'affichent dans le composant WebPart.
Recliquez sur la flèche, puis cliquez sur Afficher tous les employés.

Tous les employés s'affichent dans le composant WebPart.

Voir aussi

Tâches

Comment : créer un composant WebPart SharePoint

Comment : créer un composant WebPart SharePoint à l'aide d'un concepteur

Procédure pas à pas : création d'un composant WebPart pour SharePoint à l'aide d'un concepteur

Autres ressources

Création de composants WebPart pour SharePoint

Partager via