Panduan: Membuat komponen web untuk SharePoint

Komponen Web memungkinkan pengguna untuk langsung mengubah isi, tampilan, dan perilaku halaman situs SharePoint dengan menggunakan browser. Panduan ini memperlihatkan kepada Anda cara membuat Komponen Web dengan menggunakan templat item Komponen Web di Visual Studio 2010.

Komponen Web menampilkan karyawan dalam grid data. Pengguna menentukan lokasi file yang berisi data karyawan. Pengguna juga dapat memfilter grid data sehingga karyawan yang merupakan manajer hanya muncul dalam daftar.

Panduan ini mengilustrasikan tugas-tugas berikut:

• Membuat Komponen Web dengan menggunakan templat item Komponen Web Visual Studio.

• Membuat properti yang dapat diatur oleh pengguna Komponen Web. Properti ini menentukan lokasi file data karyawan.

• Merender isi dalam Komponen Web dengan menambahkan kontrol ke kumpulan kontrol Komponen Web.

• Membuat item menu baru, yang disebut sebagai kata kerja, yang muncul di menu kata kerja dari komponen Web yang dirender. Kata kerja memungkinkan pengguna untuk mengubah data yang muncul di Komponen Web.

• Menguji Komponen Web di SharePoint.

  Catatan

  Komputer Anda mungkin memperlihatkan nama atau lokasi yang berbeda untuk beberapa elemen antarmuka pengguna Visual Studio dalam petunjuk berikut. Edisi Visual Studio yang Anda miliki dan setelan yang Anda gunakan menentukan elemen-elemen ini. Untuk informasi selengkapnya, lihat Mempersonalisasi IDE Visual Studio.

Prasyarat

• Edisi Microsoft Windows dan SharePoint yang didukung.

• Visual Studio 2017 atau Azure DevOps Services.

Membuat proyek SharePoint kosong

Pertama, buat proyek SharePoint Kosong. Nantinya, Anda akan menambahkan Komponen Web ke proyek dengan menggunakan templat item Komponen Web.

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

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

3. Dalam kotak dialog New Project, perluas node SharePoint di bawah bahasa yang ingin Anda gunakan, lalu pilih node 2010.

4. Di panel Templat, pilih Project SharePoint 2010, lalu pilih tombol OK.

   Wizard Penyesuaian SharePoint muncul. Panduan ini memungkinkan Anda memilih situs yang akan Anda gunakan untuk men-debug proyek dan tingkat kepercayaan solusi.

5. Pilih tombol opsi Sebarkan sebagai solusi ladang, lalu pilih tombol Selesai untuk menerima situs SharePoint lokal default.

Menambahkan komponen web ke proyek

Tambahkan item Komponen Web ke proyek. Item Komponen Web menambahkan file kode Komponen Web. Nantinya, Anda akan menambahkan kode ke file kode Komponen Web untuk merender isi Komponen Web.

1. Pada bilah menu, pilih Project>Add New Item.

2. Dalam kotak dialog Tambahkan Item Baru, di panel Templat Terinstal, perluas node SharePoint, lalu pilih node 2010.

3. Dalam daftar templat SharePoint, pilih templat Komponen Web, lalu pilih tombol Tambahkan.

   Item Komponen Web muncul di Penjelajah Solusi.

Merender konten di komponen web

Anda bisa menentukan kontrol mana yang ingin Anda munculkan di Komponen Web dengan menambahkannya ke kumpulan kontrol kelas Komponen Web.

