SharePoint hosted app development tutorial

In this SharePoint hosted app development tutorial, we will discuss SharePoint Add-in or SharePoint Apps, What are the advantages of SharePoint add-in as well as we will see a demo to develop a SharePoint hosted add-in or apps using Visual Studio for SharePoint Online Office 365?

We will discuss below things:

• What is SharePoint Apps/Add-in?
• Different Types of Add-in in SharePoint
• SharePoint-hosted add-in
• SharePoint Provider-hosted Add-in
• Configure SharePoint On-premise environment for developing SharePoint Add-ins
• Create and Deploy SharePoint Hosted Add-in/Apps using Visual Studio 2015/2017
• Deploy SharePoint Hosted Add-in (Developer Site)
• Deploy SharePoint Hosted Add-in to App Catalog Site
• Video Tutorial: Create and Deploy SharePoint Hosted Add-in using Visual Studio
• App Life Cycle Management in SharePoint 2013
• This task requires the application to have elevated permission error while deploying sharepoint-hosted apps
• Error occurred in deployment step ‘Install app for SharePoint’: The System Account cannot perform this action
• The Subscription Settings service and corresponding application and proxy needs to be running in order to make changes to these settings
• Error occurred in deployment step ‘Install app for SharePoint’: The provided App differs from another App with the same version and product ID
• Connections to the SharePoint server are currently disabled because the project is in offline mode
• How to manually Trust SharePoint Add-in in SharePoint Online
• How to update app registration in SharePoint Online site
• Error occurred in deployment step Install app for SharePoint Communication with the SharePoint server is canceled
• Error occurred in deployment step Install app for SharePoint Communication with the SharePoint server is canceled
• Error occurred in deployment step Retract Solution A communication error has occurred while invoking commands in SharePoint host process
• Everything is fine but we had a small problem getting your license SharePoint 2016 App Error
• The required version of SharePoint Foundation or SharePoint Server is not installed on this system while developing SharePoint hosted add-in in SharePoint 2016

Then we will see how to package a SharePoint hosted apps/add-in and deploy it to an add-in catalog site in SharePoint Online. Learn how to develop your first SharePoint add-in using visual studio.

We will also see different types of add-ins in SharePoint Online Office 365. In the same way, we can develop and deploy SharePoint hosted add-in using Visual Studio 2017.

Previously Microsoft named it as Apps but later they renamed it to the add-in. So you should not confuse with word apps with an add-in or vice versa.

What is SharePoint Apps/Add-in?

SharePoint Add-ins are self-contained extensions of SharePoint websites that you create, and that run without the custom code on the SharePoint server.

A SharePoint Add-in is a self-contained piece of functionality that extends the capabilities of SharePoint websites to solve a well-defined business problem.

• Add-ins don’t have custom code that runs on the SharePoint servers. All custom logic moves to the cloud or to an on-premise server that is outside the SharePoint farm.
• Business logic in a SharePoint Add-in can access SharePoint data through one of the several client APIs included in SharePoint.
• Almost all major types of SharePoint components can be part of a SharePoint Add-in, including pages, lists, workflows, custom content types, list templates, Web Parts, and more.
• The SharePoint websites where SharePoint Add-ins are installed, and from which users launch them, are called host webs. The SharePoint components, however, are generally in a special child web of the host web called the add-in web.
• All SharePoint Add-ins that users install get a tile on the Site Contents page of the SharePoint website. You can click on the tile to launch the add-in.
• Microsoft designed Add-ins in such a way that it works both in Office 365 environment as well as within the on-premise environment.

Different Types of Add-in in SharePoint

There are two types of SharePoint Add-ins:

SharePoint-hosted add-in

There is no server-side code in case of a SharePoint-hosted add-in. All business logic in a SharePoint-hosted add-in uses JavaScript either directly on a custom page or in a JavaScript file that is referenced from a custom page.

Custom pages in a SharePoint-hosted add-in are generally ASP.NET pages (ASPX) and they can declarative reference ASP.NET and in-the-box SharePoint controls, but there can be no code behind. However, you can customize the SharePoint controls using a client-side rendering option and custom JavaScript.

The JavaScript in SharePoint-hosted add-ins can access data and resources that are outside of the add-in web by using either of two techniques for safely working around the browser’s same-origin policy: a special JavaScript cross-domain library or a specific JavaScript WebProxy class. Using these techniques a SharePoint-hosted add-in can work with data on the host web, its parent subscription.

SharePoint Provider-hosted Add-in

Any SharePoint component that can be in a SharePoint-hosted add-in can also be in a provider-hosted add-in. But provider-hosted add-ins are distinguished from SharePoint-hosted add-ins because they include at least one remote component; such as a web application, service, or database that is hosted externally from the SharePoint farm or SharePoint Online subscription

This could be a server in the same corporate network as a SharePoint farm or a cloud service. The external components can be hosted on any web hosting stack, including the Linux, Apache, MySQL, PHP (LAMP) stack.

When the remote components are implemented with .NET, the managed code SharePoint Client-Side Object Model (CSOM) library is available.

For remote components that are not based on .NET, there is a set of REST/OData APIs that can be used to access SharePoint data. These can also be used from a .NET client if you prefer working with an OData interface.

An add-in can fit into a SharePoint website in below three ways:

• As a full page experience
• Inside a webpage within a control known as Add-in part
• As a UI commands in ribbons and menus.

Limitations of SharePoint farm and sandboxed solutions

Below are a few limitations of SharePoint farm and sandboxed solutions:

