Partager via


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

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 :

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

  1. Démarrez Visual Studio 2010 en sélectionnant l'option Exécuter en tant qu'administrateur.

  2. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.

    La boîte de dialogue Nouveau projet s'affiche.

  3. 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.

  4. 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.

  5. 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

  1. Dans le menu Projet, cliquez sur Ajouter un nouvel élément.

  2. 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.

  3. 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

  1. 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.

  2. Ajoutez les instructions suivantes au début du fichier de code du composant WebPart.

    Imports System.Data
    
    using System.Data;
    
  3. 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;
    
  4. 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;
        }
    }
    
  5. 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();
    }
    
  6. 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

  1. 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>
    
  2. Dans le Bloc-notes, cliquez sur Fichier, puis sur Enregistrer sous.

  3. Dans la boîte de dialogue Enregistrer sous, dans la liste déroulante Type, sélectionnez Tous les fichiers.

  4. Dans la zone Nom de fichier, tapez data.xml.

  5. Sélectionnez un dossier à l'aide du bouton Parcourir les dossiers, puis cliquez sur Enregistrer.

  6. Dans Visual Studio, appuyez sur F5.

    Le site SharePoint s'ouvre.

  7. Cliquez sur Actions du site, puis sur Autres options.

  8. Dans la page Créer, sélectionnez Page de composants WebPart, puis cliquez sur Créer.

  9. 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.

  10. Sélectionnez une zone sur la page de composants WebPart.

  11. En haut de la page, cliquez sur Insérer, puis sur WebPart.

  12. 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

  1. 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.

  2. 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

  1. 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.

  2. 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