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

Article
03/04/2013

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

[!REMARQUE]

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 Paramètres Visual Studio.

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 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 en sélectionnant l'option Exécuter en tant qu'administrateur.
Sur les hommes défendez, choisissez Fichier, Nouveau, Projet.
Dans 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 , choisissez Projet SharePoint 2010, puis choisissez le bouton 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 la case d'option Déployer en tant que solution de batterie , puis choisissez le bouton 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 la barre de menus, sélectionnez Projet, 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 sélectionnez le nœud 2010 .
Dans la liste de modèles SharePoint, sélectionnez le modèle Composant WebPart , puis choisissez le bouton 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 Explorateur de solutions, ouvrez 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é.
Gère l'événement qui est déclenché lorsque l'utilisateur choisit 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, dans la barre de menus, sélectionnez Fichier, Enregistrer sous.
Dans la boîte de dialogue Enregistrer sous , dans la liste Type de fichier , choisissez Tous les fichiers.
Dans la zone Nom de fichier , tapez data.xml.
Choisissez un dossier à l'aide de le bouton Parcourir les dossiers , puis choisissez le bouton Enregistrer .
Dans Visual Studio, choisissez la clé F5 .

Le site SharePoint s'ouvre.
Dans le menu Actions du site , choisissez Autres options.
Dans la page Créer , choisissez le type Page de composants WebPart , puis choisissez le bouton Créer .
Dans la page Nouvelle page de composants WebPart , nommez la page SampleWebPartPage.aspx, puis choisissez le bouton Créer .

La page de composants WebPart s'affiche.
Sélectionnez une zone sur la page de composants WebPart.
En haut de la page, sélectionnez l'onglet Insérer , puis choisissez le bouton Composant WebPart .
Dans le volet catégories , sélectionnez le dossier Personnalisé , choisissez le composant WebPart WebPart1 , puis choisissez le bouton 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 à droite du composant WebPart, puis choisissez Modifier le composant WebPart de menu qui s'affiche.

Un volet qui contient les propriétés du composant WebPart s'affiche à droite de la page.
Dans le volet, développez le nœud DIVERS , entrez le chemin d'accès du fichier XML que vous avez créé précédemment, choisissez le bouton Appliquer , puis choisissez le bouton 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 à droite du composant WebPart, puis choisissez Afficher les gestionnaires uniquement de menu qui s'affiche.

Seuls les employés qui sont directeurs s'affichent dans le composant WebPart.
Cliquez sur la flèche de nouveau, puis choisissez Afficher tous les employés de menu qui s'affiche.

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