• SharePoint farm solutions code always runs in a SharePoint server. Farm solutions run within the SharePoint worker process known as w3wp.exe and SharePoint sandboxed solutions code run within the SharePoint sandboxed worker process SPUCWorkerProcess.exe. Running code in the SharePoint server is always at risk which decreases the stability of SharePoint farms. The other problem comes with SharePoint farm solution when customers want to upgrade to a newer version of SharePoint. Most farm solutions developed using full trust and perform complete operations that are not so smooth while upgrading. Sometimes you may need to rewrite the complete solutions as well as sometimes customers are not comfortable unless properly tested in the newer versions of Microsoft.SharePoint.dll. Since companies delay the upgrade ultimately it affects Microsoft’s sales revenue.
• Another problem with the SharePoint solution is that the code always runs under the identity and permissions of a specific user. So if a SharePoint administration activates a feature then the code can do everything that a SharePoint administrator can do. At the same time, a sandboxed solution can protect the farm and other site collections but it can not protect the site collection on which it is activated. By using few lines of code a sandboxed solution can delete all lists and document libraries in the site collection.
• Another problem with the sandboxed solution is that it can not do an impersonation. The code will run as current user permission, if the current user has only read access then your code can not elevate permission to do more than the permission which the current user has. At the same time, farm solutions can elevate permission by using SPSecurity.RunWithElevatedPrivileges which allows custom code to run on SHAREPOINT\SYSTEM account which has no security constraints. This can harm anything on the farm.
• Another problem with farm solution is that it requires a farm administrator to install solutions and also in most of the time it requires IIS reset on all the front-end servers. Always difficult to install, upgrade a farm or sandboxed solution.

Advantages of SharePoint Apps or Add-ins

• On the other hand SharePoint add-ins, architecture is different compared to SharePoint solutions.
• Microsoft designed Add-ins in such a way that it works both in Office 365 environment as well as within the on-premise environment.
• Add-in codes never run in a SharePoint server. There are two types of add-ins: one is SharePoint hosted add-ins where the code runs inside the browser on the user’s computer because it contains only client-side code. And the other one is a provider hosted app where the code runs in an external website and it contains server-side code.
• Add-ins can be installed from Office store or from Add-in catalog sites, Office Add-ins does not need any IIS to reset for adding to the site, it is easy to find, install and upgrade. Add-ins can be installed on both on-premise as well as in SharePoint Online.
• Add-ins code is authenticated and runs under a distinct identity. Add-ins permissions can be configured independently of user permissions.

Difference between Apps and Solutions in SharePoint 2013

Here, we can see mainly the difference between SharePoint apps and solutions in SharePoint 2013/2016.

Below, are the difference between apps or add-ins and solutions in SharePoint 2013/2016/Online.

• An app is a standalone application, and the infrastructure, management, and upon grades for apps happen outside of SharePoint.
• But an app that requires server-side code must be installed on its own web server infrastructure apart from SharePoint.
• Apps are acquired by site administrators and farm administrators from the public SharePoint Store or from an internal corporate App Catalog.
• But solutions are usually packages intended to customize or extend the functionality of one or more SharePoint sites.
• SharePoint Solutions are almost always custom development exercises by either third-party developers or an internal development team. Code is installed into SharePoint either by administrators as a full-trust solution or by site administrators as a partial trust or sandboxed solution.
• Both full trust and sandbox solutions are managed by farm administrators, but one site owner can add a specific app in SharePoint.
• When an app developer releases an upgrade to the SharePoint Store or App Catalog, each individual site administrator is notified of the available update and can independently upgrade the app on their sites. Because an app is an entirely self-contained application, if a site administrator decides to remove a particular app from a site, the app instance and all of its data are deleted from the site.

Configure SharePoint On-premise environment for developing SharePoint Add-ins

This is required if you want to develop or add an add-in into your on-premise environment in SharePoint. I have written an article on how we can configure the on-premise environment for add-in in SharePoint 2016. Microsoft has already released SharePoint 2016, if you have not tried yet, you can install it now.

Check out SharePoint Online Developer training Course.

Create and Deploy SharePoint Hosted Add-in/Apps using Visual Studio

Here we will create a simple SharePoint hosted add-in using Visual Studio. In the same way, we can develop Apps or Add-ins using SharePoint hosted add-in.

First Open Visual Studio and then File -> New Project and then expand Templates and then Office/SharePoint -> Office Add-ins. From there choose SharePoint Add-in like below. Give a name for the project and click on OK.

Then we need to provide a SharePoint developer site for debugging the add-in. If you have not created a developer site, then you can create a developer site from Office 365 SharePoint Online admin center.

Here I have given the developer site URL as well as I have chosen SharePoint-hosted for How do you want to host your SharePoint Add-in? like below:

Then it will ask you to give the credentials to connect to the SharePoint site like below. Provide the credentials for it.

Then it will automatically choose the SharePoint version to target the add-in like below:

Once you click on the Finish button, it will take some time and will create the project where you can see various folders in it. It contains folders like Features, Package, Content, Images, Scripts. The solution explorer looks like below:

Here the folders have specific propose like You can add .css files to the Contents folder, images to the Images folder, any js files to the Scripts folder, and any pages to the Pages folder.

Another important file is the AppManifest.xml file. This file is very important.

Every SharePoint app requires an XML file called AppManifest.xml, which is known as the app manifest. The app manifest contains essential metadata for the app that is read and tracked by the SharePoint host environment when an app is installed.

