On

In this post will try to walk you through build of a SharePoint Add-In , The addin will have the following building blocks:

  1. Comment List to store the comments.
  2. App Part which can be added to any page and will have a parameter called PageID used to identify particular page comments, the app part will be Angular App consist of
    1. Comment Service : Load the comments from the comment list 
    2. Comment directive:render the comments using a template (comments.html)
    3. Main controller and a main view.
  3. We will update the app manifest file to allow read user profile properties to show the user image and display name.
now let's dive into more details about the above building blocks:

Comment List

The comment list will be used to store the comments and it will have the following fields:

App Part

Represented by  the page commentapp.aspx with a single parameter (PageID) , commentapp.aspx will be the entry point for an angular app, in the angular app we had the $locationProvider Html5Mode enabled , we add the base href to be the commentapp.aspx page itself.

  1. Main controller:  will have the addcomment, load comment functions which utilizes the comment service. note: when executing POST request to add comment we need to get the current SharePoint context FormDigest value
  2. Then you need to pass the value to you addComment function in comment service.
  3. Comment Directive , which basically render the comments and replies and as you can see in the structure below , I'm using a recursive directive , which is having a comment directive within the comment directive template.
  4. Getting user properties is just another function in the comment service , we retrieve the Email and Display name properties and construct the avatar url from o365 outlook( you might want to discard this approach if you are building this app for on-Premises version of SharePoint)
to make the last bit of code works without getting 403 forbidden error we need to update the app manifest file and add an app permission to read user properties

Let's see the addin in action

In my developer site I'll install the SharePoint AddIn, the addin will prompt me to trust it , once we gone pass the installation bit, we can Add the app part to our test page and that's how the app part is rendered, 
Sadly I have only one user in my O365 tenant, In Part II of this walk-though we will see how can we convert this example into a nuget package we can add to an Out of the box SharePoint Add-In Project.
Hint:: Don't forget to add the PageID parameter to filter out different comments.

The code for this app can be found @https://github.com/ministainer/CommentApp