Microsoft 365 Community Community Demos, 12 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building an enhanced commenting web part with SPFx

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on March 12, 2020

In this 9-minute demo, Sudharsan Kesavanarayanan presents a web part that delivers an "advanced comments box" – using SPFx with jQuery Plugin. Out-of-the-box commenting is a limited experience today. The robust capabilities of this web part include: comment classifications/sort by, add attachments, see previews, like and reply to comments, hash tag and ping users, icon for new comments. The purely JS web part uses jQuery and SPFx property controls 1.16.0.

Presenter: Sudharsan Kesavanarayanan | @sudharsank

Supporting materials:
• Advanced Commenting Sample | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-advanced-commenting
• jQuery comments | https://viima.github.io/jquery-comments

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Since this is my first demo, a small introduction, my name is su descent, caso, naina and I'm working as a SharePoint consultant entity based in Singapore. So this demo is regarding advanced comments box. We can, since everyone knows that there is a comment box available in the modern pages, so a slight initiative from one of my client that they need to add some attachments and some features on that comment box. So we come up with the custom comments box to add it to the modern pages. So these are all some features on the advanced features.

A

One. The comments can be classified as popular new as olders and attachments, and it can add files, video videos, opera, fire office file formats, and they can also maintain the attachment size they can configure the attachment size and the users can modify their own comments.

A

They can like and reply the nested comments, and they can also delete their own comments unless there is no reply and there is hash tag and pin uses- and there is a new icon functionality where it represents that these comments- and these are all some supporting artifacts I- have used a plug-in which is developed by prima solutions.

A

Jquery comments and the other thing is have used PNP the sp2 two versions and property controls jQuery moment, and there are two pages, which is an input page available in one line which is dark, dot, aspx and amber Tatia specs. These pages are mostly used for the preview portals, so let's move on to the demo.

A

So this is a test page. This is where I have added my comments: control in the test page, where you can see here, you can classify the comments and you can also classify the attachments and there are few properties which I have implemented like.

A

The daytime format and the profile pictures which is round or square and the navigation whether you need to enable these navigations or not, and the attachment whether you need to enable the attachment for the end users. So if you are enabling the attachment you have to select the document library and they allow the file extension where you can specify whatever the file extension, but the preview is supported only for the files which are compatible with the pages, and you can also restrict the file size to be added as an attachment.

A

And there are other properties like you can ping the users and edit the comments. So once this edit comment is enabled, then you can delete their own comments and they like and like it, and there is a reply and hash tags and that there is a preview without the preview can just see the file name and once you click on the file name, it will download it. So once you enable the preview.

A

You can see the preview of the file inside the comments box and, for example, if I am uploading some excel, so you can see the all the preview.

A

And you can like it, and one more thing is this comments. Report can be added as a part to the normal modern page and you can save it as a template, so whatever the so the template, when you try to create a page using the template, you can use this comments box. So here I have created a template with this comments box and then I have disabled the existing out-of-the-box comments so that I can use this custom comments box and then you can create.

A

So this is it so here you can view the replies and you can post it, you can delete it and you can also bring the users like.

A

Okay, so this is it and you can find my sample here. The link J's advanced, commenting.

A

So that's it. Visa.

B

Each there was three questions actually on there on the chats. If you don't mind, there's three questions: right, did it there? Can you can you actually slightly cover the code as well? What's the the learnings is there? Is it based on react.

A

B

Worries: okay,.

A

So this is a purely a JavaScript web part, and this is the TS files where I have used the property controls and a few of the controls and I have used the actual J's from the jQuery comments to J's, which has been configured in the config dot JS file, as an external javascript libraries and this j is internally used at x complete. So I have enabled those takes complete.

A

Also here I have imported it, and these are all the properties I have declared it and a one more thing: whenever you start adding this webpart for the first time, it will check for the list and then it will try to create the list automatically so and further on proceeding. It will check and then it will display the comments. So this is a render portion where I have checked and created the list and the initialized comments. This is where I am initializing.

A

The control and I have used the required format to use the J's and then initialize the comments control here. These are all the properties which has been provided by the jQuery comments and I have slightly customized the jQuery comments. Today is to get the SPF X, that is, the site, URL and append the doctor aspx and then the Ember dot aspx for the preview purposes, and these are all some of the predefined methods which can see here. So these are all some of the methods and functions are available.

A

So I have just used that methods and house slightly customized. It and I have also used separate, SP helper class, where I have used the selective imports and then defined all the functions which ever communicated with SharePoint in a separate file and then and then I have called this point.

A

Is there anything we said yeah.

B

I think that's really really cool, don't don't close it yet so few questions and comments and just kind of an observation, so so using the chapters, absolutely a convenient way of convinced now shipment list can store up to millions of items. The questions, though, as long as you don't load more than five thousand a one I'm, not sure if the web part is taking that into account in the in the thing. But it's a few yeah.

A

Yes, I am storing the as a JSON, I'm, not sure each and individual item for one page, yeah I'm, storing it as a JSON using the multi-line text. Control and I have checked for more than 5,000 users and it is working fine, yeah.

B

And obviously, then the Chasen is pretty big so that that's one consideration as well, but but again, really clever implementation, because out of the box, commenting is actually implemented similar ways and it has a much more limited experience. So this is really really cool web part, really really cool implementation and and nice way of dealing with with the storage in the initiative.

B

There's a question related: is there a limit on multi-line comments, field, I can't remember, but I think it's. If there is it's pretty massive, it's basically seco server behind the scenes, which is storing the list. Data in that case as well, but I think 64, stable. Okay, thank you. Jim I can't remember all of that stuff. So, okay, that's it! No! It's a really really great sample.