Návod: Vytvoření webové části pro SharePoint

Webové části umožňují uživatelům přímo upravovat obsah, vzhled a chování stránek sharepointového webu pomocí prohlížeče. Tento návod ukazuje, jak vytvořit webovou část pomocí šablony položky webové části v sadě Visual Studio 2010.

Webová část zobrazuje zaměstnance v datové mřížce. Uživatel určuje umístění souboru, který obsahuje data zaměstnanců. Uživatel může také filtrovat datovou mřížku tak, aby se zaměstnanci, kteří jsou manažeři, zobrazili jenom v seznamu.

Tento návod znázorňuje následující úlohy:

• Vytvoření webové části pomocí šablony položky webové části sady Visual Studio

• Vytvoření vlastnosti, kterou může nastavit uživatel webové části. Tato vlastnost určuje umístění datového souboru zaměstnance.

• Vykreslování obsahu ve webové části přidáním ovládacích prvků do kolekce ovládacích prvků webové části

• Vytvoření nové položky nabídky označované jako sloveso, které se zobrazí v nabídce sloves vykreslené webové části. Příkazy umožňují uživateli upravit data, která se zobrazí ve webové části.

• Testování webové části v SharePointu

  Poznámka:

  Váš počítač může v následujících pokynech zobrazovat odlišné názvy nebo umístění některých prvků uživatelského rozhraní sady Visual Studio. Tyto prvky jsou určeny edicí sady Visual Studio a použitým nastavením. Další informace naleznete v tématu Přizpůsobení integrovaného vývojového prostředí sady Visual Studio.

Požadavky

• Podporované edice systému Microsoft Windows a SharePoint.

• Visual Studio 2017 nebo Azure DevOps Services

Vytvoření prázdného projektu SharePointu

Nejprve vytvořte prázdný projekt SharePointu. Později přidáte do projektu webovou část pomocí šablony položky webové části .

1. Spusťte Visual Studio pomocí možnosti Spustit jako Správa istrator.

2. Na panelu muži zvolte Soubor>nový>projekt.

3. V dialogovém okně Nový projekt rozbalte uzel SharePointu pod jazykem, který chcete použít, a pak zvolte uzel 2010.

4. V podokně Šablony zvolte SharePoint 2010 Project a pak zvolte tlačítko OK .

   Zobrazí se Průvodce přizpůsobením SharePointu. Tento průvodce umožňuje vybrat web, který použijete k ladění projektu a úrovně důvěryhodnosti řešení.

5. Zvolte tlačítko Nasadit jako řešení farmy a pak zvolte tlačítko Dokončit a přijměte výchozí místní sharepointový web.

Přidání webové části do projektu

Přidejte do projektu položku webové části. Položka webové části přidá soubor kódu webové části . Později do souboru kódu webové části přidáte kód, který vykreslí obsah webové části.

1. Na řádku nabídek zvolte Přidat novou položku projektu>.

2. V dialogovém okně Přidat novou položku rozbalte v podokně Nainstalované šablony uzel SharePointu a pak zvolte uzel 2010.

3. V seznamu sharepointových šablon zvolte šablonu webové části a pak zvolte tlačítko Přidat .

   Položka webové části se zobrazí v Průzkumník řešení.

Vykreslování obsahu ve webové části

Ovládací prvky, které se mají zobrazit ve webové části, můžete určit tak, že je přidáte do kolekce ovládacích prvků třídy webové části.

