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

Article
03/04/2013

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 de le modèle de projet Composant Visual Web Part SharePoint dans Visual Studio.

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

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

Éditions de Microsoft Windows et SharePoint prises en charge.Pour plus d'informations, consultez Configuration requise pour développer des solutions SharePoint.
Visual Studio 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 en sélectionnant l'option Exécuter en tant qu'administrateur.
Dans la barre de menus, sélectionnez Fichier, Nouveau, Projet.Si votre interface IDE est définie pour utiliser les paramètres de développement Visual Basic, dans la barre de menus, sélectionnez Fichier, Nouveau projet.

La boîte de dialogue Nouveau projet s'affiche.
Dans la boîte de dialogue Nouveau projet , sous Visual C# ou Visual Basic, développez le nœud SharePoint , puis sélectionnez le nœud 2010 .
Dans le volet Modèles Visual Studio installés , choisissez le modèle Composant Visual WebPart SharePoint 2010 , puis choisissez le bouton OK .

L'Assistant Personnalisation de SharePoint s'affiche.À l'aide de cet assistant, vous pouvez spécifier le site que vous utiliserez pour déboguer le projet et le niveau de confiance de la solution.
Dans la section Quel est le niveau de confiance de cette solution SharePoint ? , sélectionnez la case d'option Déployer en tant que solution de batterie .
Choisissez le bouton Terminer pour accepter le site SharePoint local par défaut.

Conception du composant WebPart

Concevez du composant WebPart en ajoutant des contrôles Boîte à outils sur la surface du contrôle utilisateur.

Pour concevoir la disposition du composant WebPart

Dans le concepteur Visual Web Developer, sélectionnez l'onglet Design pour basculer en mode Design.
Dans la barre de menus, sélectionnez Affichage, Boîte à outils.
Dans le nœud StandardBoîte à outils, choisissez le contrôle CheckBoxList puis effectuez l'une des étapes suivantes :
- Ouvrez le menu contextuel du contrôle CheckBoxList et choisissez Copier, sélectionnez la première ligne dans le concepteur, ouvrez le menu contextuel de la ligne, puis choisissez Coller.
- Faites glisser le contrôle CheckBoxListBoîte à outils et connectez -le à la première ligne dans le concepteur.
Répétez l'étape précédente, mais déplacez un bouton à la ligne suivante du concepteur.
Dans le concepteur, cliquez sur le bouton Bouton1 .
Dans la barre de menus, sélectionnez Affichage, Fenêtre Propriétés.

Cela a pour effet d'ouvrir la fenêtre Propriétés.
Dans la propriété Texte du bouton, écrivez la mise à jour.

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

Effectuez l'un des ensembles d'étapes suivants :
- Dans le concepteur, double-cliquez sur le bouton Mettre à jour .
- Dans la fenêtre Propriétés pour le bouton Mettre à jour , choisissez le bouton Événements .Dans la propriété Cliquer , entrez Button1_Click, puis choisissez la touche ENTRÉE.
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.Ultérieurement, vous ajouterez le code au 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 VisualWebPart1.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 VisualWebPart1 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 VisualWebPart1 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 effectuerez les tâches suivantes :

ajouter un événement à chacune des deux listes de calendriers ;
ajouter le composant WebPart à une page WebPart ;
Spécifiez les listes à inclure dans l'affichage de calendrier mensuel.

Pour ajouter des événements aux listes de calendriers sur le site

Dans Visual Studio, choisissez la touche F5.

Le site SharePoint s'ouvre, et la barre de lancement rapide d' Microsoft SharePoint Foundation 2010 apparaît sur la page.
Dans la barre de lancement rapide, sous Listes, cliquez sur le lien Calendrier .

La page Calendrier s'affiche.
Sélectionnez l'onglet Événements , puis choisissez Nouvel événement sur le ruban.
Dans la zone Titre , entrez l'événement dans le calendrier par défaut, puis choisissez le bouton Enregistrer .
Dans le menu Actions du site , choisissez la commande Autres options .
Dans la page Créer , choisissez le type Calendrier , nommez le calendrier, puis choisissez le bouton Créer .

La page Calendrier personnalisé s'affiche.
Ajoutez un événement dans le calendrier personnalisé, nommez l'événement d'événement dans le calendrier personnalisé, puis choisissez le bouton Enregistrer .

Pour ajouter le composant WebPart à une page WebPart

Dans le menu Actions du site , choisissez la commande Autres options .
Dans la page Créer , choisissez le type Page de composants WebPart , puis choisissez le bouton Créer .
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.
Choisissez une zone sur la page WebPart.
En haut de la page, sélectionnez l'onglet Insérer , puis choisissez le bouton Composant WebPart .
Sélectionnez le dossier Personnalisé , choisissez le composant WebPart VisualWebPart1 , puis choisissez le bouton 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 spécifier les listes à inclure dans l'affichage de calendrier mensuel

Dans le composant WebPart, spécifiez les calendriers que vous souhaitez inclure dans l'affichage de calendrier mensuel, puis choisissez le bouton Mettre à jour .

Les événements de tous les calendriers que vous avez spécifiés apparaissent 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