SPFx – Advanced Comments Box

Introduction

This component is developed as a SharePoint Framework Web-part to capture and store the comments. The web part can be used as replacement for the out-of-box comments box that is available in SharePoint Online. You can disable the out-of-box comments and this web-part to a page, save it as a template and you can start creating the pages based on the template.

Features

  • Comments classification by Popular, Newest, Oldest and Attachments
  • Support for sharing images, document, videos.
  • Options like Edit, Reply (nested comments) & Delete are available.
  • You can like the comments shared.
  • You can make use of Hashtag & Ping Users.
  • You can make use of Document Preview feature to view the files and videos shared in the comments.
  • New icon will be displayed based on the current day’s comments

Properties

There are few properties associated with this web-part which gives you full control on the features, you shall be able to enable or disable features based on the configuration. Below are the properties that are configurable

  • Date Time format on when the comments were added or modified
  • Profile Picture style, whether it has to be rounded or square
  • Enable or Disable Navigation whether to display the comments classification
  • Enable or disable Attachments. Following properties are required when attachments are enabled
    • Library to store the files uploaded.
    • Allowed File Formats in the comments box.
    • Maximum File Size allowed.
  • Ping Users will allow to mention the users. The users are pulled from the Site Users.
  • Edit comments can be enabled or disabled to allow the users to edit the comments. Files added can be deleted not edited.
    • Delete option can be enabled or disabled to allow the users to delete the comments. Comments with no-replies are allowed to delete. Delete is allowed only if Edit is allowed.
  • Up voting of comments to like or dislike the comments.
  • Hashtags
  • Document Preview can be enabled or disabled for the office files and videos.

Preview

Below is a short video presented in the SharePoint Framework community call.

Source Code

The above web-part is shared with the community and is of free to use. Please click the below link to download the code and have fun.

https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/js-advanced-commenting

Happy Coding…

Advertisement

8 thoughts on “SPFx – Advanced Comments Box

  1. Thanks – I took the source code, and updated to allow for “multiple” webparts on a page. We now have a 9 webpart page – with a photo and then comments/likes for each. It’s a gallery of images, with a separate LIKE/COMMENT for each.
    I’ve made a set of changes – and can add them back to the repo – or include a screenshot/video – but I couldn’t find your email address.

    Like

  2. How to delete comments automatically from the root page comments list after someone deleted his/her comment on the web part located on news page?

    Like

    • Hi, when there is delete option enabled, the comments are deleted automatically from the list when the user deletes a comment. I am not sure what do u mean by root page comments and news page. Can you please explain in detail?

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s