1. Di Penjelajah Solusi, buka WebPart1.vb (dalam Visual Basic) atau WebPart1.cs (dalam C#).

   File kode Komponen Web terbuka di Editor Kode.

2. Tambahkan arahan berikut ke bagian atas file kode Komponen Web.

   C#

   using System.Data;
   

   VB

   Imports System.Data
   

3. Tambahkan kode berikut ke kelas WebPart1. Kode ini mendeklarasikan bidang berikut:

   • Grid data untuk menampilkan karyawan di Komponen Web.

   • Teks yang muncul pada kontrol yang digunakan untuk memfilter grid data.

   • Label yang menampilkan kesalahan jika grid data tidak dapat menampilkan data.

   • String yang berisi jalur file data karyawan.

     C#

     private DataGrid grid;
     private static string verbText = "Show Managers Only";
     private Label errorMessage = new Label();
     protected string xmlFilePath;
     

     VB

     Private grid As DataGrid
     Private Shared verbText As String = "Show Managers Only"
     Private errorMessage As New Label()
     Protected xmlFilePath As String
     

   ---

4. Tambahkan kode berikut ke kelas WebPart1. Kode ini menambahkan properti khusus'' bernama DataFilePath ke Komponen Web. Properti khusus adalah properti yang dapat diatur dalam SharePoint oleh pengguna. Properti ini mendapatkan dan mengatur lokasi file data XML yang digunakan untuk mengisi kisi data.

   C#

   [Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
   WebDisplayName("Path to Employee Data File"),
   WebDescription("Location of the XML file that contains employee data")]
   public string DataFilePath
   {
       get
       {
           return xmlFilePath;
       }
       set
       {
           xmlFilePath = value;
       }
   }
   

   VB

   <Personalizable(PersonalizationScope.[Shared]), _
       WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
       WebDescription("Location of the XML file that contains employee data")> _
   Public Property DataFilePath() As String
       Get
           Return xmlFilePath
       End Get
       Set(ByVal value As String)
           xmlFilePath = value
       End Set
   End Property
   

5. Ganti metode CreateChildControls dengan kode berikut. Kode ini melakukan tugas-tugas berikut:

   • Menambahkan grid data dan label yang Anda deklarasikan di langkah sebelumnya.

   • Mengikat grid data ke file XML yang berisi data karyawan.

     C#

     protected override void CreateChildControls()
     {
         // Define the grid control that displays employee data in the Web Part.
         grid = new DataGrid();
         grid.Width = Unit.Percentage(100);
         grid.GridLines = GridLines.Horizontal;
         grid.HeaderStyle.CssClass = "ms-vh2";
         grid.CellPadding = 2;
         grid.BorderWidth = Unit.Pixel(5);
         grid.HeaderStyle.Font.Bold = true;
         grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
     
         // Populate the grid control with data in the employee data file.
         try
         {
             DataSet dataset = new DataSet();
             dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
             grid.DataSource = dataset;
             grid.DataBind();
         }
         catch (Exception x)
         {
             errorMessage.Text += x.Message;
         }
     
         // Add control to the controls collection of the Web Part.
         Controls.Add(grid);
         Controls.Add(errorMessage);
         base.CreateChildControls();
     }
     

     VB

     Protected Overloads Overrides Sub CreateChildControls()
     
         'Define the grid control that displays employee data in the Web Part.
         grid = New DataGrid()
         With grid
             .Width = Unit.Percentage(100)
             .GridLines = GridLines.Horizontal
             .HeaderStyle.CssClass = "ms-vh2"
             .CellPadding = 2
             .BorderWidth = Unit.Pixel(5)
             .HeaderStyle.Font.Bold = True
             .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
         End With
     
     
     
         'Populate the grid control with data in the employee data file.
         Try
             Dim dataset As New DataSet()
             dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
             grid.DataSource = dataset
             grid.DataBind()
         Catch x As Exception
             errorMessage.Text += x.Message
         End Try
     
         'Add control to the controls collection of the Web Part.
         Controls.Add(grid)
         Controls.Add(errorMessage)
         MyBase.CreateChildControls()
     
     End Sub
     

   ---

6. Tambahkan metode berikut ke kelas WebPart1. Kode ini melakukan tugas-tugas berikut:

   • Membuat kata kerja yang muncul di menu kata kerja Komponen Web dari Komponen Web yang dirender.

   • Menangani peristiwa yang dimunculkan saat pengguna memilih kata kerja di menu kata kerja. Kode ini memfilter daftar karyawan yang muncul di grid data.

     C#

     public override WebPartVerbCollection Verbs
     {
         get
         {
             WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
                 new WebPartEventHandler(CustomVerbEventHandler));
     
             customVerb.Text = verbText;
             customVerb.Description = "Shows only employees that are managers";
     
             WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };
     
             return new WebPartVerbCollection(base.Verbs, newVerbs);
         }
     }
     
     protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
     {
         int titleColumn = 2;
     
         foreach (DataGridItem item in grid.Items)
         {
             if (item.Cells[titleColumn].Text != "Manager")
             {
                 if (item.Visible == true)
                 {
                     item.Visible = false;
                 }
                 else
                 {
                     item.Visible = true;
                 }
             }
     
         }
         if (verbText == "Show Managers Only")
         {
             verbText = "Show All Employees";
         }
         else
         {
             verbText = "Show Managers Only";
         }
     }
     

     VB

     Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
         Get
             Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
                 New WebPartEventHandler(AddressOf CustomVerbEventHandler))
     
             customVerb.Text = verbText
             customVerb.Description = "Shows only employees that are managers"
     
             Dim newVerbs() As WebPartVerb = {customVerb}
     
             Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
         End Get
     End Property
     
     Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
         Dim titleColumn As Integer = 2
     
         Dim item As DataGridItem
         For Each item In grid.Items
             If item.Cells(titleColumn).Text <> "Manager" Then
                 If item.Visible = True Then
                     item.Visible = False
                 Else
                     item.Visible = True
                 End If
             End If
         Next item
         If verbText = "Show Managers Only" Then
             verbText = "Show All Employees"
         Else
             verbText = "Show Managers Only"
         End If
     End Sub
     

   ---

