The PnP Starter Intranet 2.2 goes social with a new page comments component!

The PnP Starter Intranet 2.2 goes social with a new page comments component!


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.

Thanks to my new skills learned with SPFx, I’ve decided to recreate this feature using React associated with the default SharePoint JavaScript APIs for the discussion board. By choosing React instead of Knockout Js (90% of the PnP Starter is built with Knockout…), I also wanted to show you how it was easy to mix development frameworks inside the same solution thanks to webpack.

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.

Comments likes

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.

Permissions

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

Contributors

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:

Administrators

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.

Conclusion

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!

 

2 Comments

Add yours
  1. Peter Ridgway-Davies

    Hi Franck
    Just want to express my admiration for your hard work and your colleagues hard work – you are all Stars!

    I also would like to know when v2.2 is being merged into the branch master? I have found it difficult to see whar version the branch master is. I have read the readme docs but am struggling to find this key into. I an slightly risk averse and am unlikely to pull down a Dev branch. Please advise

+ Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.