SharePoint Add-ins (SharePoint Hosted Add-in) - Part Two

In last article SharePoint Add-ins (SharePoint App) - Part One, we discussed basics about SharePoint Add-ins. In this article we will move one step ahead and look into details of SharePoint hosted Add-in and we will see step by step examples of creating SharePoint Add-ins with Visual Studio.

1. SharePoint hosted Add-ins
   
   
1. These Add-ins are hosted in SharePoint.
   
   
2. To implement this kind of Add-ins we need to use the JavaScript client-side object model (JSOM). This type of Add-ins always includes the code that runs only on client-side like JavaScript, HTML, and REST etc. We cannot use the C# code or CSOM in SharePoint hosted Add-ins.
   
   
2. Before starting the development of SharePoint Add-ins it’s really necessary to understand the few concepts like, Add-ins installation scopes and concept of host web and add-ins web.
   
   
3. Add-ins web - The web site on which add-in is deployed is called add-in web.
   
   
4. Host web - The web site on which add-in installed called the host web. From this site Add-ins are launched.
   
   
5. SharePoint Add-ins installation scopes – SharePoint Add-ins can be installed at two different scopes,
   
   
1. Site Scope
   
   When add-ins are installed at site scope, add-in is installed and launched within the scope of same SharePoint site. Here, host web is same site were the site is installed.
   
   
2. Tenancy Scope
   
   At tenancy level, Add-in is installed in app catalog site. Once the Add-in is installed in app catalog site, add can be launched from other site, host web. Here host web is not same as the site where add-in installed.

Here, Add-in is available across all the sites from the tenancy.

Now, we will create one sample SharePoint hosted add-in and install at site scope. We will explain here step by step.

Developing simple “Hello-World” add-in -

1. We will use Visual Studio 2015 to create the simple SharePoint Add-in. Create new Project in Visual studio select the Project SharePoint Add-in from Office / SharePoint templates as,
   
   
   Figure 1: SharePoint Add-in project type in Office/SharePoint templates

2. Once we click ok button after giving the project name, “New SharePoint Add-in” wizard will appear where we need to specify few setting like Office 365 site / SharePoint online site where we need to deploy the add-in, type of add-in/where we need to host the app as,
   
   
   Figure 2: New SharePoint Add-in – settings

Here I am currently specifying my developer site URL. We will discuss about developer site in details in upcoming articles

3. In next step of “New SharePoint Add-in” we need to specify the target SharePoint version as in below figure, here currently we are creating in SharePoint online.
   
   
   Figure 3 : Target of SharePoint version

4. Once we finish the “New SharePoint Add-in” wizard, let’s see the structure in Visual Studio as shown in below figure. There are some important files to discuss in details like AppManifest.xml, App.js etc. But we will discuss those in upcoming articles.
   
   
   Figure 4 : Add-in structure in visual studio