Návod: Vytvoření webové části pro SharePoint pomocí návrháře

Článek
08/25/2023

Pokud vytváříte webové části pro sharepointový web, můžou uživatelé pomocí prohlížeče přímo upravovat obsah, vzhled a chování stránek na tomto webu. Tento návod ukazuje, jak vizuálně vytvořit webovou část pomocí šablony projektu webové části SharePoint Visual v sadě Visual Studio.

Webová část, kterou vytvoříte, zobrazí zobrazení měsíčního kalendáře a zaškrtávací políčko pro každý seznam kalendářů na webu. Uživatelé můžou určit, které seznamy kalendářů se mají zahrnout do zobrazení měsíčního kalendáře, zaškrtnutím políček.

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

Vytvoření webové části pomocí šablony projektu webové části Vizuál
Návrh webové části pomocí návrháře visual web developeru v sadě Visual Studio
Přidání kódu pro zpracování událostí ovládacích prvků ve webové části
Testování webové části v SharePointu

Poznámka:

Počítač může v následujících pokynech zobrazit různé 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. Viz Přizpůsobení integrovaného vývojového prostředí sady Visual Studio.

Požadavky

K dokončení tohoto návodu budete potřebovat následující komponenty:

Podporované edice Windows a SharePointu

Vytvoření projektu webové části

Nejprve vytvořte projekt webové části pomocí šablony projektu webové části Visual.

Spusťte Visual Studio pomocí možnosti Spustit jako Správa istrator.
Na řádku nabídek zvolte Soubor>nový>projekt.
V dialogovém okně Vytvořit nový projekt vyberte sharepointový prázdný projekt* pro konkrétní verzi SharePointu, kterou jste nainstalovali. Pokud máte například instalaci SharePointu 2019, vyberte šablonu SharePointu 2019 – Prázdný projekt .

Poznámka:

Šablony můžete vyhledat také zadáním SharePointu do textového pole Hledat v horní části dialogového okna Vytvořit nový projekt . Seznam šablon můžete také filtrovat tak, aby se zobrazovaly jenom šablony pro Office a SharePoint, a to tak, že v rozevíracím seznamu Typ projektu vyberete "Office". Další informace najdete v tématu Vytvoření nového projektu v sadě Visual Studio.
Do pole Název zadejte TestProject1 a pak zvolte tlačítko Vytvořit.
V části Co je úroveň důvěryhodnosti pro toto řešení SharePointu? zvolte tlačítko Nasadit jako řešení farmy.
Pokud chcete přijmout výchozí místní sharepointový web, zvolte tlačítko Dokončit.

Návrh webové části

Webovou část můžete navrhnout přidáním ovládacích prvků z panelu nástrojů na povrch návrháře visual web developeru.

V návrháři vizuálního webového vývojáře zvolte kartu Návrh a přepněte do návrhového zobrazení.
Na řádku nabídek zvolte Zobrazit>panel nástrojů.
V uzlu Standardní panel nástrojů zvolte ovládací prvek CheckBoxList a proveďte jeden z následujících kroků:
- Otevřete místní nabídku ovládacího prvku CheckBoxList , zvolte Kopírovat, otevřete místní nabídku pro první řádek v návrháři a pak zvolte Vložit.
- Přetáhněte ovládací prvek CheckBoxList z panelu nástrojů a připojte ovládací prvek k prvnímu řádku v návrháři.
Opakujte předchozí krok, ale přesuňte tlačítko na další řádek návrháře.
V návrháři zvolte tlačítko Button1 .
Na řádku nabídek zvolte Okno Zobrazit>vlastnosti.

Otevře se okno Vlastnosti .
Ve vlastnosti Text tlačítka zadejte Aktualizovat.

Zpracování událostí ovládacích prvků ve webové části

Přidejte kód, který uživateli umožňuje přidávat kalendáře do hlavního zobrazení kalendáře.

