Developing SharePoint Hosted Add-ins

SharePoint Hosted add-ins are client side applications written primarily in JavaScript, HTML and CSS.  Your code actually runs on the “add-in web” which is a sub web of the SharePoint site that the app is installed on.

Create the project

Assuming you have a development environment set up, the next step is to create your add-in.  See steps from Microsoft’s documentation:


Configure the project

To configure your project navigate to the AppManifest.xml file that is generated when you create the project.  Visual Studio gives you a nice GUI to modify the properties of your application.  The list below includes some of the important adjustable properties of your add-in.

  • Title
  • Name
  • Version
  • Icon
  • Start page
  • Permissions

Note: Be sure to read the considerations on this page before configuring your application’s permissions.

Start coding… or not?

Generated files of importance:

  1. /Pages/Default.aspx – Default aspx page of your add-in web.  Imports the files listed below.
  2. /Scripts/App.js – JavaScript for your app goes here.
  3. /Content/App.css – CSS styling for your app goes here.

Press F5 to execute (this temporarily installs your add-in to your development site).  If you’re a front end web development guru you should be able to hit the ground running at this point.  Brush up on SharePoint’s Client Side Object Model (CSOM) as well as the REST API capabilities and keep the considerations listed below in mind.

On the other hand if you’re new to web development, I suggest taking a step back and learning the fundamentals of HTML, CSS, then JavaScript.  When you have a good handle on those languages start researching what it means to have a RESTful API.  The worst time sink tends to be new web developers blurring the lines between frameworks and fundamentals.  For example, you might waste an afternoon wondering why SharePoint’s API endpoint is broken and not returning results when, in fact, you haven’t consumed it correctly in the first place.  Feel free to contact me for some solid resources on these topics.


Use the SharePoint REST API or Client Side Object Model (CSOM) for data fetching and modification in context.

In a SharePoint Hosted app there are resources available from both the host web (where the app is installed) and the app web (the sub web where your code executes).  These resources are limited to the access rights of the user running the application.  Resources outside of this site scope (i.e. cross domain) are unavailable unless the following is true:

  • You must be using the cross domain library
  • The app must be tenant scoped
  • The user running the app must have tenant level permissions

In most use cases, the last bullet point above is unrealistic unless your user is a tenant-level admin.

Both the application and the user need adequate access to perform an action.

Keep this in mind while developing your SharePoint Hosted application.  If the app has Full Control permission to the site but the user running the app only has Contribute access then the application will only be able to perform actions at the Contributor level.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s