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
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) –
Let’s just jump in and do it –
- Open Visual Studio and create a new project of type ‘SharePoint Add-in’.
2) Enter SharePoint site for debuggin as the developer site created using ‘developer site’ site template as shown in Part 1 of this series.
3) Select the SharePoint version as ”SharePoint online’ and click ‘Finish’.
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 –
Also, add the “div” element inside the “PlaceHolderMain” as shown highlighted in the image below –
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 –
When you click on ‘github’, you will see the SharePoint add-in in action.