Proveďte jednu z následujících sad kroků:
- V návrháři poklikejte na tlačítko Aktualizovat .
- V okně Vlastnosti tlačítka Aktualizovat zvolte tlačítko Události . Do vlastnosti Click zadejte Button1_Click a pak zvolte klávesu Enter.
  
  Soubor kódu uživatelského ovládacího prvku se otevře v Editoru kódu a zobrazí se obslužná rutina Button1_Click události. Později do této obslužné rutiny události přidáte kód.

Na začátek souboru kódu uživatelského ovládacího prvku přidejte následující příkazy.

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

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

Do třídy přidejte následující řádek kódu VisualWebPart1 . Tento kód deklaruje ovládací prvek zobrazení měsíčního kalendáře.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Page_Load Nahraďte metodu VisualWebPart1 třídy následujícím kódem. Tento kód provádí následující úlohy:

Přidá zobrazení měsíčního kalendáře do uživatelského ovládacího prvku.
Přidá zaškrtávací políčko pro každý seznam kalendářů na webu.

Určuje šablonu pro každý typ položky, která se zobrazí v zobrazení kalendáře.

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

Button1_Click Nahraďte metodu VisualWebPart1 třídy následujícím kódem. Tento kód přidá položky z každého vybraného kalendáře do hlavního zobrazení kalendáře.

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

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. K otestování tohoto projektu provedete následující úlohy:

Přidejte událost do každého ze dvou samostatných seznamů kalendáře.
Přidejte webovou část na stránku webové části.
Zadejte seznamy, které se mají zahrnout do zobrazení měsíčního kalendáře.

Přidání událostí do seznamů kalendářů na webu

V sadě Visual Studio zvolte klávesu F5 .

Otevře se sharepointový web a na stránce se zobrazí panel Snadné spuštění služby Microsoft SharePoint Foundation.
Na panelu Snadné spuštění v části Seznamy zvolte odkaz Kalendář .

Zobrazí se stránka Kalendář.

Pokud se na panelu Snadné spuštění nezobrazí žádný odkaz Kalendář, zvolte odkaz Obsah webu. Pokud se na stránce Obsah webu nezobrazuje položka kalendáře , vytvořte ji.
Na stránce Kalendář zvolte den a pak zvolte odkaz Přidat ve vybraném dni a přidejte událost.
Do pole Název zadejte událost do výchozího kalendáře a pak zvolte tlačítko Uložit.
Zvolte odkaz Obsah webu a pak zvolte dlaždici Přidat aplikaci.
Na stránce Vytvořit zvolte typ kalendáře, pojmenujte kalendář a pak zvolte tlačítko Vytvořit.
Přidejte událost do nového kalendáře, pojmenujte událost ve vlastním kalendáři a pak zvolte tlačítko Uložit .

Přidání webové části na stránku webové části

Na stránce Obsah webu otevřete složku Stránky webu.
Na pásu karet zvolte kartu Soubory , otevřete nabídku Nový dokument a pak zvolte příkaz Stránka webových částí.
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.
V horní zóně stránky webové části zvolte kartu Vložení a pak zvolte tlačítko Webová část .
Zvolte vlastní složku, zvolte webovou část VisualWebPart1 a pak zvolte tlačítko Přidat.

Webová část se zobrazí na stránce. Ve webové části se zobrazí následující ovládací prvky:
- Zobrazení měsíčního kalendáře.
- Tlačítko Aktualizovat
- Zaškrtávací políčko Kalendář.
- Zaškrtávací políčko Vlastní kalendář

Zadání seznamů, které se mají zahrnout do zobrazení měsíčního kalendáře

Ve webové části zadejte kalendáře, které chcete zahrnout do zobrazení měsíčního kalendáře, a pak zvolte tlačítko Aktualizovat .

Události ze všech kalendářů, které jste zadali, se zobrazí v zobrazení měsíčního kalendáře.

Viz také

Vytvoření webových částí pro postupy SharePointu : Vytvoření webové části SharePoint: Vytvoření webové části pro SharePoint

Sdílet prostřednictvím