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 :
É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