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

[アーティクル]
02/21/2013

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

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

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

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

[!メモ]

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

必須コンポーネント

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

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

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

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

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

Visual Studio を、[管理者として実行] オプションを使用して起動します。
ハンドラーで [ファイル]、新規、**[プロジェクト]**を禁止し、をクリックします。
[新しいプロジェクト] のダイアログボックスで、[SharePoint] のノードを使用する展開し、2010 年 のノードを選択する言語のノードで。
[テンプレート] のペインで、[SharePoint 2010 プロジェクト]を選択し、[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 パーツのプロパティを含むペインがページの右側に表示されます。
ウィンドウで、ノードを [その他]、Enter 以前に作成した XML ファイルのパスに、[適用] のボタンを選択し、を選択します [OK] のボタンを展開します。

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

Web パーツの動詞のテスト

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

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

Web パーツの右側に表示される選択し、表示されるメニューのをマネージャーのみを表示します。*** 矢印を選択します。

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

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

参照

処理手順

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

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

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

その他の技術情報

SharePoint の Web パーツの作成

次の方法で共有

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

必須コンポーネント

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

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

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

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

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

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

Web パーツのテスト

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

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

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

Web パーツの動詞のテスト

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

参照

処理手順

その他の技術情報

その他のリソース

次の方法で共有

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

必須コンポーネント

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

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

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

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

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

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

Web パーツのテスト

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

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

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

Web パーツの動詞のテスト

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

参照

処理手順

その他の技術情報

その他のリソース

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

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