アドイン Web の Web ページに Web パーツを含めるInclude a web part in a webpage on 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 を、マークアップが含まれる Web パーツとする <asp:Content> 要素に追加します。Add a WebPartZone to the <asp:Content> element where you want the web part with markup. 通常は、ContentPlaceHolderIdPlaceHolderMain である <asp:Content> に追加します。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 つの場合にのみ明示的な ID を Web パーツに含めます。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