The app manifest contains a top-level <App> element that requires a set of attributes such as Name, ProductID, and Version. Within the <App> element there is an inner <Properties> element that contains important child elements such as <Title> and <StartPage>.

The <Title> element contains human-readable text that is displayed to the user in the app launcher. The <StartPage> element contains the URL that the SharePoint host environment uses in the app launcher to redirect the user to the app’s start page.

Visual Studio provides to changes things in UI like below:

As we know in SharePoint hosted add-in we can write only JavaScript code. By default, all JavaScript code has been added in the App.js file which resides in the Scripts folder. So if you want to write any JavaScript code then you can write inside the App.js file. You can also add your own js file and give a reference on the page where you required it.

In the default.aspx page, you can see all the required files have been referenced. And then in the PlaceHolderMain one tag has been added. In the app.js file by default, it is retrieving the current username and showing in the tag.

The default App.js code looks like below:

‘use strict’;

ExecuteOrDelayUntilScriptLoaded(initializePage, “sp.js”);
function initializePage()
{
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
getUserName();
});
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is successful
// It replaces the contents of the ‘message’ element with the user name
function onGetUserNameSuccess() {
$(‘#message’).text(‘Hello ‘ + user.get_title());
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert(‘Failed to get user name. Error:’ + args.get_message());
}
}

Here we are not doing anything, simply we will deploy the SharePoint Add-in.

Deploy SharePoint Hosted Add-in (Developer Site)

Below is the way, how we can deploy the SharePoint hosted add-in to the developer site in SharePoint Online Office 365.

To deploy an add-in, right-click on the Add-in project and then click on Deploy like below:

It will take some time to deploy the add-in into the SharePoint site collection. Once it is deployed successfully, open the developer site and then go to the Site Contents page where you can see the add-in like below:

Once you will click on the add-in, the add-in will open and you can see like below:

Deploy SharePoint Hosted Add-in to App Catalog Site

You distribute SharePoint Add-ins in add-in packages that always include at least the add-in manifest.

There are two ways we can distribute the add-in package.

• Add-in Catalog site: This is a dedicated SharePoint site collection in SharePoint Online or on-premise where we can upload the add-in package and people can start using within the organization. Check how to create app or add-in catalog site.
• Office Store: Here we can upload it to the Microsoft office store. Microsoft handles the marketing process for you, from discovery to purchase to updates.

Upload add-in to Add-in Catalog site:

An add-in catalog site contains a special type of document library that is used to upload and store app package files. Along with storing the add-in package file, this document library also tracks various types of metadata for each app.

If you have not created an add-in catalog site then you can follow this article to create an add-in catalog site from Office 365 SharePoint add-in center.

First, we need to create the .app file while we can upload it to the add-in catalog site. For this Right-click on the Project -> Publish…

Then click on Package the add-in like below, which will generate the .app file.

This will package the app and the .app file will be available on <ProjectName>\bin\Debug\app.publish\<version number>. This .app file we need to upload in the add-in catalog site.

Now since the .app file is ready, open the App Catalog site and then open the Apps for SharePoint document library. We have to upload the .app package to this library. You can use the Upload button or you can even drag and drop the file to the document library. Once you uploaded it should appear like below:

After this, you can open any SharePoint site and then go to the site contents page and then click on Add an app. You should be able to see the add-in like below:

From here you can add the add-in to the SharePoint site. Click on the add-in to add it to the site. It will ask Do you trust OurDemoSharePointAddIn? Click on Trust it like below:

It will take some time to add it to the site.

Once it is added you can see the add-in like below:

Display List Items using SharePoint Apps

Now, let us see an example, how to display SharePoint list items using apps or add-ins.

First, we will create a SharePoint hosted add-in or apps following the above approach, and then we will write the jsom code.

Open your visual studio then click on File -> New -> Project…

Next, it will open a new project window, Go to Office/SharePoint, here select Add-ins, and select SharePoint Add-in. Next, enter a Name and select your project location and then click OK.

It will open a new SharePoint add-in window. select your SharePoint site for debugging and next select SharePoint Add-In and select SharePoint-hosted and click on Next.

Then enter the username and password to connect to the SharePoint Online site.

Now select SharePoint online and click Finish.

Now, we can the code inside the App.js file.

'use strict';

ExecuteOrDelayUntilScriptLoaded(getURLParameters, "sp.js");
ExecuteOrDelayUntilScriptLoaded(SPListHyperLink, "sp.js");
var listItems;
var hostUrl;

function SPListHyperLink() {
hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
varclientContext = newSP.ClientContext.get_current();
varhostcontext = newSP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var list = web.get_lists().getByTitle('Employee');
var cmlquery = newSP.CamlQuery();
listItems = list.getItems(cmlquery);
load(listItems, 'Include(Title,ID)');
executeQueryAsync(GetDataSuccess,GetDataFailed);
}

functionGetDataSuccess() {
var listInfo = ";
var ListEnumeratorAcc = listItems.getEnumerator();
listInfo += "<table><thead><tr>" +
"<th>Title</th>" +
"</tr></thead><tbody>";
while (ListEnumeratorAcc.moveNext()) {
var currentItem = ListEnumeratorAcc.get_current();
var url = hostUrl + "/Lists/Employee/DispForm.aspx?ID=" + currentItem.get_item('ID');
listInfo += '<tr><td>' + "<a href='" + url +"'>" + currentItem.get_item('Title') + "</a>" + '</td>';
+'</tr>';
}

listInfo += '</tbody></table>';
$('#EmployeeData').html(listInfo);
//$('#SPTable').dataTable();
}

