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

[アーティクル]
09/07/2023

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

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

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

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

Note

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

前提条件

サポート対象エディションの Microsoft Windows および SharePoint。
Visual Studio 2017 または Azure DevOps Services。

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

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

[管理者として実行] オプションを使用して、Visual Studio を起動します。
メニューバーで、[ファイル] > [新規作成] > [プロジェクト] の順に選択します。
[新しいプロジェクト] ダイアログボックスで、使用する言語の [SharePoint] ノードを展開して、[2010] ノードをクリックします。
[テンプレート] ペインで、[SharePoint 2010 プロジェクト] を選択し、[OK] をクリックします。

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

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

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

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

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

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

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

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

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

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 string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

<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

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

前の手順で宣言したデータグリッドとラベルを追加します。

従業員データを格納する XML ファイルにデータグリッドをバインドします。

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

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

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

レンダリングされた Web パーツの Web パーツ動詞メニューに表示する動詞を作成します。

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

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

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

Web パーツをテストする

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

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

<?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="http://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 パーツにすべての従業員が表示されます。

次の方法で共有

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

前提条件

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

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

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

Web パーツをテストする

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

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

関連項目

フィードバック

その他のリソース

次の方法で共有

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

前提条件

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

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

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

Web パーツをテストする

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

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

関連項目

フィードバック

その他のリソース

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