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

  • [アーティクル]

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

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

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

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

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

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

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

    [!メモ]

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

必須コンポーネント

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

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

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

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

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

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

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

  2. メニュー バーで、ファイル、新規作成、プロジェクトを選択します。Visual Basic 開発設定を、メニュー バーで使用する IDE が設定された ファイル、新しいプロジェクトを選択します。

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

  3. 新しいプロジェクト のダイアログ ボックスで、[Visual C#] または Visual Basicの下に、SharePoint のノードを展開し、2010 のノードを選択します。

  4. Visual Studio にインストールされたテンプレート のペインで、SharePoint 2010 視覚的 Web パーツ テンプレートを選択し、OK のボタンをクリックします。

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

  5. この SharePoint ソリューションの信頼レベル のセクションでは、ファーム ソリューションとして配置する のオプション ボタンを選択します。

  6. 既定のローカル SharePoint サイトを受け入れるように 完了 のボタンをクリックします。

Web パーツのデザイン

ツールボックス からユーザー コントロールのサーフェイスにコントロールを追加することによって Web パーツをデザインします。

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

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

  2. メニュー バーで、表示、ツールボックスを選択します。

  3. ツールボックスの 標準 ] ノードでは、CheckBoxLIst のコントロールを選択し、次の手順のいずれかを実行します: 1

    • CheckBoxList のコントロールのショートカット メニューを開き、コピーを選択し、デザイナーの最初の行を選択し、行のショートカット メニューを開き、を 貼り付けを選択します。

    • ツールボックス から CheckBoxList のコントロールをドラッグし、デザイナーの最初の行に接続します。

  4. 前の手順を繰り返しますが、デザイナーの次の行にボタンを実行します。

  5. デザイナーで、ボタン1 のボタンをクリックします。

  6. メニュー バーで、[表示]、[プロパティ ウィンドウ] の順に選択します。

    [プロパティ] ウィンドウが開きます。

  7. ボタンの テキスト のプロパティでは、更新を入力します。

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

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

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

  1. 次のいずれかの操作を実行します。

    • デザイナーで、更新 のボタンをダブルクリックします。

    • 更新 のボタンの プロパティ のペインで、イベント のボタンをクリックします。クリック のプロパティで、Button1_Clickに " " と入力し、Enter キーを選択します。

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

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

    Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

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

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

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. VisualWebPart1 クラスの 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. VisualWebPart1 クラスの 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. イベントをカスタム カレンダーに追加し、カスタム カレンダーのイベントのイベントの名前を入力し、を 保存 のボタンをクリックします。

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 パーツの作成