functionGetDataFailed() {
alert("Error Message:\n" + "URL: " + sender.get_url() + ". \n\Error Description:" + args.get_message());
}

functiongetURLParameters(param) {
var params = document.URL.split('?')[1].split('&');
var strParams = ";
for (vari = 0; i<params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
returnsingleParam[1];
}
}
}

The Default.aspx code will look like below:

<asp:ContentContentPlaceHolderID="PlaceHolderMain"runat="server">
<divid="EmployeeData">
</div>
</asp:Content>

Build and deploy your project and if you have items in the SharePoint list, you can see the output.

This is how to display SharePoint list items as hyperlinks in SharePoint-hosted apps.

Get Data from Host Web in SharePoint hosted add-in or apps

Let us see two examples:

• How to get host website title in SharePoint hosted add-in
• How to get all host web lists in add-in web in SharePoint hosted add-in

SharePoint hosted app get host web title or URL

Now, we will see how to get host web title or URL in SharePoint hosted add-in web in SharePoint Online Office 365.

We can give use the below function to retrieve the host web URL by using the query string parameter.

function getURLParameters(param) {
var params = document.URL.split('?')[1].split('&');
var strParams = ";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
}

Then we can use the below 3 lines to retrieve the host web context.

var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var currentcontext = new SP.ClientContext.get_current();
var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);

App.js Code:

'use strict';
ExecuteOrDelayUntilScriptLoaded(getHostSiteName, "sp.js");
var web;
function getHostSiteName() {
var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var currentcontext = new SP.ClientContext.get_current();
var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);
web = hostcontext.get_web();
currentcontext.load(web, "Title");
currentcontext.executeQueryAsync(onSuccess, onFailure);
}

function onSuccess() {
$('#message').text("Host web title " + web.get_title());
}

function onFailure(sender, args) {
alert('Failed to get web title. Error:' + args.get_message());
}

function getURLParameters(param) {
var params = document.URL.split('?')[1].split('&');
var strParams = ";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
}

Default.aspx Code:

Below is the default.aspx code.

<%– The following 4 lines are ASP.NET directives needed when using SharePoint components –%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%– The markup and script in the following Content element will be placed in the <head> of the page –%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<meta name="WebPartPageExpansion" content="full" />
<!– Add your CSS styles to the following file –>
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!– Add your JavaScript to the following file –>
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
<%– The markup in the following Content element will be placed in the TitleArea of the page –%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<%– The markup and script in the following Content element will be placed in the <body> of the page –%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div>

<p id="message">
<!– The following content will be replaced with the user name when you run the app – see App.js –>
initializing…
</p>
</div>
</asp:Content>

Apart from that here we need to have read permission for the site collection. So we can open the AppManifest.xml file and go to the Permissions tab and you can give read access to the Site Collection like below:

Once you right-click on the project and click on deploy. It will ask you to trust the add-in like below:

Now when the add-in will open then you can see all the host web title like below:

Get all host web lists in SharePoint hosted add-in

Now, we will see how to retrieve all lists from the host web and show it in the add-in web in SharePoint hosted add-in or apps in SharePoint Online Office 365.

Here we will first get the host web URL and host context and then we will get the host web lists.

We can give use the below function to get host web URL by using the query string parameter.

function getURLParameters(param) {
var params = document.URL.split('?')[1].split('&');
var strParams = ";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
}

Then we can use the below 3 lines to get host web context.

var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var currentcontext = new SP.ClientContext.get_current();
var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);

Here we have just put the below code in the App.js file.

'use strict';
ExecuteOrDelayUntilScriptLoaded(getHostSiteName, "sp.js");
var web;
var collList;
function getHostSiteName() {
var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var currentcontext = new SP.ClientContext.get_current();
var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);
web = hostcontext.get_web();
collList = web.get_lists();
currentcontext.load(collList);
currentcontext.executeQueryAsync(onSuccess, onFailure);
}

function onSuccess() {
var listInfo = ";
var listEnumerator = collList.getEnumerator();
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
listInfo += 'Title: ' + oList.get_title() + '<br />';
}
$("#message").html(listInfo);
}

function onFailure(sender, args) {
alert('Failed to get web title. Error:' + args.get_message());
}

function getURLParameters(param) {
var params = document.URL.split('?')[1].split('&');
var strParams = ";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
}

The default.aspx page code is like below:

<%– The following 4 lines are ASP.NET directives needed when using SharePoint components –%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%– The markup and script in the following Content element will be placed in the <head> of the page –%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<meta name="WebPartPageExpansion" content="full" />
<!– Add your CSS styles to the following file –>
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!– Add your JavaScript to the following file –>
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
<%– The markup in the following Content element will be placed in the TitleArea of the page –%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<%– The markup and script in the following Content element will be placed in the <body> of the page –%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div>
<p id="message">
<!– The following content will be replaced with the user name when you run the app – see App.js –>
initializing…
</p>
</div>
</asp:Content>

Apart from that here we need to have read permission for the site collection. So we can open the AppManifest.xml file and go to the Permissions tab and you can give read access to the Site Collection like below:

Once you right-click on the project and click on deploy. It will ask you to trust the add-in like below:

Now when the add-in will open then you can see all the host web lists in the add-in.

This is how to get host web data in SharePoint hosted add-in or apps in SharePoint Online Office 365 and also how to get a host website title in SharePoint Online Office 365. We saw how to get host web data like retrieve all lists and libraries in SharePoint hosted apps in SharePoint Online Office 365.

