チュートリアル: デザイナーを使用した SharePoint の Web パーツの作成

[アーティクル]
06/19/2023

SharePoint サイトの Web パーツを作成すれば、ユーザーはブラウザーを使用して、そのサイトを構成するページのコンテンツ、外観、動作を直接変更できます。このチュートリアルでは、Visual Studio に用意されている SharePoint の視覚的 Web パーツ プロジェクトテンプレートを使用して、Web パーツを視覚的に作成する方法を説明します。

ここで作成する Web パーツには、月間カレンダービューと、サイトで使用する各カレンダーリストのチェックボックスが表示されます。ユーザーがチェックボックスをオンにすると、それに対応するカレンダーリストが月間カレンダービューに追加されます。

このチュートリアルでは、次の作業について説明します。

視覚的 Web パーツ プロジェクトテンプレートを使用して Web パーツを作成する
Visual Studio の Visual Web Developer デザイナーを使用して Web パーツをデザインする
Web パーツに配置したコントロールのイベントを処理するコードを追加する
SharePoint で Web パーツをテストする

Note

このチュートリアルに記載されている Visual Studio ユーザーインターフェイスの一部の要素は、お使いのコンピューターに実際に表示される名前や場所と異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。「Visual Studio IDE のカスタマイズ」を参照してください。

前提条件

このチュートリアルを実行するには、次のコンポーネントが必要です。

サポート対象エディションの Windows と SharePoint

Web パーツプロジェクトを作成する

まず、視覚的 Web パーツ プロジェクトテンプレートを使用して Web パーツプロジェクトを作成します。

[管理者として実行] オプションを使用して、Visual Studio を起動します。
メニューバーで、 [ファイル]>[新規作成]>[プロジェクト] を選択します。
[新しいプロジェクトの作成] ダイアログで、インストールした SharePoint の特定のバージョンに対応する SharePoint の空のプロジェクト* を選択します。たとえば、SharePoint 2019 がインストールされている場合は、[SharePoint 2019 - 空のプロジェクト] テンプレートを選択します。

Note

[新しいプロジェクトの作成] ダイアログの上部にある [検索] テキストボックスに「SharePoint」と入力して、テンプレートを検索することもできます。また、[プロジェクトの種類] ドロップダウンボックスで [Office] を選択して、Office および SharePoint のテンプレートのみを表示するようにテンプレートの一覧をフィルターすることもできます。詳細については、「Visual Studio で新しいプロジェクトを作成する」を参照してください。
[名前] ボックスに「TestProject1」と入力した後、[作成] ボタンを選択します。
[この SharePoint ソリューションの信頼レベル] セクションで、[ファームソリューションとして配置する] オプションボタンをクリックします。
[完了] をクリックして、既定のローカル SharePoint サイトを作成します。

Web パーツをデザインする

ツールボックスにあるコントロールを Visual Web Developer デザイナーのサーフェイスへ追加して、Web パーツをデザインします。

Visual Web Developer デザイナーで、[デザイン] タブを選択してデザインビューに切り替えます。
メニューバーで [表示]、[ツールボックス] の順にクリックします。
ツールボックスの [標準] ノードで [CheckBoxList] コントロールを選択し、次のいずれかの手順に従います。
- [CheckBoxList] コントロールのショートカットメニューを開き、[コピー] を選択します。デザイナーで最初の行のショートカットメニューを開き、[貼り付け] を選択します。
- ツールボックスから [CheckBoxList] コントロールをドラッグし、デザイナーの最初の行に接続します。
前の手順を繰り返します。ただし、ここでは、デザイナーの次の行へボタンを移動します。
デザイナーで [Button1] をクリックします。
メニューバーで、[表示] > [プロパティウィンドウ] の順に選択します。

[プロパティ] ウィンドウが開きます。
ボタンの "テキスト" プロパティに「更新」と入力します。

Web パーツ上のコントロールのイベントを処理する

ユーザーがマスターカレンダービューにカレンダーを追加できるようにするコードを追加します。

次のいずれかの操作を実行します。
- デザイナーで、[更新] ボタンをダブルクリックします。
- [更新] ボタンの [プロパティ] ウィンドウで、[イベント] をクリックします。 Click プロパティに「Button1_Click」と入力し、Enter キーを押します。
  
  ユーザーコントロールコードファイルがコードエディターで開き、Button1_Click イベントハンドラーが表示されます。後で、このイベントハンドラーにコードを追加します。

