SharePoint ホスト型の SharePoint アドインで Web パーツをページに追加Add a Web Part to a page in a SharePoint-hosted SharePoint Add-in

これは、SharePoint ホスト型の SharePoint アドインの開発の基本に関する記事のシリーズの 5 番目です。SharePoint アドイン とこのシリーズの前の記事 (SharePoint ホスト型の SharePoint アドインの作成を始めるにある記事) をよく理解しておいてください。This is the fifth in a series of articles about the basics of developing SharePoint-hosted SharePoint Add-ins. You should first be familiar with SharePoint Add-ins and the previous articles in this series, which you can find at Get started creating SharePoint-hosted SharePoint Add-ins.


SharePoint ホスト型アドインに関するこのシリーズを続けて学習してきた方は、このトピックでも引き続き使用できる Visual Studio ソリューションをお持ちです。If you have been working through this series about SharePoint-hosted add-ins, you have a Visual Studio solution that you can use to continue with this topic. また、SharePoint_SP-hosted_Add-Ins_Tutorials でリポジトリをダウンロードし、BeforeWebPart.sln ファイルを開くこともできます。You can also download the repository at SharePoint_SP-hosted_Add-Ins_Tutorials and open the BeforeWebPart.sln file.

この記事では、社員オリエンテーション SharePoint アドインの既定のページに Web パーツを追加します。In this article, you add a Web Part to the default page of the Employee Orientation SharePoint Add-in.

Web パーツをページに追加するAdd a Web Part to a page

  1. ソリューション エクスプローラーで、Default.aspx ファイルを開きます。In Solution Explorer, open the Default.aspx file.

  2. これから、シアトルの新入社員のリストが表示されるリスト ビュー Web パーツをページに追加するので、リストのためのリスト ビュー ページへのリンクが不要になります。Because we'll be adding a list view Web Part to the page that surfaces the New Employees in Seattle list, we no longer need a link to the list view page for the list. *<asp:HyperLink>* 要素を、** ContentPlaceHolderId** が ** である** asp:Content>PlaceHolderMain 要素から削除します。Remove the <asp:HyperLink> element from the <asp:Content> element whose ContentPlaceHolderId is PlaceHolderMain.

  3. 同じ <asp:Content> 要素で、次の WebPartZone を追加します。Inside the same <asp:Content> element, add the following WebPartZone.

      <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" 
          ID="HomePage1" Title="loc:full" />
  4. ファイルを保存して閉じます。Save and close the file.

  5. ソリューション エクスプローラーで、Pages ノードにあるページの elements.xml ファイルを開きます。In Solution Explorer, open the elements.xml file for the page in the Pages node.

  6. File 要素が自己終了する場合、"/" 文字を削除して終了タグ </File> を追加します。If the File element is self-closing, remove the "/" character from it and add the end tag </File>.

  7. File 要素で、AllUsersWebPart 子要素を追加し、その WebPartZoneID を、対象ページに作成した Web パーツ領域の ID に設定します。In the File element, add a child AllUsersWebPart element, and set its WebPartZoneID to the ID of the Web Part zone that you created on the page. ファイルの内容は、次のようになります。The file's contents should now look like the following. このマークアップは、SharePointに AllUsersWebPart を「HomePage1」という名前のWebパーツ領域に挿入するよう指示しています。This markup tells SharePoint to insert an AllUsersWebPart into the Web Part zone that is named "HomePage1".

    <Elements xmlns="">
      <Module Name="Pages">
        <File Path="Pages\Default.aspx" Url="Pages/Default.aspx" ReplaceContent="TRUE" >
          <AllUsersWebPart WebPartZoneID="HomePage1" WebPartOrder="1">
  8. 次のマークアップに示されているように、CDATA 要素を AllUsersWebPart の子として追加し、次に、webParts 要素を CDATA の子として追加します。Add a CDATA element as a child of the AllUsersWebPart, and then add a webParts element as a child of the CDATA, as shown in the following markup.

    <AllUsersWebPart WebPartZoneID="HomePage1" WebPartOrder="1">
  9. 次の webPart マークアップを webParts 要素の子として追加します。Add the following webPart markup as a child of the webParts element. このマークアップは、XsltListViewWebPart を追加し、シアトルの新入社員リストを表示するよう Web パーツに指示します。This markup adds an XsltListViewWebPart and tells the Web Part to show the New Employees in Seattle list. ViewContentTypeId プロパティ値は0xであり、 、NewEmployee コンテンツ タイプの実際の ID ではない点に注目してください。Note that the ViewContentTypeId property value is just 0x, not the actual ID of the NewEmployee content type.

      <webPart xmlns="">
          <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, 
                       Microsoft.SharePoint, Version=, Culture=neutral, 
                       PublicKeyToken=71e9bce111e9429c" />
            <property name="ListUrl">Lists/NewEmployeesInSeattle</property>
            <property name="IsIncluded">True</property>
            <property name="NoDefaultStyle">True</property>
            <property name="Title">New Employees in Seattle</property>
            <property name="PageType">PAGE_NORMALVIEW</property>
            <property name="Default">False</property>
            <property name="ViewContentTypeId">0x</property>

アドインを実行してテストするRun and test the add-in

  1. F5 キーを使用して、アドインを展開して実行します。Visual Studio が、テスト用 SharePoint サイトにアドインを一時的にインストールして、すぐにアドインを実行します。Use the F5 key to deploy and run your add-in. Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in.

  2. アドインの既定のページが開くと、リスト ビュー Web パーツが配置されて、リストが表示されます。When the add-in's default page opens, the list view Web Part is on it and the list is displayed.

    図 1. リスト ビュー Web パーツを含む既定のページFigure 1. Default page with list view Web part


  3. リストに新しい項目を追加し、既存の項目を編集してみてください。Try adding new items to the list and editing existing items.

  4. デバッグ セッションを終了するには、ブラウザー ウィンドウを閉じるか、Visual Studio でデバッグを停止します。F5 を押すたびに、Visual Studio は以前のバージョンのアドインを取り消し、最新のアドインをインストールします。To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you press F5, Visual Studio will retract the previous version of the add-in and install the latest one.

  5. このアドインおよび他の記事の Visual Studio ソリューションを操作し、ひととおり操作を終了したら前回のアドインを取り消すとよいでしょう。You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are done working with it for a while. ソリューション エクスプローラーでプロジェクトを右クリックして、[取り消し] を選択します。Right-click the project in Solution Explorer and select Retract.

次の手順Next steps

このシリーズの次の記事では、SharePoint ホスト型の SharePoint アドインにワークフローを追加します。In the next article in this series, you'll add a workflow to a SharePoint-hosted SharePoint Add-in.