Video Tutorial: Create and Deploy SharePoint Hosted Add-in using Visual Studio

I have also created a video tutorial on how to create and deploy SharePoint hosted apps or add-in using visual studio. You can check below:

App Life Cycle Management in SharePoint 2013

Now, we will see the App lifecycle management in SharePoint 2013. Microsoft released a new development model in SharePoint 2013 known as SharePoint Apps or Add-in.

Following Managing the App Life Cycle in SharePoint 2013:

• Coding
• Packaging
• Deployment
• Installation
• Update
• Removal

Coding:
SharePoint apps are coded using a development tool such as Visual Studio. Most professionally produced apps will be done using Visual Studio. Some internally developed apps within an organization may use Napa, but managing the full app lifecycle is best done using the full Visual Studio toolset.

Packaging:
Packaging, also known as publishing, an app refers to the process of compiling the app’s components into a structured deployment file that has an app manifest and an.APP file name extension.

Deployment:
Deployment is the process of copying the app package file to a distribution point. This is will be either the SharePoint Store or a private App Catalog.

Installation:
Installation occurs when a user goes to the SharePoint Store or App Catalog and requests that the app is installed in a particular SharePoint web site.

Update:
Like any software product, apps need to be updated from time to time. The update process is designed to allow the components of an app to be updated without adversely impacting the data stored in sites where the app is already installed.

Because it includes its own coding, packaging, deployment, and installation phases, and may occur multiple times over the lifetime of an app.

Removal:
Also called uninstallation, this process happens when a user requests that the app is removed from a website. This has the effect of removing any artifacts that the app installed in the SharePoint host web along with the entire app web and, optionally, any auto-hosted remote website associated with the app.

This task requires the application to have elevated permission error while deploying sharepoint-hosted apps

Recently while working with SharePoint-hosted apps I got the below error. The error message shows: This task requires the application to have elevated permission. Restart under different credentials. Cancel the task and return to Microsoft Visual Studio.

While deploying a SharePoint-hosted app, I got the error as Error occurred in deployment step ‘Install app for SharePoint’: The System Account cannot perform this action.

So I created another account and added that account to the farm administrator group.

Then I open visual studio with the new account, but when I deploy the app, I got the above error. But when I add the account to the developer site’s administrator group, it got resolved.

To add the user to the site administrator group, go to Site Settings and then click on “Site collection administrators” from the Users and Permissions section.

Error occurred in deployment step ‘Install app for SharePoint’: The System Account cannot perform this action

Recently I got this error while deploying a SharePoint hosted app. The error message I got is Error occurred in deployment step ‘Install app for SharePoint’: The System Account cannot perform this action.

SharePoint restricted system account to perform deploy or install an app for security reason.

To fix the error, follow the below step:

• Create a new account and add this account to the local admin.
• Then add the account to the farm admin group. Open SharePoint central administration, go to Security. From there select Manage the farm administrators group.
• Now open visual studio into different user ( Shift + Right Click, and open with a different user ). and put the user which you have created now.

The Subscription Settings service and corresponding application and proxy needs to be running in order to make changes to these settings

Recently when I am trying to Configure App URLs by navigating from SharePoint 2013 central administration I got the error as The Subscription Settings service and corresponding application and proxy needs to be running in order to make changes to these settings.

Open SharePoint Management PowerShell. Run PowerShell as Administrator.

add-pssnapin "Microsoft.Sharepoint.Powershell"
$account = Get-SPManagedAccount WIN-PFCP2DGT8DI\MySPAcc

$appPool = New-SPServiceApplicationPool -Name SubscriptionServiceAppPool -Account $account

$serviceApp = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPool -name "Subscription Settings Service" -DatabaseName "Subscription_Settings_DB"

$serviceAppProxy = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $serviceApp

Error occurred in deployment step ‘Install app for SharePoint’: The provided App differs from another App with the same version and product ID

Recently while trying to deploy a SharePoint 2013 App, I got the below error:

An error occurred in deployment step ‘Install app for SharePoint’: The provided App differs from another App with the same version and product ID.

The error is coming because an app has already been deployed and you are deploying it again using the same version. So the solution is to change the version.

Open the AppManifest.xml file and change the version. Suppose the version previously was 1.0.0.0, you can change that to 1.0.0.1 and it should work fine.

Connections to the SharePoint server are currently disabled because the project is in offline mode

Now, we will discuss how to fix error connections to the SharePoint server are currently disabled because the project is in an Offline mode.

The error can come while trying to uninstall an app from the SharePoint 2013/2016/Online site or even you can find the error while trying to deploy a SharePoint hosted app.

I got the error while uninstalling an app in SharePoint 2013, an error occurred in deployment step ‘Uninstall app for SharePoint’: Connections to the SharePoint server are currently disabled because the project is in Offline mode. To connect to the SharePoint server, switch to the Online mode by setting the project’s Server Connection property to Online, and then try the operation again.

Open the SharePoint project and then Select the Solution. Now Press F4. In the Properties window check for “Server Connection”. Here Select: Online and then Save like below:

Now, you should be deployed or uninstall SharePoint apps, the error connections to the sharepoint server are currently disabled will not appear.

Manually Trust SharePoint Add-in in SharePoint Online

Now, we will discuss, how to manually trust a SharePoint hosted add-in developed using visual studio 2015/2017 in SharePoint Online site.

Recently we were developing a SharePoint hosted add-in and in the AppManifest.xml file, we have specified the permissions for SharePoint Add-in will request while installation time.

Once we deploy the SharePoint add-in, it will ask you to trust the Add-in like below:

