Panduan: Membuat bagian web untuk SharePoint dengan menggunakan perancang

Jika Anda membuat komponen web untuk situs SharePoint, pengguna Anda dapat langsung mengubah isi, tampilan, dan perilaku halaman di situs tersebut dengan menggunakan browser. Panduan ini memperlihatkan kepada Anda cara membuat bagian web secara visual dengan menggunakan templat proyek SharePoint Visual Web Part di Visual Studio.

Bagian web yang akan Anda buat menampilkan tampilan kalender bulanan dan kotak centang untuk setiap daftar kalender di situs. Pengguna dapat menentukan daftar kalender mana yang akan disertakan dalam tampilan kalender bulanan dengan memilih kotak centang.

Panduan ini mengilustrasikan tugas-tugas berikut:

• Membuat bagian web dengan menggunakan templat proyek Bagian Web Visual.

• Merancang bagian web dengan menggunakan perancang Visual Web Developer di Visual Studio.

• Menambahkan kode untuk menangani peristiwa kontrol pada bagian web.

• Menguji bagian web di SharePoint.

  Catatan

  Komputer Anda mungkin menampilkan nama atau lokasi yang berbeda untuk beberapa elemen antarmuka pengguna untuk Visual Studio dalam instruksi berikut. Edisi Visual Studio yang Anda miliki dan setelan yang Anda gunakan menentukan elemen-elemen ini. Lihat Mempersonalisasi IDE Visual Studio.

Prasyarat

Anda memerlukan komponen berikut untuk menyelesaikan panduan ini:

• Edisi Windows dan SharePoint yang didukung.

Membuat proyek bagian web

Pertama, buat proyek bagian web dengan menggunakan templat proyek Bagian Web Visual.

1. Mulai Visual Studio dengan menggunakan opsi Run as Administrator.

2. Dari bilah menu, pilih File>New>Project.

3. Pada dialog Buat Proyek Baru pilih SharePoint Kosongkan Proyek* untuk versi SharePoint tertentu yang telah Anda instal. Misalnya, jika Anda memiliki penginstalan SharePoint 2019, pilih templat SharePoint 2019 - Kosongkan Proyek.

   Catatan

   Anda juga dapat mencari templat dengan mengetik SharePoint di kotak teks Pencarian di bagian atas dialog Buat Proyek Baru. Anda juga dapat memfilter daftar templat untuk memperlihatkan hanya templat untuk Office dan SharePoint dengan memilih "Office" di kotak drop-down jenis Proyek. Untuk informasi selengkapnya, lihat Membuat proyek baru di Visual Studio.

4. Dalam kotak Nama, masukkan TestProject1, lalu pilih tombol Buat.

5. Di bagian Apa tingkat kepercayaan untuk solusi SharePoint ini?, pilih tombol opsi Sebarkan sebagai solusi farm.

6. Pilih tombol Selesai untuk menerima situs SharePoint lokal default.

Merancang bagian web

Desain bagian web dengan menambahkan kontrol dari Kotak Alat ke permukaan perancang Pengembang Web Visual.

1. Pada desainer Pengembang Web Visual, pilih tab Desain untuk beralih ke tampilan Desain.

2. Pada bilah menu, pilih Tampilan>Kotak Alat.

3. Di node StandarKotak Alat, pilih kontrol CheckBoxList, lalu lakukan salah satu langkah berikut:

   • Buka menu pintasan untuk kontrol CheckBoxList, pilih Salin, buka menu pintasan untuk baris pertama di perancang, lalu pilih Tempel.

   • Seret kontrol CheckBoxList dari Kotak Alat, dan sambungkan kontrol ke baris pertama dalam perancang.

4. Ulangi langkah sebelumnya, tetapi pindahkan Tombol ke baris berikutnya dari perancang.

5. Di perancang, pilih tombol Tombol1.

6. Pada bilah menu, pilih Tampilkan> Jendela Properti.

   Jendela Properti terbuka.

7. Di properti Teks tombol, masukkan Perbarui.

Menghandel peristiwa kontrol pada bagian web

Tambahkan kode yang memungkinkan pengguna menambahkan kalender ke tampilan kalender master.

