次の方法で共有

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

  • [アーティクル]

Web パーツを使用すると、ブラウザーから SharePoint サイト ページのコンテンツ、外観、および動作を直接変更できます。 このチュートリアルでは、Visual Studio 2010 の SharePoint の可視 Web パーツ プロジェクト テンプレートを使用して、視覚的に Web パーツを作成する方法について説明します。

この Web パーツでは、月間カレンダー ビューとサイト上の各カレンダー リストのチェック ボックスを表示します。 チェック ボックスをオンにして、月間カレンダー ビューに含めるカレンダー リストを選択できます。

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

  • 可視 Web パーツ プロジェクト テンプレートを使用して Web パーツを作成する。

  • Visual Studio の Visual Web Developer デザイナーを使用して Web パーツをデザインする。

  • Web パーツ上のコントロールのイベントを処理するコードを追加する。

  • SharePoint の Web パーツをテストする。

    注意

    次の手順で参照している Visual Studio ユーザー インターフェイス要素の一部は、お使いのコンピューターでは名前や場所が異なる場合があります。 これらの要素は、使用する Visual Studio のエディションとその設定によって決まります。 詳細については、「設定の操作」を参照してください。

必須コンポーネント

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

  • サポート対象エディションの Microsoft Windows および SharePoint。 詳細については、「SharePoint ソリューションの開発要件」を参照してください。

  • Visual Studio 2010 Professional または Visual Studio アプリケーション ライフサイクル管理 (ALM) のエディション

Web パーツ プロジェクトの作成

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

可視 Web パーツ プロジェクトを作成するには

  1. [管理者として実行] オプションを使用して Visual Studio 2010 を起動します。

  2. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。 IDE が Visual Basic の開発設定を使用するように設定されている場合は、[ファイル] メニューの [新しいプロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. [新しいプロジェクト] ダイアログ ボックスを開き、使用する言語の [SharePoint] ノードを展開して、[2010] ノードを選択します。

  4. [Visual Studio にインストールされたテンプレート] ペインの [可視 Web パーツ] を選択し、[OK] をクリックします。

    SharePoint カスタマイズ ウィザードが表示されます。 このウィザードを使用すると、プロジェクトのデバッグに使用するサイトや、ソリューションの信頼レベルを選択できます。

  5. [完了] をクリックして、既定のローカル SharePoint サイトと既定のソリューションの信頼レベルを受け入れます。

    既定で Visual Web Developer のソース ビューにプロジェクトのユーザー コントロールが表示され、そこでそのページの HTML 要素を確認できます。

Web パーツのデザイン

ツールボックスのコントロールをユーザー コントロールのサーフェイスにドラッグして Web パーツをデザインします。

Web パーツのレイアウトをデザインするには

  1. Visual Web Developer デザイナーで、[デザイン] タブをクリックしてデザイン ビューに切り替えます。

  2. [表示] メニューの [ツールボックス] をクリックします。

  3. ツールボックスの [標準] グループから、[CheckBoxList] と [Button] をデザイナーにドラッグします。

  4. デザイナーで [Button] をクリックします。

  5. [表示] メニューの [プロパティ ウィンドウ] をクリックします。

  6. プロパティ ウィンドウで、ボタンの [Text] プロパティを [更新] に設定します。

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

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

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

  1. デザイナーで、[更新] ボタンをダブルクリックします。

    ユーザー コントロール コード ファイルがコード エディターで開き、Button1_Click イベント ハンドラーが表示されます。 後で、このイベント ハンドラーにコードを追加します。

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

    Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

    using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

  3. VisualWebPart1userControl クラスに次のコード行を追加します。 このコードでは、月間カレンダー ビュー コントロールを宣言します。

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. VisualWebPart1UserControl クラスの Page_Load メソッドを次のコードに置き換えます。 このコードは次のタスクを実行します。

    • 月間カレンダー ビューをユーザー コントロールに追加します。

    • サイト上の各カレンダー リストにチェック ボックスを追加します。

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

    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

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

  5. VisualWebPart1UserControl クラスの Button1_Click メソッドを次のコードに置き換えます。 このコードでは、選択したカレンダーの項目をマスター カレンダー ビューに追加します。

    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

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

    }

}

Web パーツのテスト

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

  • 2 つのカレンダー リストそれぞれにイベントを追加します。

  • Web パーツを Web パーツ ページに追加します。

  • 月間カレンダー ビューに含めるリストを選択します。

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

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

    SharePoint サイトが開き、ページ上に Microsoft SharePoint Foundation 2010 クイック起動バーが表示されます。

  2. クイック起動バーの [リスト] にある [カレンダー] をクリックします。

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

  3. [イベント] をクリックし、[新しいイベント] をクリックします。

  4. 既定のカレンダーの [タイトル] ボックスに「イベント」と入力し、[保存] をクリックします。

  5. [サイトの操作] をクリックし、[その他のオプション] をクリックします。

  6. [作成] ページで [カレンダー] をクリックし、カレンダーに名前を付け、[作成] をクリックします。

    [Custom Calendar] ページが表示されます。

  7. カスタム カレンダーの Event というカスタム カレンダーに新しいイベントを追加します。

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

  1. [サイトの操作] をクリックし、[その他のオプション] をクリックします。

  2. [作成] ページの [Web パーツ ページ] をクリックし、[作成] をクリックします。

  3. [新しい Web パーツ ページ] ページで、ページに「SampleWebPartPage.aspx」と名前を付け、[作成] をクリックします。

    [Web パーツ] ページが表示されます。

  4. [Web パーツ] ページ上のゾーンを選択します。

  5. ページの上部にある [挿入] タブをクリックし、[Web パーツ] をクリックします。

  6. [カスタム] フォルダーをクリックし、[VisualWebPart1] Web パーツをクリックし、[追加] をクリックします。

    ページに Web パーツが表示されます。 Web パーツに次のコントロールが表示されます。

    • 月間カレンダー ビュー。

    • [更新] ボタン。

    • [カレンダー] チェック ボックス。

    • [Custom Calendar] チェック ボックス

月間カレンダー ビューに含めるリストを選択するには

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

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

参照

処理手順

方法: SharePoint Web パーツを作成する

方法: デザイナーを使用して SharePoint Web パーツを作成する

チュートリアル: SharePoint の Web パーツを作成する

概念

SharePoint の Web パーツの作成