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

Article
06/19/2023

Si vous créez des composants WebPart pour un site SharePoint, vos utilisateurs peuvent modifier directement le contenu, l’apparence et le comportement des pages de ce site à l’aide d’un navigateur. Cette procédure pas à pas vous montre comment créer visuellement un composant WebPart à l’aide du modèle de projet visual WebPart SharePoint dans Visual Studio.

Le composant WebPart que vous allez créer affiche un calendrier mensuel et une case à cocher pour chaque liste de calendriers sur le site. Les utilisateurs peuvent spécifier les listes de calendriers à inclure dans l’affichage calendrier mensuel en sélectionnant les cases à cocher.

Cette procédure pas à pas décrit les tâches suivantes :

Création d’un composant WebPart à l’aide du modèle de projet Visual WebPart.
Conception du composant WebPart à l’aide du concepteur Visual Web Developer dans Visual Studio.
Ajout de code pour gérer les événements des 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. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Consultez Personnaliser l’IDE Visual Studio.

Prérequis

Vous devez disposer des éléments suivants pour exécuter cette procédure pas à pas :

Éditions prises en charge de Windows et SharePoint.

Créer un projet de composant WebPart

Tout d’abord, créez un projet de composant WebPart à l’aide du modèle de projet Visual WebPart.

Démarrez Visual Studio à l’aide de l’option Exécuter en tant qu’administrateur.
Dans la barre de menus, choisissez Fichier>Nouveau>Projet.
Dans la boîte de dialogue Créer un projet, sélectionnez Projet vide SharePoint* pour la version de SharePoint que vous avez installée. Par exemple, si vous avez installé SharePoint 2019, sélectionnez le modèle SharePoint 2019 - Projet vide.

Notes

Vous pouvez également rechercher des modèles en tapant SharePoint dans la zone de texte Rechercher en haut de la boîte de dialogue Créer un projet. Vous pouvez également filtrer la liste des modèles afin d’afficher uniquement les modèles pour Office et SharePoint en sélectionnant « Office » dans la liste déroulante Type de projet. Pour plus d’informations, consultez Créer un nouveau projet dans Visual Studio.
Dans la zone Nom, entrez TestProject1, puis choisissez le bouton Créer.
Dans la section Quel est le niveau d’approbation de cette solution SharePoint ?, choisissez le bouton d’option Déployer en tant que solution de batterie de serveurs.
Choisissez le bouton Terminer pour accepter le site SharePoint local par défaut.

Conception du composant WebPart

Concevez le composant WebPart en ajoutant des contrôles de la boîte à outils à la zone du concepteur Visual Web Developer.

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

La fenêtre Propriétés apparaît.
Dans la propriété Text du bouton, entrez Mettre à jour.

Gestion des événements des contrôles sur le composant WebPart

Ajoutez du code qui permet à l’utilisateur d’ajouter des calendriers au mode calendrier principal.

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 du bouton Mettre à jour, choisissez le bouton Événements. Dans la propriété Click, entrez Button1_Click, puis appuyez sur 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. Plus tard, vous allez ajouter du code à ce gestionnaire d’événements.

Ajoutez les instructions suivantes en haut du fichier de code de contrôle utilisateur.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports System.Web.UI.WebControls

Ajoutez la ligne de code suivante à la classe VisualWebPart1. Ce code déclare un contrôle du mode calendrier mensuel.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Remplacez la méthode Page_Load de la classe VisualWebPart1 par le code suivant. Ce code effectue les tâches suivantes :

Ajoute un affichage calendrier mensuel au contrôle utilisateur.
Ajoute une case à cocher pour chaque liste de calendriers sur le site.

Spécifie un modèle pour chaque type d’élément qui apparaît dans le mode calendrier.

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";
}

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

Remplacez la méthode Button1_Click de la classe VisualWebPart1 par le code suivant. Ce code ajoute des éléments de chaque calendrier sélectionné au mode calendrier principal.

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;
        }

    }

}

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

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 :

Ajoutez un événement à chacune des deux listes de calendriers.
Ajoutez le composant WebPart à une page de composants WebPart.
Spécifiez les listes à inclure dans le mode calendrier mensuel.

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

Dans Visual Studio, appuyez sur la touche F5.

Le site SharePoint s’ouvre et la barre de lancement rapide Microsoft SharePoint Foundation s’affiche sur la page.
Dans la barre Lancement rapide, sous Listes, sélectionnez le lien Calendrier.

La page Calendrier s’affiche.

Si aucun lien Calendrier n’apparaît dans la barre de lancement rapide, choisissez le lien Contenu du site. Si la page Contenu du site n’affiche pas d’élément Calendrier, créez-en un.
Sur la page Calendrier, choisissez un jour, puis choisissez le lien Ajouter dans la journée sélectionnée pour ajouter un événement.
Dans la zone Titre, entrez Événement dans le calendrier par défaut, puis appuyez sur le bouton Enregistrer.
Choisissez le lien Contenu du site, puis choisissez la vignette Ajouter une application.
Dans la page Créer, choisissez le type de Calendrier, nommez le calendrier, puis cliquez sur le bouton Créer.
Ajoutez un événement au nouveau calendrier, nommez l’événement Événement dans le calendrier personnalisé, puis cliquez sur le bouton Enregistrer.

Pour ajouter le composant WebPart à une page de composants WebPart

Dans la page Contenu du site, ouvrez le dossier Pages de site.
Dans le ruban, choisissez l’onglet Fichiers, ouvrez le menu Nouveau document, puis choisissez la commande Page de composants WebPart.
Sur la page Nouvelle page de composants WebPart, nommez la page SampleWebPartPage.aspx, puis cliquez sur le bouton Créer.

La page du composant WebPart s’affiche.
Dans la zone supérieure de la page du composant WebPart, choisissez l’onglet Insertion, puis le bouton Composant WebPart.
Choisissez le dossier Personnalisé, choisissez le composant WebPart VisualWebPart1, puis cliquez sur le bouton Ajouter.

Le composant WebPart apparaît sur la page. Les contrôles suivants s’affichent sur le composant WebPart :
- Affichage calendrier mensuel.
- Bouton Mettre à jour.
- Case à cocher Calendrier.
- Case à cocher Calendrier personnalisé.

Pour spécifier des listes à inclure dans l’affichage calendrier mensuel

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

Les événements de tous les calendriers que vous avez spécifiés apparaissent dans l’affichage calendrier mensuel.

Voir aussi

Créer des composants WebPart pour SharePoint Guide pratique pour créer un composant WebPart SharePoint Procédure pas à pas : créer un composant WebPart pour SharePoint

Partager via