Add a Web Part to a page in a SharePoint-hosted SharePoint Add-in

SharePoint Add-ins

Learn how to include Web Parts in a page in an SharePoint Add-ins.

Last modified: August 07, 2015

Applies to: SharePoint Online | SharePoint Server 2013

Note
The name "apps for SharePoint" is changing to "SharePoint Add-ins". During the transition, the documentation and the UI of some SharePoint products and Visual Studio tools might still use the term "apps for SharePoint". For details, see New name for apps for Office and 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 earlier articles in this series:

• Get started creating SharePoint-hosted SharePoint Add-ins
• Deploy and install a SharePoint-hosted SharePoint Add-in
• Add custom columns to a SharePoint-hostedSharePoint Add-in
• Add a custom content type to a SharePoint-hostedSharePoint Add-in

Note
If you have been working through this series about SharePoint-hosted add-ins, then you have a Visual Studio solution that you can use to continue with this topic. You can also download the repository at SharePoint_SP-hosted_Add-Ins_Tutorials and open the BeforeWebPart.sln file.

In this article you add a Web Part to the default page of the Employee Orientation SharePoint Add-in.

Add a Web Part to a page

1. In Solution Explorer, open the Default.aspx file.
2. We'll be adding a list view Web Part to the page that surfaces the New Employees in Seattle list, so there's no longer a need to have a link to the list view page for the list. Remove the <asp:HyperLink> element from the <asp:Content> element whose ContentPlaceHolderId is PlaceHolderMain.
3. Inside the same <asp:Content> element, add the following WebPartZone.
   XML

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

4. Save and close the file.
5. In Solution Explorer, open the elements.xml file for the page in the Pages node.
6. If the File element is self-closing, remove the "/" character from it and add the end tag </File>.
7. 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. This markup tells SharePoint to insert an AllUsersWebPart into the Web Part zone that is named "HomePage1".
   CAML

   <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>
   
   

8. Add a CDATA element as a child of the AllUsersWebPart, then add a webParts element as a child of the CDATA, as shown in the following markup.
   CAML

   <AllUsersWebPart WebPartZoneID="HomePage1" WebPartOrder="1">
     <![CDATA[
       <webParts>
   
       </webParts>
     ]]>
   </AllUsersWebPart>
   

9. Add the following webPart markup as a child of the webParts element. This markup adds an XsltListViewWebPart and tells the Web Part to show the New Employees in Seattle list. Note that the ViewContentTypeId property value is just "0x", not the actual ID of the NewEmployee content type.
   CAML

     <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/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>
         </properties>
       </data>
     </webPart>
   

Run and test the add-in

1. 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. When the add-in's default page opens, the list view Web Part is on it and the list is displayed.
   Default page with list view Web part
   
   
3. Try adding new items to the list and editing existing items.
4. 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. 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 choose Retract.

-----------------------------------------------------------------------------------------------------------------

Source: https://msdn.microsoft.com/en-us/library/office/mt148588.aspx