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

2011-08-09

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

この Web パーツのデータグリッドには従業員が表示されます。従業員データを格納するファイルの場所を指定します。また、マネージャーである従業員のみが一覧に表示されるように、データグリッドにフィルターをかけることもできます。

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

Visual Studio Web パーツ項目テンプレートを使用して Web パーツを作成する。
Web パーツのユーザーが設定できるプロパティを作成する。このプロパティでは、従業員データファイルの場所を指定します。
コントロールを Web パーツコントロールコレクションに追加することで Web パーツにコンテンツをレンダリングする。
レンダリングされた Web パーツの動詞メニューに表示される、動詞という新しいメニュー項目を作成する。動詞を使用すると、Web パーツに表示されるデータを変更できます。
SharePoint の Web パーツをテストする。

注意

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

必須コンポーネント

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

サポート対象エディションの Microsoft Windows および SharePoint。詳細については、「SharePoint ソリューションの開発要件」を参照してください。
Visual Studio 2010 Professional または Visual Studio アプリケーションライフサイクル管理 (ALM) のエディション

空の SharePoint プロジェクトの作成

まず、空の SharePoint プロジェクトを作成します。後で、Web パーツ項目テンプレートを使用してプロジェクトに Web パーツを追加します。

空の SharePoint プロジェクトを作成するには

[管理者として実行] オプションを使用して Visual Studio 2010 を起動します。
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

[新しいプロジェクト] ダイアログボックスが表示されます。
[新しいプロジェクト] ダイアログボックスを開き、使用する言語の [SharePoint] ノードを展開して、[2010] ノードを選択します。
テンプレート ペインで、[空の SharePoint プロジェクト] を選択し、[OK] をクリックします。

SharePoint カスタマイズウィザードが表示されます。このウィザードを使用すると、プロジェクトのデバッグに使用するサイトや、ソリューションの信頼レベルを選択できます。
[ファームソリューションとして配置する] をクリックし、[完了] をクリックして既定のローカル SharePoint サイトを受け入れます。

Web パーツのプロジェクトへの追加

プロジェクトに Web パーツ項目を追加します。 Web パーツ項目によって Web パーツコードファイルが追加されます。後で、Web パーツコードファイルにコードを追加して、Web パーツのコンテンツをレンダリングします。

プロジェクトに Web パーツを追加するには

[プロジェクト] メニューの [新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログボックスの [インストールされたテンプレート] ペインで、[SharePoint] ノードを展開し、[2010] をクリックします。
SharePoint テンプレートの一覧で、[Web パーツ] をクリックし、[追加] をクリックします。

ソリューションエクスプローラーに Web パーツ項目が表示されます。

Web パーツのコンテンツのレンダリング

Web パーツに表示するコントロールを指定するには、Web パーツクラスのコントロールコレクションにコントロールを追加します。

Web パーツのコンテンツをレンダリングするには

ソリューションエクスプローラーで、WebPart1.vb (Visual Basic の場合) または WebPart1.cs (C# の場合) をダブルクリックします。

コードエディターで Web パーツコードファイルが開きます。
Web パーツコードファイルの先頭に次のステートメントを追加します。
```
Imports System.Data
```
```
using System.Data;
```
WebPart1 クラスに次のコードを追加します。このコードは、次のフィールドを宣言します。
- Web パーツに従業員を表示するデータグリッド。
- データグリッドのフィルターに使用するコントロール上に表示するテキスト。
- データグリッドでデータを表示できない場合、エラーを表示するラベル。
- 従業員データファイルのパスを含む文字列。
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```

WebPart1 クラスに次のコードを追加します。このコードで、DataFilePath というカスタムプロパティが Web パーツに追加されます。カスタムプロパティとは、ユーザーが SharePoint で設定できるプロパティです。このプロパティでは、データグリッドの設定に使用される XML データファイルの場所を取得および設定します。

<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

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

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

前の手順で宣言したデータグリッドとラベルを追加します。
従業員データを格納する XML ファイルにデータグリッドをバインドします。

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

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

WebPart1 クラスに次のメソッドを追加します。このコードは次のタスクを実行します。

レンダリングされた Web パーツの Web パーツ動詞メニューに表示する動詞を作成します。
動詞メニューの動詞をクリックすると発生するイベントを処理します。このコードでは、データグリッドに表示される従業員一覧にフィルターをかけます。

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

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

Web パーツのテスト

プロジェクトを実行すると、SharePoint サイトが開きます。 Web パーツは SharePoint の Web パーツギャラリーに自動的に追加されます。 Web パーツは任意の Web パーツページに追加できます。

Web パーツをテストするには

次の XML をメモ帳ファイルに貼り付けます。この XML ファイルには、Web パーツに表示されるサンプルデータが含まれます。

<?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="https://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>

メモ帳の [ファイル] をクリックし、[名前を付けて保存] をクリックします。
[名前を付けて保存] ダイアログボックスの [ファイルの種類] ドロップダウンリストで、[すべてのファイル] をクリックします。
[ファイル名] ボックスに、「data.xml」と入力します。
[フォルダーの参照] ボタンを使用してフォルダーを選択し、[保存] をクリックします。
Visual Studio で F5 キーを押します。

SharePoint サイトが開きます。
[サイトの操作] をクリックし、[その他のオプション] をクリックします。
[作成] ページの [Web パーツページ] をクリックし、[作成] をクリックします。
[新しい Web パーツページ] ページで、ページに「SampleWebPartPage.aspx」と名前を付け、[作成] をクリックします。

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

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

カスタムプロパティのテスト

Web パーツに表示するデータグリッドを設定するには、各従業員に関するデータが格納された XML ファイルのパスを指定します。

カスタムプロパティをテストするには

Web パーツの角に表示される矢印をクリックし、[Web パーツの編集] をクリックします。

Web パーツのプロパティを含むペインがページの右側に表示されます。
ペインの [その他] ノードを展開し、上記の手順で作成した XML ファイルのパスを入力し、[適用] をクリックし、[OK] をクリックします。

Web パーツに従業員一覧が表示されることを確認します。

Web パーツの動詞のテスト

Web パーツ動詞メニューに表示される項目をクリックすると、マネージャーではない従業員の表示と非表示が切り替わります。

Web パーツの動詞をテストするには

Web パーツの角に表示される矢印をクリックし、[マネージャーのみを表示] をクリックします。

Web パーツにマネージャーである従業員のみが表示されます。
矢印をもう一度クリックし、[すべての従業員を表示] をクリックします。

Web パーツにすべての従業員が表示されます。

参照

処理手順

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

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

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

概念

SharePoint の Web パーツの作成