If you are not able to Trust the Add-in after deployment, we can also trust it from the site itself like below:

Open the developed site and then open the “Apps in Testing” document library, where all Apps will be there. click on the … for the particular add-in and then click on “MANAGE PERMISSIONS” tab like below:

This will open the same screen where you can Trust the application.

Update app registration in SharePoint Online site

Now, we will see if we need to update an app that was already registered in the destination site what are the steps to follow in order to update the same app like App Domain, Redirect URL. Title etc.

In below example, I have registered an app by using below URL which generated Client Id, Client Secret etc for an app.

http://sitecollection/_layouts/15/appregnew.aspx

Update app registration in SharePoint Online site

Once registered next time suppose I want to update hosting site URL or title of an app then below is the URL. This will ask App Id which is nothing but Client Id which was generated during 1st registration.

http://sitecollection/_layouts/15/appinv.aspx

Add the ClientId and click on Lookup, it will fill up other properties for an app as shown below.

As required update other fields, not ClientId and click on Create Button.

This is how we can how to update app registration in the SharePoint Online site.

Error occurred in deployment step Install app for SharePoint Communication with the SharePoint server is canceled

Now, we will discuss how to fix error Error occurred in deployment step ‘Install app for SharePoint’: Communication with the SharePoint server is canceled. The error comes while trying to deploy sharePoint hosted add-in to SharePoint Online office 365.

Recently we were developing a workflow using visual studio 2015 for SharePoint online site as a SharePoint hosted add-in. When we try deploying the workflow from the visual studio, it gave the below error after taking a long time to deploy.

The error comes as:
Error occurred in deployment step ‘Install app for SharePoint’: Communication with the SharePoint server is canceled.

It looks like below:

Error occurred in deployment step ‘Install app for SharePoint’: Communication with the SharePoint server is canceled.

Due to network connectivity, sometimes it took a long time to deploy and if it took too much time, then the error message will come sometime.

So the way we resolve it is, we restarted the visual studio and then retry deploying the add-in. After that, the issue did not come and the add-in deployed successfully.

Here we learned how to solve the error, “Error occurred in deployment step ‘Install app for SharePoint’: Communication with the SharePoint server is canceled”.

Error occurred in deployment step Retract Solution A communication error has occurred while invoking commands in SharePoint host process

Now, we learned how to fix an error Error occurred in deployment step Retract Solution A communication error has occurred while invoking commands in the SharePoint host process, which comes while deploying SharePoint hosted add-in.

Recently we have developed a SharePoint hosted add-in and we tried to deploy the add-in we got the below error. “Error occurred in deployment step Retract Solution A communication error has occurred while invoking commands in the SharePoint host process. The communication object, System.ServiceMode.Channels.ClientFramingDuplexSessionChannel, cannot be used for communication because it has been Aborted”.

The error looks like below:

Sometimes due to network issues, the error comes like above. So try for 2/3 times the error will come.

If not restart visual studio and try deploying it again, the error will not come.

Here, we learned how to solve error Error occurred in deployment step Retract Solution A communication error has occurred while invoking commands in the SharePoint host process.

Remove an app from SharePoint site using PowerShell

Let us see, how to install and uninstall an app from the SharePoint site using PowerShell.

We will see how to remove apps from the SharePoint 2013/2016 site using PowerShell. And also, we will discuss how to remove the app from sharepoint online using Powershell.

Remove an app from SharePoint 2016/2013 PowerShell

Recently we have added on SharePoint free app from the App store into our SharePoint 2016 site and then we want to remove that by using PowerShell.

Uninstall-SPAppInstance is the PowerShell cmdlet to remove the app from the SharePoint site. The PowerShell cmdlet will work in SharePoint server 2013/2016/2019 to remove the app from SharePoint.

Below is the PowerShell command to remove SharePoint app using PowerShell which you can run in Windows PowerShell ISE like below:

Add-PSSnapin Microsoft.SharePoint.PowerShell
$AppName=”Employees”
$appInstance = Get-SPAppInstance -Web “http://mypc:29024/sites/SPTraining/” | where-object {$_.Title -eq $AppName}
if ($appInstance -ne $null)
{
Uninstall-SPAppInstance –Identity $appInstance
}

Once you run this it will ask for the confirmation message and click on Yes to All to execute it.

Remove app from SharePoint Online using PowerShell

Now we will see how to remove the app from sharepoint online using Powershell.

Try{
Add-Type -Path 'C:\Users\Bijaya.Sahoo\Desktop\Microsoft.SharePoint.Client.dll'
Add-Type -Path 'C:\Users\Bijaya.Sahoo\Desktop\Microsoft.SharePoint.Client.Runtime.dll'
}
catch {
}
$appInstanceid = New-Object Guid("xxxx-xx-xx-xx-xxxx")
$siteUrl = "https://tsinfo.sharepoint.com/sites/Bhawana/"
$username = "[email protected]"
$password=ConvertTo-SecureString "********" -AsPlainText -Force
$ctx = New-Object Microsoft.SharePoint.Client.ClientContext($siteUrl)
$credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
$ctx.Credentials = $credentials

$appInst = $ctx.Web.GetAppInstanceById($appInstanceId)
$appInst.Uninstall()
$ctx.ExecuteQuery()
$ctx.Dispose()

Once you execute the above PowerShell script, the app will be removed from the SharePoint Online site.

Install and UnInstall SharePoint Apps/Add-ins using PowerShell

