Ready for a primer on what SharePoint Add-Ins actually are?

As discussed here, they are self-contained extensions, which means that code written for Add-Ins won't stay on SP server. Well this is all theory, and there is already a lot of documentation already available out there. So what's different about this discussion of SharePoint Add-Ins?

I've learned that many other articles are written with the highly experienced in mind. This blog is for beginners, wondering how and where to even start. Ready to dive in?

Step 1 - Approach:

You have selected SharePoint Hosted Add-In, which means that all your Add-In requires can be done with JavaScript and does not require any third party platform or database or any server side code. If it does, you would be better off considering a  Provider Hosted Add- In.

Once you have fully collected requirements, the next step is setting up a is development environment. There are two options for development. You can develop Add-Ins in Visual Studio 2012 and later versions or using the Napa O365 development tool. (My personal preference is Visual Studio.)

Step 2 - Let's get Practical:

In Visual Studio 2015, create your first SharePoint Hosted Add-In, as follows:

Go to File -> New -> Project.

clip_image001

Give it a Name, which will be the solution name also and click OK.

After that, Visual Studio will ask for URL of SharePoint developer site. If you haven't configured SharePoint Developer Site yet, click this link for instructions.

clip_image002

Select SharePoint-hosted and click Next

It will prompt for O365 login , which will enable Finish button and click Finish.

Visual Studio 2015 will open solution for your Add-In.

clip_image003

Here, I have expanded Pages & Scripts.

Step 3 - Understanding the Anatomy of Solution Folder:

As a newbie, it is preferable to have knowledge of whole folder structure and all files in there, but to start with you can focus on the high-level ones which are highlighted below.

Default.aspx: This page defines look and feel of your add-In, so it contains stylings and tags.

App.js: This is default JavaScript file, which will define the business logic that defines the purpose of your add-in. In other words, all JavaScript code will be written here.

AppManifest.xml: This is where properties and metadata information for add-in is stored. The best thing is, it is in interactive format, so don’t really have to worry about all xml tags or code. Another most important feature of AppManifest.xml is, it is used to set app permissions, which is the basic requirement for every SharePoint Add-In.

There are other files, apart from these 3, but will require knowledge, when you advance gradually in Add-In development.

Step 4- Code and Test:

SharePoint provides you with basic code, when you create Add-In. You can use it or Paste the code below in App.js

This code retrieves information of the current user's title and email.

'use strict';

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage()

{

var context = SP.ClientContext.get_current();

var user = context.get_web().get_currentUser();

$(document).ready(function () {

getUserName();

});

function getUserName() {

context.load(user);

context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

function onGetUserNameSuccess() {

$('#message').text('Hello ' + user.get_title()+ '&'+ user.get_email());

}

function onGetUserNameFail(sender, args) {

alert('Failed to get user name. Error:' + args.get_message() + 'This is my first SharePoint Add In');

}

}

Testing: To test or debug Add-In just hit Start button. The Add-In will be in debug mode. You can set breakpoints before debugging.

clip_image004

Step 4 - Deployment:

Deployment of SharePoint Hosted Add-In is pretty easy.

Right Click on SharePoint Project--> Publish

clip_image005

In the succeeding dialog box , select Package the app. This creates you add-in package, which can be uploaded to App catalog site.

In the upcoming blogs, I would be going through, how to make cross domain calls and permissions that are integral part of Add-Ins. For more information about this blog entry or C5 Insight's Services, please Contact Us.