Create a SharePoint hosted add-in

This post is part 2 of series “Create and deploy SharePoint Hosted add-ins”. Before reading this article, you may need to visit How to setup development environment to create SharePoint-hosted add-ins

In this post, I will give you a walkthrough about how to create a SharePoint hosted add-in and deploy it to developer site created on SharePoint online. I thought instead of creating a simple Hello world app, let’s create something that uses a little bit of AngularJS with javascript. This is an add-in called “Github” that allows to search all the repositories created by the github user in github. Just type the username in the Searchbox and ‘Search’, it will display the list of all the repositories created by that user in github. In addition , there is also a select box that allows you to apply Name, Langauge and Rating filters.

You can download the code from here

It should look like this (I havent applied any styles to the app as emphasis was on the core business logic) –

Main.html
image5
Userdetails.html
image6

Let’s just jump in and do it –

  1. Open Visual Studio and create a new project of type ‘SharePoint Add-in’.

image7

2) Enter SharePoint site for debuggin as the developer site created using ‘developer site’ site template as shown in Part 1 of this series.

image8

3) Select the SharePoint version as ”SharePoint online’ and click ‘Finish’.

image9

4) By default, you can see that this solution has one feature file, an Appmanifest.xml and 4 module elements named ‘Content’,’Images’, ‘pages’ and ‘Scripts’. For our app to work, we dont need to make any changes to AppManifest.xml, and any content inside the Images, Content and Scripts modules. We do need to make chamges to default.aspx page and add some html and custom javascript files as explained in the next step. ‘Default.aspx’ is set as the startup page for our app but you can also create another page index.html and set it as startup page in Appmanifest.xml.

image10

5) Add another module called ‘Customscripts’ and add the custom javascript files from the package downloaded from this post above as shown below –

image11

Even if your AngularJS is 5/10, the javascript code inside these files would self explanatory for you. Still, I should briefly summarise the code –

config.js – It is a javascript module that acts as a router that routes user to ‘main.html’ and ‘userdetails.html’ based on the url of the page and associate these pages to their own controllers.
github.js – It is a custom angular service which has couple of javascript functions that reads data from github using $http service.
MainController.js and UserController.js are the controllers for main and userdetails html files respectively.

6) In the existing ‘pages’ module, add html files (main.html and userdetails.html) from the package downloaded from this post above as shown below –

image12

7) Modify the default.aspx page and make sure that it has reference to the following javascript files –

image13

Also, add the “div” element inside the “PlaceHolderMain” as shown highlighted in the image below –

image14

8) Finally, you are now all set to run this project. Click on ‘Start’ button in the top ribbon which will install and deploy the add-in to the developer site. Once deployment is successful, you shold see the add-in under ‘Site Contents’ in your developer SharePoint site. Something like this –

image16

 

When you click on ‘github’, you will see the SharePoint add-in in action.

 

Next, Part 3 – How to package and install the SharePoint hosted add-in to the live site

 

Leave a Comment

Your email address will not be published. Required fields are marked *