Procédure pas à pas : création d'un composant WebPart pour SharePoint à l'aide d'un concepteur
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 visuellement un composant WebPart à l'aide d'un modèle de projet SharePoint Composant Visual Web Part dans Visual Studio 2010.
Le composant WebPart propose un affichage de calendrier mensuel, ainsi qu'une case à cocher pour chaque liste de calendriers sur le site. Les utilisateurs peuvent ainsi choisir les listes de calendriers à inclure dans l'affichage de calendrier mensuel en activant les cases à cocher correspondantes.
Cette procédure pas à pas décrit les tâches suivantes :
Création d'un composant WebPart à l'aide du modèle de projet Composant Visual Web Part
Conception d'un composant WebPart à l'aide du concepteur Visual Web Developer dans Visual Studio
Ajout de code pour gérer les événements de contrôles sur 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 de composant WebPart
Commencez par créer un projet de composant WebPart à l'aide du modèle de projet Composant Visual Web Part.
Pour créer un projet de composant Visual Web Part
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. Si votre interface IDE est définie pour utiliser les paramètres de développement Visual Basic, dans le menu Fichier, cliquez sur Nouveau 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 Visual Studio installés, sélectionnez Composant Visual Web Part, 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.
Cliquez sur Terminer pour accepter le site SharePoint local par défaut, ainsi que le niveau de confiance par défaut de la solution.
Par défaut, Visual Web Developer affiche le contrôle utilisateur du projet en mode Source ; vous pouvez ainsi consulter les éléments HTML de la page.
Conception du composant WebPart
Concevez le composant WebPart en faisant glisser des contrôles de la Boîte à outils sur la surface du contrôle utilisateur.
Pour concevoir la disposition du composant WebPart
Dans le concepteur Visual Web Developer, cliquez sur l'onglet Design pour passer en mode Design.
Dans le menu Affichage, cliquez sur Boîte à outils.
Dans la Boîte à outils, à partir du groupe Standard, faites glisser un CheckBoxList et un Button sur le concepteur.
Dans le concepteur, cliquez sur Button.
Dans le menu Affichage, cliquez sur Fenêtre Propriétés.
Dans la fenêtre Propriétés, affectez Update à la propriété Text du bouton.
Gestion des événements de contrôles sur le composant WebPart
Vous pouvez ajouter du code pour que l'utilisateur puisse ajouter des calendriers à l'affichage de calendrier principal.
Pour gérer les événements de contrôles sur le composant WebPart
Dans le concepteur, double-cliquez sur le bouton Mettre à jour.
Le fichier de code du contrôle utilisateur s'ouvre dans l'Éditeur de code et le gestionnaire d'événements Button1_Click s'affiche. Vous ajouterez par la suite du code à ce gestionnaire d'événements.
Ajoutez les instructions suivantes au début du fichier de code du contrôle utilisateur.
Imports Microsoft.SharePoint Imports Microsoft.SharePoint.WebControls
using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls;
Ajoutez la ligne de code suivante à la classe VisualWebPart1userControl. Ce code déclare un contrôle d'affichage de calendrier mensuel.
Private MonthlyCalendarView1 As MonthlyCalendarView
private MonthlyCalendarView MonthlyCalendarView1;
Remplacez la méthode Page_Load de la classe VisualWebPart1UserControl par le code suivant. Ce code exécute les tâches suivantes :
Il ajoute un affichage de calendrier mensuel au contrôle utilisateur.
Il ajoute une case à cocher pour chaque liste de calendriers sur le site.
Il spécifie un modèle pour chaque type d'élément qui figure dans l'affichage de calendrier.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load MonthlyCalendarView1 = New MonthlyCalendarView() Me.Controls.Add(MonthlyCalendarView1) Dim items As New SPCalendarItemCollection() Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context) If CheckBoxList1.Items.Count = 0 Then Dim listItem As SPList For Each listItem In thisWeb.Lists If listItem.BaseTemplate = SPListTemplateType.Events Then CheckBoxList1.Items.Add(New ListItem(listItem.Title)) End If Next listItem End If MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate" MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate" MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate" End Sub
protected void Page_Load(object sender, EventArgs e) { MonthlyCalendarView1 = new MonthlyCalendarView(); this.Controls.Add(MonthlyCalendarView1); SPCalendarItemCollection items = new SPCalendarItemCollection(); SPWeb thisWeb = SPControl.GetContextWeb(Context); if (CheckBoxList1.Items.Count == 0) { foreach (SPList listItem in thisWeb.Lists) { if (listItem.BaseTemplate == SPListTemplateType.Events) { CheckBoxList1.Items.Add(new ListItem(listItem.Title)); } } } MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"; MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"; MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"; }
Remplacez la méthode Button1_Click de la classe VisualWebPart1UserControl par le code suivant. Ce code ajoute des éléments issus de chaque calendrier sélectionné à l'affichage de calendrier principal.
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Dim items As New SPCalendarItemCollection() Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context) Dim item As ListItem For Each item In CheckBoxList1.Items If item.Selected = True Then Dim calendarList As SPList = thisWeb.Lists(item.Text) Dim dtStart As DateTime = DateTime.Now.AddDays(-7) Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7) Dim query As New SPQuery() query.Query = [String].Format("<Query>" + "<Where><And>" + _ "<Geq><FieldRef Name=""{0}"" />" + _ "<Value Type=""DateTime"">{1}</Value></Geq>" + _ "<Leq><FieldRef Name=""{0}"" />" + _ "<Value Type=""DateTime"">{2}</Value></Leq>" + _ "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _ "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString()) Dim listItem As SPListItem For Each listItem In calendarList.GetItems(query) Dim calItem As New SPCalendarItem() With calItem .ItemID = listItem("ID").ToString() .Title = listItem("Title").ToString() .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian) .StartDate = CType(listItem("Start Time"), DateTime) .ItemID = listItem.ID.ToString() .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title) .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title) .EndDate = CType(listItem("End Time"), DateTime) .Description = listItem("Description").ToString() End With If Not (listItem("Location") Is Nothing) Then calItem.Location = listItem("Location").ToString() End If items.Add(calItem) Next listItem MonthlyCalendarView1.DataSource = items End If Next item End Sub
protected void Button1_Click(object sender, EventArgs e) { SPCalendarItemCollection items = new SPCalendarItemCollection(); SPWeb thisWeb = SPControl.GetContextWeb(Context); foreach (ListItem item in CheckBoxList1.Items) { if (item.Selected == true) { SPList calendarList = thisWeb.Lists[item.Text]; DateTime dtStart = DateTime.Now.AddDays(-7); DateTime dtEnd = dtStart.AddMonths(1).AddDays(7); SPQuery query = new SPQuery(); query.Query = String.Format( "<Query>" + "<Where><And>" + "<Geq><FieldRef Name=\"{0}\" />" + "<Value Type=\"DateTime\">{1}</Value></Geq>" + "<Leq><FieldRef Name=\"{0}\" />" + "<Value Type=\"DateTime\">{2}</Value></Leq>" + "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" + "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString()); foreach (SPListItem listItem in calendarList.GetItems(query)) { SPCalendarItem calItem = new SPCalendarItem(); calItem.ItemID = listItem["ID"].ToString(); calItem.Title = listItem["Title"].ToString(); calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian); calItem.StartDate = (DateTime)listItem["Start Time"]; calItem.ItemID = listItem.ID.ToString(); calItem.WorkSpaceLink = String.Format( "/Lists/{0}/DispForm.aspx", calendarList.Title); calItem.DisplayFormUrl = String.Format( "/Lists/{0}/DispForm.aspx", calendarList.Title); calItem.EndDate = (DateTime)listItem["End Time"]; calItem.Description = listItem["Description"].ToString(); if (listItem["Location"] != null) { calItem.Location = listItem["Location"].ToString(); } items.Add(calItem); } MonthlyCalendarView1.DataSource = items; } } }
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. Pour tester ce projet, vous allez effectuer les tâches suivantes :
ajouter un événement à chacune des deux listes de calendriers ;
ajouter le composant WebPart à une page WebPart ;
sélectionner les listes à inclure dans l'affichage de calendrier mensuel.
Pour ajouter des événements aux listes de calendriers sur le site
Dans Visual Studio, appuyez sur F5.
Le site SharePoint s'ouvre et la barre de lancement rapide de Microsoft SharePoint Foundation 2010 s'affiche dans la page.
Dans la barre de lancement rapide, sous Listes, cliquez sur Calendrier.
La page Calendrier s'affiche.
Cliquez sur Événements, puis sur Nouvel événement.
Dans la zone Titre, tapez Événement dans le calendrier par défaut, puis cliquez sur Enregistrer.
Cliquez sur Actions du site, puis sur Autres options.
Dans la page Créer, cliquez sur Calendrier, nommez le calendrier, puis cliquez sur Créer.
La page Calendrier personnalisé s'affiche.
Ajoutez un nouvel événement au calendrier personnalisé nommé Événement dans le calendrier personnalisé.
Pour ajouter le composant WebPart à une page WebPart
Cliquez sur Actions du site, puis sur Autres options.
Dans la page Créer, cliquez sur Page de composants WebPart, puis 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 l'onglet Insérer, puis sur WebPart.
Cliquez sur le dossier Personnalisé, puis sur le composant WebPart VisualWebPart1 et sur Ajouter.
Le composant WebPart s'affiche dans la page. Les contrôles suivants s'affichent sur le composant WebPart :
Affichage de calendrier mensuel
Bouton Mettre à jour
Case à cocher Calendrier
Case à cocher Calendrier personnalisé
Pour sélectionner les listes à inclure dans l'affichage de calendrier mensuel
Dans le composant WebPart, sélectionnez les calendriers que vous souhaitez inclure dans l'affichage de calendrier mensuel, puis cliquez sur Mettre à jour.
Les événements de tous les calendriers sélectionnés figurent dans l'affichage de calendrier mensuel.
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