Enhanced commenting webpart using SPFx

Hi Friends, today I am gonna show you one of the SPFx components developed by me.

I hope, all the SharePoint users and developers are aware of the comment box in the modern page. The comments are tied to the page and are stored as metadata to the page. There are some features like a reply to the comment, likes etc., But there are some features missing in the comment box which may be required for the customers. One of my clients had asked for the feature of uploading files to the comment box.

Based on the above use case and with many features, I took an initiative to develop an advanced comment box that can be used by switching off the out-of-box comment box. The custom comment box can be added to a page and once it is saved as a template, based on the template the page created will inherit the comment box. All the comments are stored in a separate list with the 'Page Title' and 'Page URL' as a key to the page comments.

The component was developed using SPFx version 1.9.1 and the following are the features of the advance comments box.

  • Classification of comments by Popular, Newest, Oldest, & Attachments
  • Users shall be upload files. File size and allowed file types are configurable.
  • Edit their own comments, Reply (nested comments), Like & Delete (own comments until there is no reply) options are available based on the configuration.
  • Hashtag & Ping Users
  • Document Preview is also available for all office documents and videos based on the configuration.
  • Display of New icon for the current day comments.



The above component has been uploaded to the sp-dev-fx-webparts community. Click here to access the code.

Below is the demo to the component.


Happy coding, Cheers 😃

Comments

Post a Comment

Popular posts from this blog

PowerShell to update SharePoint Online User Profile property from Azure AD

Image
Hi Friends, in this post, I am gonna walk you through the steps to update the SharePoint Online User Profile property from Azure AD. You may think, why this is necessary since SharePoint online will sync automatically with Azure AD. The tricky part is the auto-sync may take up to 24 hrs to sync Azure AD to SharePoint UPS. The next tricky part is not all the AAD profile properties are synced to SharePoint UPS. Only a few of the properties are synced and below are the list of properties relevant to the profile that is synced to SharePoint UPS User Name First name Last name Name Office phone Department Job title Manager Office Office phone What about the other properties like 'Mobile Phone' that are relevant to the user??? What about if there is a drastic change in the Organization structure and you want the SharePoint UPS to reflect immediately??? To resolve all these obstacles and issues, we need to use PowerShell Now you understand why there i...
Read more

SPFx - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data

Image
Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data  --> You are here In this post, I am gonna show you how we can use  DetailsList   from  UI Fabric  and  PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' CSV ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  S...
Read more

Using React Context API in SPFx

Image
Introduction   Hi friends, this blog post will guide you through the usage of  Context API  which is one of the new features introduced in the latest version of React   in SPFx projects .  What is React Context and When to use it In a normal React application, the properties are passed top-down from parent to child and then to the grandchild via props. It works great in simple react applications, but this will be very tedious for complex applications.  Context  provides us an easy way to share the props without having them pass through all the intermediate components.  Context  should be primarily used when the properties must be accessible by many components at different nesting levels. We must apply it with cautious because sometimes it makes the reuse of the components more difficult. How can we use it in SPFx?   I hope many of you are aware of the SPFx development model, where we might need to pass the properties that are captured ...
Read more