1. Lakukan salah satu langkah berikut:

   • Di perancang, klik dua kali tombol Perbarui.

   • Di jendela Properti untuk tombol Perbarui, pilih tombol Peristiwa. Di properti Klik, masukkan Button1_Click, lalu pilih tombol Enter.

     File kode kontrol pengguna terbuka di Editor Kode dan penanganan aktivitas Button1_Click muncul. Nantinya, Anda akan menambahkan kode ke penanganan aktivitas ini.

2. Tambahkan pernyataan berikut ke bagian atas file kode kontrol pengguna.

   C#

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

   VB

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

3. Tambahkan baris kode berikut ke metode dalam kelas VisualWebPart1. Kode ini mendeklarasikan kontrol tampilan kalender bulanan.

   C#

   private MonthlyCalendarView MonthlyCalendarView1;
   

   VB

   Private MonthlyCalendarView1 As MonthlyCalendarView
   

4. Ganti metode Page_Load kelas VisualWebPart1 dengan kode berikut. Kode ini melakukan tugas-tugas berikut:

   • Menambahkan tampilan kalender bulanan ke kontrol pengguna.

   • Menambahkan kotak centang untuk setiap daftar kalender di situs.

   • Menentukan templat untuk setiap jenis item yang muncul dalam tampilan kalender.

     C#

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

     VB

     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
     

   ---

5. Ganti metode Button1_Click kelas VisualWebPart1 dengan kode berikut. Kode ini menambahkan item dari setiap kalender yang dipilih ke tampilan kalender master.

   C#

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

   VB

   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
   

Menguji komponen web

Saat Anda menjalankan proyek, situs SharePoint terbuka. Bagian web secara otomatis ditambahkan ke Galeri Bagian Web di SharePoint. Untuk menguji proyek ini, Anda akan melakukan tugas-tugas berikut:

• Tambahkan peristiwa ke masing-masing dari dua daftar kalender terpisah.
• Tambahkan bagian web ke halaman komponen web.
• Tentukan daftar yang akan disertakan dalam tampilan kalender bulanan.

Untuk menambahkan acara ke daftar kalender di situs

1. Di Visual Studio, pilih kunci F5.

   Situs SharePoint terbuka, dan bilah Luncur Cepat Microsoft SharePoint Foundation muncul di halaman.

2. Pada bilah Luncur Cepat, di bawah Daftar, pilih tautan Kalender.

   Halaman Kalender muncul.

   Jika Anda tidak ada tautan Kalender yang muncul di bilah Luncur Cepat, pilih tautan Konten Situs. Jika halaman Konten Situs tidak memperlihatkan item Kalender, buatlah.

3. Pada halaman Kalender, pilih hari, lalu pilih tautan Tambahkan di hari yang dipilih untuk menambahkan acara.

4. Dalam kotak Judul, masukkan Acara di kalender default, lalu pilih tombol Simpan.

5. Pilih tautan Konten Situs, lalu pilih petak Tambahkan aplikasi.

6. Pada halaman Buat, pilih jenis Kalender, beri nama kalender, lalu pilih tombol Buat.

7. Tambahkan acara ke kalender baru, beri nama acara Acara di kalender kustom, lalu pilih tombol Simpan.

Untuk menambahkan bagian web ke halaman komponen web

1. Pada halaman Konten Situs, buka folder Halaman Situs.

2. Pada pita, pilih tab File, buka menu Dokumen Baru, lalu pilih perintah Halaman Bagian Web.

3. Pada halaman Halaman Bagian Web Baru, beri nama halaman SampleWebPartPage.aspx, lalu pilih tombol Buat.

   Halaman bagian web muncul.

4. Di zona atas halaman bagian web, pilih tab Sisipkan, lalu pilih tombol Bagian Web.

5. Pilih folder Kustom, pilih bagian web VisualWebPart1, lalu pilih tombol Tambahkan.

   Bagian web muncul di halaman. Kontrol berikut ini muncul pada bagian web:

   • Tampilan kalender bulanan.

   • Tombol Perbarui.

   • Kotak centang Kalender.

   • Kotak centang Kalender Kustom.

Untuk menentukan daftar yang akan disertakan dalam tampilan kalender bulanan

Di bagian web, tentukan kalender yang ingin Anda sertakan dalam tampilan kalender bulanan, lalu pilih tombol Perbarui.

Acara dari semua kalender yang Anda tentukan muncul dalam tampilan kalender bulanan.

Baca juga

Buat komponen web untuk SharePointCara: Membuat panduan bagian web SharePoint: Membuat bagian web untuk SharePoint