Using REST to Add Commenting to a SharePoint Page Layout

If you’re familiar with the SharePoint note board web part you know that it easily gives you the ability to drop it in a web part zone or embed in a page layout and instantly have a commenting area for your page. Very quickly, however, you will find that there are some limitations.

  1. There is no way to disable the post limit – you can only decide on a number and it has this weird pagination that leaves much to be desired
  2. It does not (to my knowledge) store the comments anywhere where it’s easy to access in case you needed to manage them or get the number of comments per page.

I tried using the new SharePoint 2013 Newsfeed webpart for commenting but that web part doesn’t allow you to be page specific – it’s a site wide feed and just a global or general commenting or sharing control.

So, I came up with a way to do what I needed using SharePoint 2013’s Representational State Transfer (REST) interface. This interface opens the SharePoint 2013 development platform to standard Web technologies and languages. Basically using a URL you can gather data you need from lists, libraries, etc….I am using it to do most of the grunt work to be able to read list items, write to lists and create list items, edit list items, etc.

The below instructions will get you set up with a list that houses your comments per page, a page layout that has the comments box on it and renders comments below it (also provides edit and delete icons if the current logged in user matches the author of the comments) and a display template for a content search web part (CSWP) to roll up those pages and show the number of comments on each page.


 Requirements

  1. Make sure your master page or page layout has the latest version of jQuery attached
  2. Download the font FontAwesome and upload and attach the css to your master or page layout – FontAwesome – this is for the icons for the editing tools

Download the Code

Update History

  • 6/16/2015
    • update to comments.js to allow for comments list on each site or sub-site and have comments and read counts be relative to those sites

How to Use It

  1. Attach the comments.js script to your master page
  2. Attach the comments.css to your master page – this is a good starting point for the styling of the page comments and the rollup counts
  3. Upload the comments.png image to the location you have your images and update the CSS document style for .comment-wrapper to reflect this location – along with the base CSS it will look like this when finished
    page-comments
  4. Create display template
    • From SharePoint Designer browse to ALL FILES > _catalogs > masterpage > Display Templates > Content Web Parts
    • From there choose FILE > HTML to create a new blank Display Template and name it Item_PagesWithComments.html
      new-display-template-html
    • Right click the file and CHECK OUT – then right click it again and EDIT IN ADVANCED MODE
    • Copy the contents of PagesWithComments-html.txt and replace the entire contents of your new display template with this
    • Make sure you save it and then CHECK IN and PUBLISH A MAJOR VERSION
  5. Copy the contents of comments-html.txt to the Page Layout you want the comment box to appear – (I recommend having a specific CONTENT TYPE/PAGE LAYOUT so that the CSWP rollups can filter these pages only – explained later)
  6. Now we need to create the columns, content types and list for the comments
    • From your browser – go to your SITE SETTINGS from the root and go to SITE COLUMNS
    • Click CREATE and create a SINGLE LINE OF TEXT field called CommentPageID
    • Now go back to SITE SETTINGS and go to SITE CONTENT TYPES
    • Click CREATE and name it Page Comments – use Comment as the parent – it’s under LIST CONTENT TYPES
    • On the next page click on ADD FROM EXISTING SITE COLUMNS and attach the CommentPageID column you created earlier
    • From the root go to SITE CONTENTS and ADD AN APP > Custom List and it MUST be named ‘Page Comments’ (note: if you happen to want to name it something different there is one place in the comments.js file that you’ll need to update that and one place in the Display Template)
    • Next go to this new list’s settings
      list-settings
    • Click on ADVANCED SETTINGS and make sure ALLOW MANAGEMENT OF CONTENT TYPES is checked and click OK
    • Click ADD FROM EXISTING CONTENT TYPES attach the Page Comments content type
    • Click CHANGE NEW BUTTON ORDER AND DEFAULT CONTENT TYPE and unselect ITEM and click OK
  7. At this point you should be able to create a page and apply your page layout and see the comment box and be able to add, edit, delete comments – and if you visit the list you’ll see items being populated
    comment-box

Now say you wanted to rollup JUST these pages and you wanted to show the number of comments that are on each page…the display template that we created earlier will help you do just that!!!

  1. Go to the page you want to rollup these pages to and add a CSWP
    cswp
  2. Edit Web Part and click on CHANGE QUERY and click on SWITCH TO ADVANCED MODE and make sure your query text is set up like this (update the path to your pages library and test the query – just don’t be alarmed if there’s no content because depending on how your site’s search crawl is set up you may have to wait for the actual pages to index)
    cswp-query-text
  3. On the REFINERS tab make sure you add the PAGE CONTENT TYPE that your page layout was created with as the refiner (this is why I suggested earlier to create a unique CONTENT TYPE/PAGE LAYOUT for these) – click OK
  4. Next you’ll want to select Pages with Comments as your display template and then click OK and PUBLISH YOUR PAGE

You should now see a count for how many comments are made on each page – clicking the word COMMENT(s) takes you to the page that is being rolled up
comment-count


Eventually I’ll be making updates to this to allow for replies. I would love to hear any suggestions to make this better or any other options that you’d like to see added.

You may also like...

Leave a Reply

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

eighteen + 16 =