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

5. I’ll open the default.aspx page and will do two small changes. I’ll comment out the referenced App.js file in “PlaceHolderAdditionalPageHead” content placeholder and in add one simple line “Hello World. This is my first SharePoint Add-in” in div in “” content place holder as,
   

   <!-- Add your JavaScript to the following file
   
   <
   script type = "text/javascript"
   src = "../Scripts/App.js" > < /script>-->
   
   and
   
       <
       div >
   
       <
       p id = "message" >
   
       <!-- The following content will be replaced with the user name when you run the app - see App.js -->
   
       Hello World.This is my first SharePoint Add - in
   
       <
       /p>
   
   <
   /div>

6. Now it’s time to deploy this Add-in on our developer site which we specified while creating Add-in. We will create the package and upload in “Apps in Testing” (Lists/DraftApps/AllItems.aspx) library.

7. Write click on Project and click on “Publish…” option as,
   
   
                     Figure 5 : Publish... Add-in
   
   Once we hit Publish… publish screen will appear from where Package can be created, click on “Package the add-in” option as shown in below fig 6.
   
   
                                          Figure 6 : Publish screen

8. Once package is created, we will go to our developer site and upload the package in “Apps in Testing” library as,
   
                  Figure 7 : Apps in testing library - to deploy add-in

9. Once we upload Add-in, upload App pop up will appear, it will ask us to Trust the Add-in as shown in below figure, for now we will click on “Trust It” button,
   
   
                           Figure 8 : Upload App - dialog to Trust on Add-in

10. Once Add-in is deployed successfully, we can launch Add-in from both places either by clicking on our Add-in from where we uploaded from home page as shown in following figure or from View all site content pages as,
    
             Figure 9 : Launching App from home page of developer site
    
    
    Figure 10 : Launching App from View All site content

Once we click on Add-in it will get redirected to another sub site, app web with different URL but we will discuss this in our next article.. I’ll conclude this article here.