1. V Průzkumník řešení otevřete WebPart1.vb (v jazyce Visual Basic) nebo WebPart1.cs (v jazyce C#).

   Soubor kódu webové části se otevře v Editoru kódu.

2. Na začátek souboru kódu webové části přidejte následující direktivy.

   C#

   using System.Data;
   

   VB

   Imports System.Data
   

3. Do třídy WebPart1 přidejte následující kód. Tento kód deklaruje následující pole:

   • Datová mřížka pro zobrazení zaměstnanců ve webové části

   • Text zobrazený v ovládacím prvku, který slouží k filtrování mřížky dat.

   • Popisek, který zobrazuje chybu, pokud datová mřížka nemůže zobrazit data.

   • Řetězec, který obsahuje cestu k datovému souboru zaměstnance.

     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. Do třídy WebPart1 přidejte následující kód. Tento kód přidá vlastní vlastnost pojmenovanou DataFilePath do webové části. Vlastní vlastnost je vlastnost, kterou může uživatel nastavit v SharePointu. Tato vlastnost získá a nastaví umístění datového souboru XML, který se používá k naplnění datové mřížky.

   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. Nahraďte metodu CreateChildControls následujícím kódem. Tento kód provádí následující úlohy:

   • Přidá datovou mřížku a popisek, které jste deklarovali v předchozím kroku.

   • Vytvoří vazbu datové mřížky na soubor XML, který obsahuje data zaměstnanců.

     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. Do třídy přidejte následující metodu WebPart1 . Tento kód provádí následující úlohy:

   • Vytvoří příkaz, který se zobrazí v nabídce příkazů webové části vykreslené webové části.

   • Zpracovává událost, která je vyvolána, když uživatel zvolí příkaz v nabídce sloves. Tento kód filtruje seznam zaměstnanců, kteří se zobrazí v datové mřížce.

     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
     

   ---

Otestování webové části

Po spuštění projektu se otevře sharepointový web. Webová část se automaticky přidá do galerie webových částí v SharePointu. Webovou část můžete přidat na libovolnou stránku webové části.

1. Do souboru Poznámkový blok vložte následující KÓD XML. Tento soubor XML obsahuje ukázková data, která se zobrazí ve webové části.

   <?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. V Poznámkový blok na řádku nabídek zvolte Uložit jako soubor>.

3. V dialogovém okně Uložit jako v seznamu Uložit jako typ zvolte Všechny soubory.

4. Do pole Název souboru zadejte data.xml.

5. Zvolte libovolnou složku pomocí tlačítka Procházet složky a pak zvolte tlačítko Uložit .

6. V sadě Visual Studio zvolte klávesu F5 .

   Otevře se sharepointový web.

7. V nabídce Akce webu zvolte Další možnosti.

8. Na stránce Vytvořit zvolte typ stránky webové části a pak zvolte tlačítko Vytvořit.

9. Na stránce Nová stránka webové části pojmenujte stránku SampleWebPartPage.aspx a pak zvolte tlačítko Vytvořit.

   Zobrazí se stránka webové části.

10. Vyberte libovolnou zónu na stránce webové části.

11. V horní části stránky zvolte kartu Vložení a pak zvolte tlačítko Webová část .

12. V podokně Kategorie zvolte vlastní složku, zvolte webovou část WebPart1 a pak zvolte tlačítko Přidat.

    Webová část se zobrazí na stránce.

Testování vlastní vlastnosti

Chcete-li naplnit datovou mřížku, která se zobrazí ve webové části, zadejte cestu k souboru XML, který obsahuje data o každém zaměstnanci.

1. Zvolte šipku, která se zobrazí na pravé straně webové části, a v zobrazené nabídce zvolte Upravit webovou část .

   Na pravé straně stránky se zobrazí podokno obsahující vlastnosti webové části.

2. V podokně rozbalte uzel Různé , zadejte cestu k souboru XML, který jste vytvořili dříve, zvolte tlačítko Použít a pak zvolte tlačítko OK .

   Ověřte, že se ve webové části zobrazí seznam zaměstnanců.

Otestování slovesa webové části

Zobrazení a skrytí zaměstnanců, kteří nejsou správci, výběrem položky, která se zobrazí v nabídce sloves webových částí

1. Zvolte šipku, která se zobrazí na pravé straně webové části, a pak v zobrazené nabídce zvolte Zobrazit pouze správce.

   Ve webové části se zobrazí jenom zaměstnanci, kteří jsou vedoucími.

2. Znovu zvolte šipku a pak v zobrazené nabídce zvolte Zobrazit všechny zaměstnance .

   Ve webové části se zobrazí všichni zaměstnanci.

Viz také

Vytváření webových částí pro postupy SharePointu: Vytvoření webové částiSharePoint: Vytvoření webové části SharePoint pomocí Průvodce: Vytvoření webové části pro SharePoint pomocí návrháře: Vytvoření webové části pro SharePoint pomocí návrháře