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

Article
08/10/2011

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

Autres ressources

Création de composants WebPart pour SharePoint

Partager via