Recently, I’ve added one of the last main intranet common feature that was missing in the PnP Starter Intranet solution: a comment module! With this feature, you are now able to turn on/off comments for a specific page. Pretty cool, huh?
Update (01/04/2018): The complete features list for the PnP Starter Intranet is now available here.
Since it is now a basic feature in the SharePoint modern UI, it wasn’t the case with the good old SharePoint classic experience. To implement such a feature, we had some options like to embed a Yammer feed on the page, use the Noteboard Web Part with no possible customization or build over the SharePoint discussion board list. In the past I’ve used to implement this feature using the last option by using server-side code and dedicated web services. Since the main concept of the PnP Starter intranet is to be fully client side, I chose to rebuild this feature according this constraint.
So how does it works?
Behind the scenes, this component is built over the OOTB SharePoint discussion board feature (not new at all, since it was present in SharePoint 2007!). Applied to a publishing intranet, the concept is fairly simple: each page is seen as a discussion board subject with multiple replies (i.e. the comments on the page). In this way we can handle comments on a page just by manipulating the discussion board list items and folders programmatically.
Discussion board list behavior
Inside a discussion board list, a discussion is represented as a root folder and all replies are contained in that folder linked by the “Parent Item ID” column. In this way, we can theoretically reply to other comments indefinitely since replies are not indented (in the “Flat” view). This behaviour is illustrated as follows:
By default, we don’t create a new subject for every new page for obvious reasons. A subject is simply created when a user add the first comment on the page. The base operations to manipulate the SharePoint discussion board list programmatically are done in the SocialModule.ts class using the default JSOM SharePoint methods (SP.Utilities.Utility.createNewDiscussionReply and SP.Utilities.Utility.createNewDiscussion) and the SharePoint REST API through “sp-pnp-js” to manipulate list items (delete and update operations). I don’t go into detail in these methods since you can refer directly to the file to see how it works.
Likes and ratings are not enabled by default and can be turned on on the discussion board via the “Ratings settings” option. Notice that the “Star ratings” option is not supported rigth now, only “Likes” are. Also, this setting will be reflected directly in the component and can be turned off at any time.
To allow your users to add comments on the page, you will have to give them at least the “Contribute” permissions on the list so they could be add, edit and delete comments.
To make sure users will be able to only edit and delete their own comments, in the list advanced settings, the item-level permissions option must be set to “Create items and edit items that were created by the user”:
Be careful, this setting is NOT a permission level and won’t be reflected when you call the getCurrentUserEffectivePermissions on a specific item via the REST API. (See the getCurrentUserPermissionsOnItem in the SocialModule class to view how to handle this behaviour).
Simple for contributors, easy to manage for administrators
The first version of this module consisted to add a script editor Web Part in the page manually and set the correct HTML markup. From a contributor point of view, it was certainly not the easiest option so I chose to just add a boolean flag directly on the page layout to turn on or off comment for that specific page:
One of the main advantages of the discussion board option over the other one is the ability to manage comments globally directly in the list thanks to the “Management” view. By this way, an administrator can moderate comments in this list instead of going on each page. Also, for multiple languages, comments are local to the sub site (i.e. the language) and are not replicated when the page is translated.
The PnP Starter Intranet implements now one of the main features for a publishing intranet. I hope you will enoy this new update!
Remember, this solution is totally free and can be deployed without any restriction in your organization. If you encounter issues, don’t forget to report them in the PnP GiHub repository by mentioning me @FranckyC. Sharing is caring!