Now let us see, how to install apps or add-ins using PowerShell in SharePoint 2013/2016. We will also see how to uninstall SharePoint 2013 apps or add-ins using PowerShell.

If you are developing a SharePoint hosted app using Visual Studio then when you will publish the app, it will create a .app file. Before executing any PowerShell command make sure we have the .app file is ready.

Install SharePoint Apps or Add-ins using PowerShell

Follow the below steps to install apps in SharePoint 2013/2016 using PowerShell.

Installing an app has two steps:

• First, we need to Import the .app file to the site collection.
• Then install the app to any site or subsite

1- Import App to Site Collection:

This we can do by using the Import-SPAppPackage cmdlets.

Syntax:

$myapp = Import-SPAppPackage -Path < Path to app > -Site < URL > -Source < Source >

Here Path is the file path where your .app file presents

• URL: URL of the Site Collection where you want to import.
• Source: This can be Marketplace or CorporateCatalog, developer site, ObjectModel, etc.

Example:

$myapp = Import-SPAppPackage -Path "c:\MyfirstApp.app" -Site "http://SiteCollectionURL" –Source ObjectModel

This will import the .app file to the site collection.

2-Install the App in the SharePoint Site:

Now you can install the app to a site or subsite by using Install-SPApp cmdlets.

Install-SPApp -Web http://SiteCollectionURL/site -Identity $myapp

Uninstall SharePoint Apps using PowerShell

To uninstall an app, first, we need to get a particular app from the site.

$installedapp = Get-SPAppInstance -web http://SiteCollectionURL/site | Where-Object { $_.Title -eq "myapp" }

Then you can uninstall by using Uninstall-SPAppInstance cmdlets.

Uninstall-SPAppInstance -Identity $installedapp

SharePoint hosted add-in: Error. Access denied. You do not have permission to perform this action or access this resource

Now, let us see, how to resolve the access denied issue which comes while working with SharePoint hosted add-in in SharePoint online Office 365 site. The error comes when I was developing a SharePoint hosted add-in where I used to get the host website title. The full error comes as Failed to get web title. Error.Access denied. You do not have permission to perform this action or access this resource.

Here we were trying to read the host web details. Once you deploy the add-in and try to open the add-in, then it will give the error like below:

To solve the issue we have to give the required permission. Here in this particular example let us give the read permission to the site collection.

To do this Open AppManifest.xml file from the solution explorer. Then go to the permissions tab and give the required permissions. Here we have read access to the site collection like below:

Once you modify this change, when you will deploy the add-in it will ask to trust the add-in like below:

Once you trust the add-in, you will not receive any access denied error. This is how to solve the issue, Failed to get web title. Error. Access denied. You do not have permission to perform this action or access this resource.

Skipping the uninstall step because the SharePoint Add-in is in an invalid state and cannot be uninstalled error in SharePoint hosted add-in

Now, let us see, how to solve the error: Error occurred in deployment step ‘Install SharePoint Add-in’: A different version of this App is already installed with the same version number. You need to delete the app from the site and the site recycle bin to install this version. Skipping the uninstall step because the SharePoint Add-in is in an invalid state and cannot be uninstalled.

While working on a SharePoint hosted add-in I got the error.

Error occurred in deployment step ‘Install SharePoint Add-in’: A different version of this App is already installed with the same version number. You need to delete the app from the site and the site recycle bin to install this version.

The full error looks like below:

Skipping the uninstall step because the SharePoint Add-in is in an invalid state and cannot be uninstalled

We can change the version number to solve the issue. Here I have changed the version number to 1.0.0.1.

We can change the Version number in the AppManifest.xml file like below:

Then I tried deploying from visual studio and it worked fine for me.

Another approach is that you can remove uninstall the app using PowerShell.

$instances = Get-SPAppInstance -Web “UR Site URL”
$instance = $instances | where {$_.Title -eq ‘Name of the App’}
Uninstall-SPAppInstance -Identity $instance

This is how to resolve Skipping the uninstall step because the SharePoint Add-in is in an invalid state and cannot be uninstalled.

Failed to get web title Error Access denied

Let us see, how to resolve access denied issue which comes while accessing SharePoint add-in.

Recently we were doing a sample SharePoint hosted add-in for our SharePoint Online site. We were trying to get the web title inside the add-in. We developed and deployed the add-in to SharePoint Online site. But when click on the add-in it gave the below error.

The error comes as:
Failed to get web title. Error. Access denied. You do not have permission to perform this action or access this resource. See fig below:

Failed to get web title Error Access denied

We need to provide at least read access for the site collection in SharePoint.

Open the AppManifest.xml file in the SharePoint add-in project. The in the Scope select Site Collection and give Read permission like below:

Now when you deploy the SharePoint Add-in, it will ask you to trust the Add-in. Click on Trust It button and then you will be able to see the title without error.

This is how to solve Failed to get web title Error Access denied You do not have permission to perform this action or access this resource error which comes in SharePoint hosted add-in.

Everything is fine but we had a small problem getting your license SharePoint 2016 App Error

Let us see, how to solve SharePoint 2016 Apps error, Everything is fine but we had a small problem getting your license. Please go back to the SharePoint Store to get this app again and you won’t be charged for it.

The error comes while adding an app from the SharePoint app store to your SharePoint 2013 on-premise environment.

Recently while adding an app from the SharePoint app store to my SharePoint 2016 on-premise site I faced this error which looks like below:

I was trying to add the app from the app store to my SharePoint 2016 on-premise site and I was using System Account. The system account is the problem. SharePoint does not allow a system account or farm account to add apps from the SharePoint App Store.

