SharePoint Hosted Add-In using SharePoint 2016 Online

Please follow the below steps to create the SharePoint hosted add-in on SharePoint online. Prerequisites: You must have an Office 365 account (either trial or paid).

• Create solution using Visual Studio
• Create app catalog site in SharePoint Online
• Deploy the solution in the app catalog site.

Create a solution using Visual Studio.

Open the Visual Studio as the administrator account and create a new project using SharePoint Add-in template.

Enter the site collection URL and select SharePoint-hosted.



Click Next and select the SharePoint Online option which will redirect it and prompt for credentials.



Provide the correct credentials and click onthe  finish button and it will create the layouts for add-ins.



Now right click on solution select Add-> New Item and select List and name it AddinList.



Click Add button and select the custom list and add a couple of columns of your choice in it.



Once the list is created it is added to the solution.



The AddinList has an instance object which contains the information that can be added to the list by default.

 

If you want to add information that needs to be pre-populated as list items in the list, use CAML in the elements.xml file of the list instance. 

<Data>
   <Rows>
      <Row>
         <Field Name="Title">Mr</Field>
         <Field Name="Name">Arvind Kushwaha</Field>
         <Field Name="Address">Boisar Mumbai</Field>
         <Field Name="Mobile Number">0000000000</Field>
      </Row>
   </Rows>
</Data>

Now right click on Project and click on “Publish…” and it will provide the below screen then click the add-in button



Create app catalog site in SharePoint Online to deploy the SharePoint hosted add-in

Open the office 365 admin site and click on app->app catalog.

Note

If app catalog site already exists then click on the app  and it will automatically navigate to the catalog site.



Select create a new app catalog site and click ok

Enter the catalog site and click ok.



Deploy the solution in-app in the catalog site.

Open the catalog site and click on Apps for SharePoint.



Upload the SharePoint hosted add in which was created above i.e A(10).

OR

Browse the app path: D:\Arvind\ArvindSolution\SharePointAddIn1\SharePointAddIn1\bin\Debug\app.publish\1.0.0.0



If all goes well then you will see the below screen.

 

Now open the site and the add Sharepoint add-in in it.

Click on trust to trust the app.