Menguji komponen web

Saat Anda menjalankan proyek, situs SharePoint terbuka. Komponen Web secara otomatis ditambahkan ke Galeri Komponen Web di SharePoint. Anda bisa menambahkan Komponen Web ke halaman Komponen Web mana pun.

1. Tempelkan XML berikut ke dalam file. File XML ini berisi data sampel yang akan muncul di Komponen Web.

   <?xml version="1.0" encoding="utf-8" ?>
       <employees xmlns="http://schemas.microsoft.com/vsto/samples">
          <employee>
              <name>David Hamilton</name>
              <hireDate>2001-05-11</hireDate>
              <title>Sales Associate</title>
          </employee>
          <employee>
              <name>Karina Leal</name>
              <hireDate>1999-04-01</hireDate>
              <title>Manager</title>
          </employee>
          <employee>
              <name>Nancy Davolio</name>
              <hireDate>1992-05-01</hireDate>
              <title>Sales Associate</title>
          </employee>
          <employee>
              <name>Steven Buchanan</name>
              <hireDate>1955-03-04</hireDate>
              <title>Manager</title>
          </employee>
          <employee>
              <name>Suyama Michael</name>
              <hireDate>1963-07-02</hireDate>
              <title>Sales Associate</title>
          </employee>
       </employees>
   

2. Di Notepad, pada bilah menu, pilih File>Save As.

3. Dalam kotak dialog Simpan Sebagai, di daftar Simpan sebagai jenis, pilih Semua File.

4. Dalam kotak Nama file, masukkan data.xml.

5. Pilih folder apa pun dengan menggunakan tombol Telusuri Folder, lalu pilih tombol Simpan.

6. Di Visual Studio, pilih kunci F5.

   Situs SharePoint terbuka.

7. Pada menu Tindakan Situs, pilih Opsi Lainnya.

8. Di halaman Buat, pilih jenis Halaman Komponen Web, lalu pilih tombol Buat.

9. Di halaman dari Halaman Komponen Web Baru, beri nama halaman SampleWebPartPage.aspx, lalu pilih tombol Buat.

   Halaman Komponen Web muncul.

10. Pilih zona apa pun di halaman Komponen Web.

11. Di bagian atas halaman, pilih tab Sisipkan, lalu pilih tombol Komponen Web.

12. Di panel Kategori, pilih folder Khusus, pilih satu Komponen Web WebPart1, lalu pilih tombol Tambahkan.

    Komponen Web muncul di halaman.

Menguji properti khusus

Untuk mengisi grid data yang muncul di Komponen Web, tentukan jalur file XML yang berisi data tentang setiap karyawan.

1. Pilih panah yang muncul di sisi kanan Komponen Web, lalu pilih Edit Komponen Web dari menu yang muncul.

   Panel yang berisi properti untuk Komponen Web muncul di sisi kanan halaman.

2. Di panel, perluas node Lain-lain, masukkan jalur file XML yang Anda buat sebelumnya, pilih tombol Terapkan, lalu pilih tombol OK.

   Verifikasi bahwa daftar karyawan muncul di Komponen Web.

Menguji kata kerja komponen web

Perlihatkan dan sembunyikan karyawan yang bukan manajer dengan memilih item yang muncul di menu kata kerja Komponen Web.

1. Pilih panah yang muncul di sisi kanan Komponen Web, lalu pilih Perlihatkan Manajer Saja dari menu yang muncul.

   Hanya karyawan yang merupakan manajer yang muncul di Komponen Web.

2. Pilih panah lagi, lalu pilih Perlihatkan Semua Karyawan dari menu yang muncul.

   Semua karyawan muncul di Komponen Web.

Lihat juga

Membuat komponen web untuk SharePointTutorial: Membuat komponen web SharePointTutorial: Membuat komponen web SharePoint dengan Menggunakan PerancangPanduan: Membuat komponen web untuk SharePoint dengan menggunakan perancang