Then I added another account and gave full permission to it like below:

Then I try adding the app using the other account like below:

This time the apps have been added to the SharePoint 2016 site successfully.

A different version of this App is already installed with the same version number

Let us see, how to solve “A different version of this App is already installed with the same version number. You need to delete the app from the site and the site recycles bin to install this version” error which comes while trying to add a SharePoint hosted app in SharePoint Online Office 365 site.

The first time when I deploy and add the app to the site, I did not receive any error but next time when I modify something and then try to add again, I got the error that looks like below:

A different version of this App is already installed with the same version number. You need to delete the app from the site and the site recycle bin to install this version

Below are the things, I have tried and they worked for me.

First Delete the App and delete the app from the recycle bin (first stage).

Even if you delete the app from the first recycle bin it will still give the same error.

We have to delete from the second stage recycle bin. To do this open Site Contents page and then click on RECYCLE BIN link like below:

Then on the Recycle Bin page, in the down, you can see “Can’t find what you’re looking for? Check the Second-stage recycle bin”. Click on the Second-stage recycle bin to open the second-stage recycle bin.

There you can see the add-in will be presented there. Select the add-in and click on the Delete button to delete from the second stage recycle bin like below:

The required version of SharePoint Foundation or SharePoint Server is not installed on this system while developing SharePoint hosted add-in in SharePoint 2016

Let us check, how to resolve the issue which comes while SharePoint hosted add-in in SharePoint 2016 using Visual Studio 2015. The error comes as: The required version of SharePoint Foundation or SharePoint Server is not installed on this system. The target version of the SharePoint project is 15.0. The error looks like below:

Recently I have installed SharePoint 2016, Visual Studio 2015 with developer tools, etc. Then I also configure the On-Premise environment for Apps in SharePoint 2016. But when I tried to create a SharePoint hosted app, in the Specify the SharePoint target version I can see only two options like SharePoint 2013 and SharePoint Online.

And then when I deploy the app, it gives me the below error:

The required version of SharePoint Foundation or SharePoint Server is not installed on this system. The target version of the SharePoint project is 15.0.

The required version of SharePoint Foundation or SharePoint Server is not installed on this system

After doing some googling when I install Microsoft Office Developer Tools Preview 2 for Visual Studio 2015 and restart visual studio and I can see all three options like SharePoint 2016, SharePoint 2013, and SharePoint Online.

This is how to resolve The required version of SharePoint Foundation or SharePoint Server is not installed on this system error which comes while developing apps in SharePoint 2016.

Error occurred in deployment step Install App for SharePoint: Sideloading of apps is not enabled on this site

If you are developing a SharePoint hosted add-in or provider hosted add-in using visual studio, you may get the below error:

Error occurred in deployment step ‘Install App for SharePoint’: Sideloading of apps is not enabled on this site

The error looks like below while deploying SharePoint Add-in.

Error occurred in deployment step Install App for SharePoint: Sideloading of apps is not enabled on this site

This error comes because of the URL we provide while developing an add-in in SharePoint. SharePoint App sideloading feature allows a developer to install a SharePoint app directly into a site to explicitly bypass the regular governance controls of SharePoint.

Microsoft provides a new type of site, know as Developer site (Created by using Developer site template) to work with app development. These sites are specially designed for SharePoint Add-in developers to install and test apps before they are released to the store or app catalog or add-in catalog.

So the solution to this error is to create a developer site and use the developer site to create your SharePoint hosted add-in or provider-hosted add-in. You can read steps to create a developer site in SharePoint Online Office 365.

You may like the following SharePoint tutorials:

• SharePoint Custom Workflow using Visual Studio
• How to create provider hosted app in SharePoint Online step by step
• SharePoint event receiver example
• SharePoint Online copy list items to another list programmatically (C#.net)
• How to get SharePoint person or group field using JavaScript (jsom)

In this SharePoint tutorial we discussed, what is SharePoint hosted add-in? Different types of SharePoint add-ins in SharePoint?

• What is SharePoint Apps/Add-in?
• Different Types of Add-in in SharePoint
• SharePoint-hosted add-in
• SharePoint Provider-hosted Add-in
• Configure SharePoint On-premise environment for developing SharePoint Add-ins
• Create and Deploy SharePoint Hosted Add-in/Apps using Visual Studio 2015/2017
• Deploy SharePoint Hosted Add-in (Developer Site)
• Deploy SharePoint Hosted Add-in to App Catalog Site
• Video Tutorial: Create and Deploy SharePoint Hosted Add-in using Visual Studio
• App Life Cycle Management in SharePoint 2013
• This task requires the application to have elevated permission error while deploying sharepoint-hosted apps
• Error occurred in deployment step ‘Install app for SharePoint’: The System Account cannot perform this action
• The Subscription Settings service and corresponding application and proxy needs to be running in order to make changes to these settings
• Error occurred in deployment step ‘Install app for SharePoint’: The provided App differs from another App with the same version and product ID
• Connections to the SharePoint server are currently disabled because the project is in offline mode
• How to manually Trust SharePoint Add-in in SharePoint Online
• How to update app registration in SharePoint Online site
• Error occurred in deployment step Install app for SharePoint Communication with the SharePoint server is canceled
• Error occurred in deployment step Retract Solution A communication error has occurred while invoking commands in SharePoint host process
• Everything is fine but we had a small problem getting your license SharePoint 2016 App Error
• The required version of SharePoint Foundation or SharePoint Server is not installed on this system while developing SharePoint hosted add-in in SharePoint 2016