Procédure pas à pas : Création d’un composant WebPart pour SharePoint

Article
06/19/2023

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 montre comment créer un composant WebPart à l’aide du modèle d’élément Web Part de Visual Studio 2010.

Le composant WebPart affiche les employés dans une grille de données. L’utilisateur spécifie l’emplacement du fichier qui contient les données des employés. Il peut également filtrer la grille de données afin que seuls les responsables apparaissent dans la liste.

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 Web Part de Visual Studio
Création d’une propriété du composant WebPart qui peut être définie par l’utilisateur et spécifie l’emplacement du fichier de données des employés
Affichage 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, appelé verbe, qui apparaît dans le menu d’actions verbales du composant WebPart rendu et permet à l’utilisateur de modifier les données affichées 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. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Pour plus d’informations, consultez Personnaliser l’IDE Visual Studio.

Prérequis

Éditions prises en charge de Microsoft Windows et SharePoint.
Visual Studio 2017 ou Azure DevOps Services

Création d’un projet SharePoint vide

Tout d’abord, créez un projet SharePoint vide. Plus tard, vous ajouterez un composant WebPart au projet à l’aide du modèle d’élément Web Part.

Lancez Visual Studio à l’aide de l’option Exécuter en tant qu’administrateur.
Dans la barre de menus, 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, sélectionnez l’élément Projet SharePoint 2010, puis sélectionnez le bouton OK.

L’Assistant Personnalisation de SharePoint s’affiche. Cet Assistant vous permet de sélectionner le site que vous utiliserez pour déboguer le projet et le niveau d’approbation de la solution.
Sélectionnez la case d’option Déployer en tant que solution de batterie de serveurs, puis le bouton Terminer pour accepter le site SharePoint local par défaut.

Ajout d’un composant WebPart au projet

Ajoutez un élément Web Part au projet. L’élément Web Part ajoute le fichier de code du composant WebPart. Plus tard, vous ajouterez du code à ce fichier pour afficher le contenu du composant WebPart.

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

L’élément Web Part apparaît dans l’Explorateur de solutions.

Affichage du contenu dans le composant WebPart

Pour spécifier les contrôles que vous souhaitez afficher dans le composant WebPart, ajoutez-les à la collection de contrôles de la classe du composant WebPart.

Dans l’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 directives suivantes en haut du fichier de code du composant WebPart.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
Ajoutez le code suivant à la classe WebPart1 . Ce code déclare les champs suivants :
- Une grille de données pour afficher les employés dans le composant WebPart
- Du texte qui apparaît sur le contrôle utilisé pour filtrer la grille de données
- Une étiquette qui affiche une erreur si la grille de données ne parvient pas à afficher les données
- Une chaîne qui contient le chemin du fichier de données des employés
  - C#
  - VB
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```

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 dans SharePoint par l’utilisateur. Cette propriété récupère 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 string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

<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

Remplacez la méthode CreateChildControls par le code suivant. Ce code effectue les tâches suivantes :

Ajout de la grille de données et de l’étiquette déclarées à l’étape précédente

Liaison de la grille de données à un fichier XML contenant les données des employés

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

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

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

Création d’un verbe qui apparaît dans le menu d’actions verbales du composant WebPart rendu

Il gère l'événement qui est déclenché lorsque l'utilisateur sélectionne le verbe dans le menu d'actions verbales. Ce code filtre la liste des employés qui apparaît dans la grille de données.

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

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

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 à n’importe quelle page de composant WebPart.

Collez le code XML suivant dans un fichier Bloc-notes. Ce fichier XML contient les exemples de données qui apparaîtront dans le composant WebPart.

<?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="http://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 la barre de menus du Bloc-notes, choisissez Fichier>Enregistrer sous.
Dans la liste déroulante Type de fichier de la boîte de dialogue Enregistrer sous, choisissez Tous les fichiers.
Dans la zone Nom du fichier, entrez data.xml.
Choisissez un dossier à l’aide du bouton Parcourir les dossiers, puis sélectionnez le bouton Enregistrer.
Dans Visual Studio, appuyez sur la touche F5.

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

La page du composant WebPart s’affiche.
Sélectionnez une zone sur la page du composant WebPart.
En haut de la page, choisissez l’onglet Insérer, puis sélectionnez le bouton Composant WebPart.
Dans le volet Catégories, choisissez le dossier Personnalisé, puis le composant WebPart WebPart1 et sélectionnez le bouton Ajouter.

Le composant WebPart apparaît sur la page.

Test de la propriété personnalisée

Pour remplir la grille de données qui apparaît dans le composant WebPart, spécifiez le chemin du fichier XML contenant les données relatives à chaque employé.

Sélectionnez la flèche qui figure à droite du composant WebPart, puis choisissez Modifier le composant WebPart dans le menu qui s’affiche.

Un volet contenant les propriétés du composant WebPart s’affiche à droite de la page.
Dans ce volet, développez le nœud Divers, entrez le chemin du fichier XML que vous avez créé, puis sélectionnez le bouton Appliquer et le bouton OK.

Vérifiez que la liste des employés s’affiche dans le composant WebPart.

Test du verbe du composant WebPart

Affichez et masquez les employés qui ne sont pas des responsables en sélectionnant un élément qui s’affiche dans le menu d’actions verbales du composant WebPart.

Sélectionnez la flèche qui figure à droite du composant WebPart, puis choisissez Afficher les responsables uniquement dans le menu qui s’affiche.

Seuls les responsables apparaissent dans le composant WebPart.
Sélectionnez à nouveau la flèche, puis choisissez Afficher tous les employés dans le menu qui s’affiche.

Tous les employés apparaissent dans le composant WebPart.

Voir aussi

Création de composants WebPart pour SharePoint Guide pratique : Création d’un composant WebPart SharePoint Guide pratique : Création d’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

Partager via