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

    [!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 :

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 en sélectionnant l'option Exécuter en tant qu'administrateur.

  2. Sur les hommes défendez, choisissez Fichier, Nouveau, Projet.

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

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

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

  1. Dans la barre de menus, sélectionnez Projet, 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 sélectionnez le nœud 2010 .

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

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

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

    • 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

  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, dans la barre de menus, sélectionnez Fichier, Enregistrer sous.

  3. Dans la boîte de dialogue Enregistrer sous , dans la liste Type de fichier , choisissez Tous les fichiers.

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

  5. Choisissez un dossier à l'aide de le bouton Parcourir les dossiers , puis choisissez le bouton Enregistrer .

  6. Dans Visual Studio, choisissez la clé F5 .

    Le site SharePoint s'ouvre.

  7. Dans le menu Actions du site , choisissez Autres options.

  8. Dans la page Créer , choisissez le type Page de composants WebPart , puis choisissez le bouton Créer .

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

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

  11. En haut de la page, sélectionnez l'onglet Insérer , puis choisissez le bouton Composant WebPart .

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

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

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

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

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