アドイン Webのウェブページ上に Webパーツを含める。Include a web part on a webpage in the add-in web

SharePoint アドインのアドイン Web のページにすぐに利用できる Web パーツを含めることができますが、アドインの更新が必要になった場合でも問題が生じない方法で含めることが重要です。You can include an out-of-the-box Web Part in a page in the add-in web of a SharePoint Add-in, but it is important that you do this in a way that won't cause problems if you ever need to update the add-in.

このトピックのガイダンスを示すコード サンプルについては、 OfficeDev/Core.WebPartOnAppWebPageを参照してください。A code sample that illustrates the guidance of this topic is at: OfficeDev/Core.WebPartOnAppWebPage

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

  1. Visual Studio で sharePointホスト型のSharePoint アドイン プロジェクトを作成します。Create a SharePoint Add-in project in Visual Studio 詳細については、 SharePoint ホスト型の SharePoint アドインの作成を始めるを参照してください。For the prerequisites, see Get started creating SharePoint-hosted SharePoint Add-ins.

  2. Webパーツを追加したい場所で.aspxファイルを開きます。Open the .aspx file to which you want to add a web part. このトピックでは、Default.aspxを例として使用します。This topic uses Default.aspx as an example.

  3. *WebPartZone* を、 <asp:Content> マークアップが含まれるお好きなwebパーツ要素に追加します。Add a WebPartZone to the <asp:Content> element where you want the web part with markup. 通常は、 <asp:Content> 誰の ContentPlaceHolderId PlaceHolderMainに追加します。Typically, you want to add it to the <asp:Content> whose ContentPlaceHolderId is PlaceHolderMain. 次に例を示します。The following is an example.

      <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
        <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" 
          ID="HomePage1" Title="loc:full" />
      </asp:Content>
    

    警告

    *<WebPartPages:XsltListViewWebPart>* などのwebパーツ要素を *WebPartZone*の子として追加することができます。It is possible to add a web part element, such as <WebPartPages:XsltListViewWebPart> as a child of the WebPartZone. ただし、SharePointアドインにおいて、通常これは優れた方法ではありません。But this is generally a bad practice in a SharePoint Add-in. アドインを更新する場合、.aspxファイルに挿入されたWebパーツ要素によって、「このIDを持つWebパーツは既にこのページに追加されています」というメッセージが表示され、更新が失敗することがあります。It is possible to add a Web Part element, such as <WebPartPages:XsltListViewWebPart> as a child of the WebPartZone. But this is generally a bad practice in a spappsing. If the add-in ever needs to be updated, a Web Part element inserted in the aspx file can cause the update to fail in some scenarios with the message "A web part with this ID has already been added to this page." We recommend that you add web parts to the elements manifest for the page as described later of this procedure. この後説明があるように、Webパーツをページの要素マニフェストに追加することをお勧めします。We recommend that you add web parts to the elements manifest for the page as described later in this procedure.

  4. ページの要素マニフェストファイルを開きます。Open the element manifest file for the page. これは通常elements.xmlと呼ばれ、.aspxファイルと同じプロジェクトフォルダにあります。Open the element manifest file for the page. This is usually called elements.xml and is located in the same project folder as the aspx file.

  5. 以下の例に示されているように、ページの File 要素に、子 AllUsersWebPart 要素を追加し、その WebPartZoneID をページ上で作成した Web パーツ領域の値に設定します。In the File element for the page, add a child AllUsersWebPart element and set its WebPartZoneID to the value of the Web Part zone that you created on the page as this example shows.

      <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
        <Module Name="Pages">
          <File Path="Pages\Default.aspx" Url="Pages/Default.aspx" ReplaceContent="TRUE" >
            <AllUsersWebPart WebPartZoneID="HomePage1" WebPartOrder="1">
    
            </AllUsersWebPart>
          </File>
        </Module>
      </Elements>
    
  6. この例に示されているように、CDATA 要素を AllUsersWebPart の子として追加し、webParts 要素を CDATA の子として追加します。Add a CDATA element as a child of the AllUsersWebPart, then add a webParts element as a child of the CDATA, as shown in this example.

      <AllUsersWebPart WebPartZoneID="HomePage1" WebPartOrder="1">
        <![CDATA[
          <webParts>
    
          </webParts>
        ]]>
      </AllUsersWebPart>
    
  7. *webPart* マークアップを *webParts* 要素の子として追加します。Add the following webPart markup as a child of the webParts element. 以下は、 XsltListViewWebPart追加の例です。The following is an example that adds an XsltListViewWebPart. ここでは、 "テストリスト"と呼ばれるカスタムリストが同じアドインプロジェクトの一部であることを前提としています。It assumes that a custom list called "Test List" is part of the same add-in project. カスタムリストをアドインWebに追加する方法については、 SharePointのカスタムのリストとコンテンツタイプを含む、プロバイダー向けのホスト型アドインを作成するを参照してください。Add webPart markup as a child of the webParts element. The following is an example that adds an XsltListViewWebPart. It assumes that a custom list called "Test List" is part of the same add-in project. For information about how to add a custom list to an add-in web, see Create a provider-hosted add-in that includes a custom SharePoint list and content type.

    注意

    WebパーツにはIDプロパティがないことに注意してください。Note that the web part does not have an ID property. 最良の方法として、本当に必要な2つの場合にのみ、webパーツの明示的なIDを含めることをお勧めします。Webパーツは、SharePoint wikiページに追加されている場合。Note Note that the Web Part does not have an ID property. It is a best practice to include an explicit ID for the Web Part only in the two cases where it is really required: The Web Part is being added to a SharePoint wiki page. The Web Part is one of two or more Web Parts that will be connected. webパーツは、接続された2つ以上のwebパーツのうちの1つの場合。The web part is one of two or more web parts that are connected.

      <webParts>
      <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
        <metaData>
          <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, 
                      Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, 
                      PublicKeyToken=71e9bce111e9429c" />
        </metaData>
        <data>
          <properties>
            <property name="ListUrl">Lists/{TestList}</property>
            <property name="IsIncluded">True</property>
            <property name="NoDefaultStyle">True</property>
            <property name="Title">{Test List}</property>
            <property name="PageType">PAGE_NORMALVIEW</property>
            <property name="Default">False</property>
            <property name="ViewContentTypeId">0x</property>
          </properties>
        </data>
      </webPart>
    </webParts>
    
  8. F5 キーを押してアドインをデバッグします。Select F5 to debug the add-in. ページにWebパーツが表示されます。You should see the web part on the page.

関連項目See also