ユーザーコントロールコードファイルの先頭に次のステートメントを追加します。

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

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

VisualWebPart1 クラスに次のコード行を追加します。このコードでは、月間カレンダービューコントロールを宣言します。
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Page_Load クラスの VisualWebPart1 メソッドを次のコードに置き換えます。このコードは、以下のタスクを実行します。

月間カレンダービューをユーザーコントロールに追加します。
サイト上の各カレンダーリストにチェックボックスを追加します。

カレンダービューに表示される項目の種類ごとにテンプレートを指定します。

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 クラスの VisualWebPart1 メソッドを次のコードに置き換えます。このコードでは、選択したカレンダーの項目をマスターカレンダービューに追加します。

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

Web パーツをテストする

プロジェクトを実行すると、SharePoint サイトが開きます。 SharePoint の Web パーツギャラリーに Web パーツが自動的に追加されます。このプロジェクトをテストするには、次のタスクを実行します。

2 つのカレンダーリストそれぞれにイベントを追加します。
Web パーツを Web パーツページに追加します。
月間カレンダービューに含めるリストを指定します。

サイト上のカレンダーリストにイベントを追加するには

Visual Studio で F5 キーを押します。

SharePoint サイトが開き、ページ上に Microsoft SharePoint Foundation クイック起動バーが表示されます。
クイック起動バーの [リスト] にある [カレンダー] リンクを選択します。

[カレンダー] ページが表示されます。

クイック起動バーにカレンダーリンクが表示されない場合は、[サイトコンテンツ] リンクを選択します。 [サイトコンテンツ] ページに [カレンダー] 項目が表示されない場合は、カレンダーを作成します。
カレンダーページで、日を選択し、選択した日の [追加] リンクを選択してイベントを追加します。
[タイトル] ボックスに「Event in the default calendar」(既定のカレンダーのイベント) と入力し、[保存] をクリックします。
[サイトコンテンツ] リンクを選択し、[アプリの追加] タイルを選択します。
[作成] ページで、種類として [カレンダー] を選択し、カレンダーの名前を入力して、[作成] をクリックします。
新しいカレンダーにイベントを追加し、イベントに「Event in the custom calendar」(カスタムカレンダーのイベント) という名前を付け、[保存] をクリックします。

Web パーツを Web パーツページに追加するには

[サイトコンテンツ] ページで [サイトのページ] フォルダーを開きます。
リボンで [ファイル] タブを選択します。[新しいドキュメント] メニューを開き、[Web パーツページ] コマンドをクリックします。
[新しい Web パーツページ] で、ページに「SampleWebPartPage.aspx」と名前を付け、[作成] をクリックします。

Web パーツページが表示されます。
Web パーツページの上部にある [挿入] タブをクリックし、[Web パーツ] をクリックします。
[カスタム] フォルダーを選択します。さらに [VisualWebPart1] Web パーツを選択し、[追加] をクリックします。

ページに Web パーツが表示されます。 Web パーツに次のコントロールが表示されます。
- 月間カレンダービュー
- [更新] ボタン
- [カレンダー] チェックボックス
- [カスタムカレンダー] チェックボックス

月間カレンダービューに追加するリストを指定するには

Web パーツで、月間カレンダービューに追加するカレンダーを選択し、[更新] をクリックします。

指定したすべてのカレンダーのイベントが月間カレンダービューに表示されます。

次の方法で共有

チュートリアル: デザイナーを使用した SharePoint の Web パーツの作成

前提条件

Web パーツプロジェクトを作成する

Web パーツをデザインする

Web パーツ上のコントロールのイベントを処理する

Web パーツをテストする

サイト上のカレンダーリストにイベントを追加するには

Web パーツを Web パーツページに追加するには

月間カレンダービューに追加するリストを指定するには

関連項目

フィードバック

その他のリソース

次の方法で共有

チュートリアル: デザイナーを使用した SharePoint の Web パーツの作成

前提条件

Web パーツ プロジェクトを作成する

Web パーツをデザインする

Web パーツ上のコントロールのイベントを処理する

Web パーツをテストする

サイト上のカレンダー リストにイベントを追加するには

Web パーツを Web パーツ ページに追加するには

月間カレンダー ビューに追加するリストを指定するには

関連項目

フィードバック

その他のリソース

Web パーツプロジェクトを作成する

サイト上のカレンダーリストにイベントを追加するには

Web パーツを Web パーツページに追加するには

月間カレンダービューに追加するリストを指定するには